Niet leuk zo'n cookie🍪 melding, maar het moet toch gebeuren: Deze website maakt gebruik van cookies en daarom zijn we verplicht om je hierover te informeren en jouw toestemming te vragen. Studio Rebels maakt gebruik van Google Analytics. Wij gebruiken deze dienst om bij te houden en rapportages te krijgen over hoe bezoekers de website gebruiken.

Coding with Murtaza Laravel Instagram Feed.

Let's add a custom Instagram feed to our Laravel application.

Murtaza Yurtsev Full Stack Developer
Murtaza Yurtsev - 01 Feb 2022
1 min leestijd

#Laravel #Instagram #API #tutorial #training

Assumptions

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']);

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:

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

Klaar om je ideeën om te zetten in software?

Klaar voor uw volgende project? Of heeft u een idee die u wilt verkennen? Neem gerust contact op om de mogelijkheden vrijblijvend te bespreken. Studio Rebels is expert in het ontwikkelen van (zakelijke) apps met additionele webapplicaties, webportalen, dashboards, webshops en websites.

Van idee tot App