Coding with Murtaza Laravel Instagram Feed.

Assumptions

• You already have a Laravel app set up.
• A (Mysql) Database.
• You have an Facebook and/or Instagram account.
• Knowledge of Routes, Controllers and commands.

Let's Go 💻

We start with creating a Facebook App in the developer portal of Facebook. First, you need to set up the product 'Instagram Basic Display'. You can find this at developers.facebook.com under heading 'Add a product'. Click on 'Set up', go through the steps till you see a page containing the 'Instagram App ID' and 'Instagram App Secret' and leave it be for now.

Ngrok

Instagram only allows secured url's (with SSL nowadays), so you can't use your localhost unless it has SSL set up. I used the urls generated by Ngrok for the oAuth URIs as a quick fix for this. If you are unfamiliar with Ngrok, check out ngrok.com for more information. It basically tunnels your local application to a secured public url. If you don't have it, go open a new tab, go to ngrok.com, follow the installation instructions, install it, set it up and come back. I promise I'll wait 😉 🤞

Welcome back, if you have ngrok set up and working, open terminal, go to your project en type: ngrok http 8000. Ofcourse, assuming laravel is served at port 8000. Otherwise use the port where you are using. This will create a unique secured url, copy the one starting with 'https' and go back to the the browser. We need to provide a redirect url for the API. You can find this under 'Valid oAuth Redirect URIs'. Paste the copied link and add /instagram/auth/callback behind it. Like this: https://somengrokgeneratedlink.ngrok.io/instagram/auth/callback

Installing the composer package

To achieve the desired endresult, we'll use the Laravel Instagram Feed package by Dymantic. This package simplifies the three media types the API provides (image, video and carousel). Install the package with composer, publish the vendor files and run migration.

composer require dymantic/laravel-instagram-feed
php artisan vendor:publish
php artisan migrate

Configuration file

Publishing the vendor assets as described above will give you a config/instagram-feed.php file. Go back to the browser and copy the App ID and App Secret and complete the configuration.

Routes

Now we need to define the routes and controllers for the authentication logic (the oAuth flow). Let's make the controller first: php artisan make:controller InstagramAuthController

And define our routes:

Route::get('instagram-auth-response', [\App\Http\Controllers\InstagramAuthController::class, 'complete']);

Authentication link

You'll want to consider triggering the authentication proces yourself, behind a auth middleware perhaps. So to be able to put the authentication link on your desired page use the following code to generate the link. The link will be generated according to your config file:

$profile = \Dymantic\InstagramFeed\Profile::where('username', 'yourIGUserName')->first();
return view('your-desired-view', ['instagram_auth_url' => $profile->getInstagramAuthUrl()]);

In your view the link could be like this: <a href="{{ $instagram_auth_url }}">Click to get Instagram permission</a>

Handling the response

Now it's time to handle the response after we click on the link. We defined the route for this earlier, so let's head back to our configuration and adjust the success and fail uri's:

'success_redirect_to' => 'instagram-auth-response?result=success',
'failure_redirect_to' => 'instagram-auth-response?result=failure',

If you want to use the result and print it on your view, you can set up your complete function like this:

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class InstagramAuthController extends Controller
{
    public function show() {
        $profile = \Dymantic\InstagramFeed\Profile::where('username', 'yourIGUserName')->first();
    
        return view('your-desired-view', ['instagram_auth_url' => $profile->getInstagramAuthUrl()]);
    }

    public function complete() {
        $success = request('result') === 'success';
    
        return view('your-instagram-auth-response-view', ['success' => $success]);
    }
}

If the result is a success, there sould be a new record in your database containing data of the instagram profile with access tokens. Now we can load the profile and fetch it's images. For example on the homepage. This is how my HomeController looks like:

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function index() {
        
        // the second parameter is the amount of posts you want to collect. In this case we want the latest 4 posts.
        $feed = \Dymantic\InstagramFeed\InstagramFeed::for('yourIGUserName', 4);

        return view('frontpage', compact('feed'));
    }
}

The view is now provided with instagram data, 4 posts to be precise. So now in the blade file you can loop the images.

@foreach($feed as $post)
    <img src="{{ $post['url'] }}">
@endforeach

Available commands

This package provides commands we can use:

• Command to refresh tokens: instagram-feed:refresh-tokens. Token expires in 60 days so it is recommended to use Laravel's scheduling to update your tokens on time.
• Command to refresh the feed: instagram-feed:refresh

Next up: Part 2 🎉

So in the next part we're gonna turn this into a Livewire component, show images randomly at a interval and style the loop of images with Tailwind CSS. See video's below for a sneak peak. So stay tuned!

UPDATE: Part 2 is live, click here for Part 2

Sneak peak 1

Sneak peak 2