valentin vannay

valentincognito

Laravel 5 Instagram Feed Access

2016-04-19

Finally I successfully accessed my instagram feed to display it on my website ! I feel it is the biggest achievement in my developer life. The road that led to this success was very long and painful So I hope I can help a few people that will come across the same problems. Note: For this little tutorial I am running laravel 5.2  

Vinkla Instagram

On github there is what appears to be a very simple package for laravel to simplify the access of instagram feeds. Simple in theory but it wasn't in practice... Anyhow great work by Vinkla even though there is a lack of documentations and support. So let me guide you through the installation and usage of Mr. Vinkla's package.  

Installation

At the time of this redaction vinkla/instagram is in version 4.0
composer require vinkla/instagram

Configuration

The usual Laravel routine Add the service provider to config/app.php in the providers array.

Vinkla\Instagram\InstagramServiceProvider::class

'Instagram' => Vinkla\Instagram\Facades\Instagram::class
php artisan vendor:publish
Please note that on the github doc they talk about Graham Campbell's Laravel Manager package. I do not know if this package is a vital dependency or not but I previously had installed it already in my project. So you might need to install it too.   When you publish the new vendor you will find a configuration fill under config/instagram.php. YOU NEED TO EDIT THIS FILE !! The default one isn't working. Here is how the main connection array should look like:
'connections' => [

        'main' => [ 'id' => 'you-client-id', 'secret' => 'your-secret-id', 'access_token' => '{ "access_token": "your-access-token"}' ],

    ],
To get the client ID, secret ID and access token please follow the below steps:

1. Create an instagram app

  For the valid redirect URLs you can just put localhost but I believe for the website URL you should put a correct URL. But localhost should be also fine if your are developing locally.     Be sure that in the security tab the implicit OAuth is disabled !! Next enter the following URL into your browser: https://instagram.com/oauth/authorize/?client_id=YOUR-CLIENT-ID&redirect_uri=http://localhost&response_type=token&scope=likes+comments+relationships+basic !! At first I didn't put the scope arguments and it wasn't working !! Then click authorize and DON'T CLOSE the window you have to get the token value in the result URL. ( You should see something like: http://localhost/#access_token=1467689920.0555119.79bca0a23b284506ba22969cbaa2a5b4 ).   Now you should be all set to use vinkla's package. Here is a controller example:
<?php

namespace App\Http\Controllers;

use App\Http\Requests;
use Illuminate\Http\Request;
use App;
use Vinkla\Instagram\Facades\Instagram;


class HomeController extends Controller
{
    /**
     * Show the instagram feeds
     *
     * @return \Illuminate\Http\View
     */
    public function instagramFeed()
    {
      $response     = Instagram::users()->getMedia('self');
      $instagrams   =  json_encode($response->get());

      return view('my_view', compact('instagrams'));
    }
}
In the above controller we get the media of our account and encode the result in JSON. And here is an example of a view to display the data:
<?php $instagram = json_decode($instagrams); ?>

        @for($i=0; $i <= count($instagram); $i++)
            <img class="work-thumbnail" src="{{ $instagram[$i]->images->standard_resolution->url }}" />
        @endfor
Accessing the data was personally the trickiest part for me... Instagram return a huge array / object. I tried many different methods but this is the one that worked the best for me.  

A few more recommendations

Before I leave I'd like to recommend the following things:
  • Vinkla's package is based on elogram API, so I strongly recommend browsing their documentations to get the information you need. Link to elogram's doc.
  • Use a regular 'for' loop to browse the JSON object instead of a foreach
  • To see and browse the JSON object you should use laravel's dd function and you'll be easily able to see what you need
Like this:
dd ($instagram);
With this you can easily go through the complicated array. For example if you want the width of the video: $object[1]->videos->low_resolution->width (the number '1' is the object number you want to see)   Well I think that's it for today !! Hope I will save time and lives ;) Cheers