In this tutorial, we are going to see how to show Instagram feed on website using laravel. We are going to create real time image gallery using Instagram post api. This will help you fetch your most recent pictures and account information of the Instagram directly on the website.
If you own a profile or a travel agency website, it will help you get your Instagram feeds inside the website so, that you dont have to upload photos in two different place and also get the real time data via Instagram API.
First thing first, we need the Instagram API credentials so, head over to this article where i wrote how to generate Instagram API acess token and take a note of it. We will be needing it to fetch the real time data from your account. Next, we are going to use Instagram Package by Vinkala (Vincent Kaliber) which will help us to get the data from the Instagram using our API and access token.
We are also going to install some third party packages called php/http-message and php/guzzle6-adapter, which is required for Instagram package to make http calls to the Instagram API. We will look step by step process in order to achieve the result.
Let’s get started,
What are we going to do ?
- Fetching the necessary packages from GitHub repository.
- Adding access token inside laravel config file.
- Create new controller and configure routes.
- Finally fetch the data in your blade template.
Step 1 : Fetching the Necessary Packages from GitHub Repository
In this step we are going to pull some packages into our laravel application, go to terminal and then import these packages.
- Instagram package –
$ composer require vinkla/instagram - php/http-message –
$ composer require php-http/message - php/guzzle6 adapter –
$ composer require php-http/guzzle6-adapter
Or you can install all at once $ composer require vinkla/instagram php-http/message php-http/guzzle6-adapter
Once installed make sure that you php artisan dump-autoload, then after php artisan config:clear and cache:clear to remove all your caches are reload the config, because of the users are facing “ClassNotFoundException” issue while using this package.
Step 2 : Adding Access Token Inside Config File
The access token that you have generated from the third paragraph in this post, now, it is time to use it. We can use it inside the controller but lets make things cleaner and add this access token inside application root/app/config/services.php so that we could reuse it anywhere inside the application.
|
1 2 3 |
'instagram_api' => [ 'token' => 'xxxxxxxxx.xxxxxx.xxxxxxxxxxxxxxx', // paste your access token inside quotes ], |
We just have to type config(services.instagram_api.token) to access the token that we had just kept inside the services.php
Step 3 : Creating Controller and Configuring Routes.
In this step we are going to create new controller and configure routes to hit the api call.
Since, i am going to use Instagram API call, i’ll name it ApiController.php and use this controller for all the third party API calls.
Go ahead and make controller called ApiController.php and add this block of code inside it.
|
1 2 3 4 5 6 7 8 9 10 |
public function getInstagramFeed() { $instagram = new Instagram(config('services.instagram_api.token')); // new Instagram('xxxxx.xxx.xxxxxxxxxxxxxxx') access token can be directly used here. $ig_images = []; foreach($instagram->get() as $insta_details) { $ig_images[] = $insta_details->images->standard_resolution->url; } return view('index', ['ig_images'=>$ig_images]); } |
To make this implementation even more simple, we can make use of laravel collections,
|
1 2 3 |
$ig_images = collect($instagram->get())->map(function ($item) { return $item->images->standard_resolution->url; }); |
Optional :
To be more clear what inside the Instagram class object we can run dump server which is just added new to laravel 5.7, which will help us debug more clearly. Refer to our the new coming of laravel 5.7 to know more about it.
Open new terminal window and type
php artisan dump.Go back to code and inside
getInstagram();method comment all the codes below$instagram = new Instagram(config('services.instagram_api.token'));anddump($instagram->get());and reload the application to see what we have fetched using the Instagram API. You will see all the details inside the dump server windows like below.
Now, configure the routes by going to routes/web.php.
|
1 |
Route::get("instagram-feed","ApiController@getInstagramFeed"); |
Step 4 : Fetching the Images Into the Blade Template
In this step we are going to display the images that have been pulled inside the ApiController.php into the blade template. Since my ApiController is pointing to my index page. I will just use normal foreach loop to loop over the image. Also, I have used bootstrap to make the dummy design quickly. Finally your code should look like this.
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <h1 class="h1">Instagram Gallery</h1> <div class="row"> @foreach($ig_images as $image) <div class="col-md-4" style="margin-bottom: 10px;"> <img src="{{$image}}" alt="" style="width:100%; height:300px;" /> </div> @endforeach </div> </div> |
After everything is complete, you should see your Instagram images in the index page. If you want, you can install jQuery Light box to make image zoom in a click and display as thumbnail and treat like an slide show.
This is it for this part of tutorial. If you went through any problem, make sure to mention them in comments.
Leave a Reply