Blog / Tech / API

How to Integrate Instagram API and Feed on PHP Website

  • Rating — 4.8 (332 votes)
  • by Tony
  • Updated on April 29, 2020
  • Read —
    4-5 minutes
Integration of Instagram API

Few can argue that Instagram is one of the most powerful and engaging social media platforms across the internet right now. It has more than 700 million monthly active users and about 400 million active users per day. No surprise that many merchants and companies are already using Instagram as their primary sale or promotion channel.

Taking into the account that 65% of customers are engaged in online shopping and social media, integrating Instagram may actually provide you a huge boost in sales and conversions. We’d like to share two most popular Instagram website integrations: social login and feed streaming and teach you how to integrate API into a website.

Login with Instagram Using PHP

It must be acknowledged that the shorter registration form – the higher conversion rates. Users are not willing to spend hours filling in long forms. The feature we’re going to integrate will allow your users to quickly login by using only their Instagram account password.

Moreover, making this function available you still will be able to collect all valuable user data required for targeting, email newsletters, and analytical purposes.

Information that can be obtained through Instagram API:

  • User info
  • User feeds
  • User media
  • User likes
  • User follows
  • User follower
  • User Relationship
  • Search media
  • Get media
  • Popular media
  • Media likes
  • Media comments
  • Like media
  • Delete like media
  • Get location
  • Get location media
  • Search location

Step #1 Registering your Application

Instagram dev mode

  • Login on www.instagram.com;
  • Go to the developer account https://www.instagram.com/developer/;
  • Click on “Register Your Application” button;
  • Register new client ID;
  • In “Website URL” field use your website address or localhost if you’re using it;
  • In “Redirect URL” field type location where the response will be handled (e.g. http://yourwebsite/yourprojectfolder/callback.php );
  • Go to Manage Clients tab. From here you can acquire your Client ID and Client Secret.

Step #2 User Flow

The principle of Instagram Authentication is quite simple. User clicks on “Login with Instagram” button. The request is redirected through Authorization URL to Instagram. It`s like magic.

Here’s the structure of Authorization URL:

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=code

In response, Instagram will provide you with the code in the following format:

https://your-redirect-uri?code=CODE

Get this code from URL

Step #3 Access Token

Next, you’ll need an access token. In order to acquire it you’ll need to make an array with the following data:

  • Client ID.
  • Client Secret.
  • Redirect URL.
  • Grant Type.
  • Code from Step #2.
$url = "https://api.instagram.com/oauth/access_token";
$header = 0; // header = 0, because we do not have header
$data = array(
"client_id" => $client_id,
"client_secret" => $client_secret,
"redirect_uri" => $redirect_uri,
"grant_type" => "authorization_code",
"code" => $code
);

You can call it and pass this URL using CURL

Step #4 Getting User Information

Finally, after getting access_token you can call this URL https://api.instagram.com/v1/users/self/?access_token=$access_token) and get User Data.

Data you will acquire:

  • Full Name.
  • Website.
  • Bio.
  • Followers Count.
  • Following Count.
  • Profile Picture.

That’s it, and good luck.

Just kidding! Here is a folder with all files required for integration of Instagram Login on your website using PHP.


Enter your name and email to download the file.

How to integrate Instagram feed to your website without API

Most tutorials on how to implement Instagram feed suggest to use Instagram API. And while there is nothing wrong with this method, there is an easier way without actually using this API.

GBKSOFT
Read Guide:
Basics of API development

The first thing we need to do is to get a feed data from Instagram.

Here’s a code sample for this task:

<?php
$username = 'YourUserName';
$json = file_get_contents('https://www.instagram.com/'.$username.'/media/');
$instagram_feed_data = json_decode($json, true);
?>

For the “name” field use your username as it shown in Instagram’s address line.

The string $instagram_feed_data = json_decode($json, true); indicate the data will be contained and decoded. The data will be decoded into the array.

Basically, in your array, the data about each post will be structured into [“items”]. Each item contains the information about every single post including user info, images, the caption, likes, comments, etc.

This is the information we’ll gonna use. But first, you should check if there are any items in the array. Here’s how to make this:

if (isset($instagram_feed_data['items'])) 
foreach ($instagram_feed_data['items'] as $item) }

Next, you’ll need to get an actual post link and image URL. Keep in mind that the array contains image URLs in multiple formats: thumbnail, low_resolution, and standard_resolution. You may choose one of those formats depending on your needs.

In our case, we’ll be ok with low resolution.

$link = $item['link'];
$img_url = $item['images']['low_resolution']['url'];

In addition, you can take a caption. In case of Instagram posts there isn’t always a caption, so you’ll need to check whether it exists first.

$caption = isset($item['caption']) ? $item['caption']['text'] : '';

Streaming

Now, when feed data is acquired we can stream to your webpage. Let’s start with the images by using image URLs. Since this URL is leading to an external web resource (Instagram), we’ll make target blank. Then, list an output of actual image and caption.

<a href="<?= $link; ?>" target="_blank" class="instagram-post">

<img src="<?= $img_url; ?>">
<div class="caption"><?= $caption; ?></div>

That’s it. All you need is to compose all this code strings into one script. Here’s it by the way.

if (isset($instagram_feed_data['items'])) {
    foreach ($instagram_feed_data['items'] as $item) {
        $link = $item['link'];
        $img_url = $item['images']['low_resolution']['url'];
        $caption = isset($item['caption']) ? $item['caption']['text'] : '';
        
        ?>
        <a href="<?= $link; ?>" target="_blank" class="instagram-post">
            <img src="<?= $img_url; ?>">
            <div class="caption"><?= $caption; ?></div>
        </a>
        <?php
    }
}
?>

Use this simple script that will get images, caption and links from the Instagram feed with no API. With little CSS magic, you can turn this data into such a good-looking web page.

integrate instagram feed to php website

Hope you found what you looked for. On any questions feel free to:

REFERENCES

  • https://www.instagram.com/developer/
  • https://developers.facebook.com/docs/instagram-api
GBKSOFT
Social Login PHP Code

Get Awesome PHP Libraries For Social Sing-in
Tony Tony Sol is the business development manager of GBKSOFT, overseeing the production of all writings for both internal blog and external platforms. He is technical-driven person always looking for new benefits of merging business and software.

Comments (11)

Leave a comment
Close

Leave a Reply


Christophe
Jun 30, 2020 at 12:57 PM

I would like to test your Instagram integration script, but unfortunately I didn’t get the email… I tried the script without api, but that doesn’t seems to work anymore. Instagram probably did some changes… again… I used the following script for years, but it also stopped working.

<?php

function scrape_insta($username)
{
$insta_source = file_get_contents('https://instagram.com/&#039;.$username);
mail("christophe@it4professionals.be", Instagram, $insta_source);
$shards = explode('window._sharedData = ', $insta_source);
$insta_json = explode(';’, $shards[1]);
$insta_array = json_decode($insta_json[0], TRUE);
return $insta_array;
}

$results_array = scrape_insta($username);

$url_list = $results_array[‘entry_data’][‘ProfilePage’][0][‘graphql’][‘user’][‘edge_owner_to_timeline_media’][‘edges’];
for ($i=0; $i <= 11; $i++)
{
$img_url = $results_array['entry_data']['ProfilePage'][0]['graphql']['user']['edge_owner_to_timeline_media']['edges'][$i]['node']['display_url'];

$output .= "

“;
}

echo $output;

?>

reply
Mike Brown
Mar 16, 2020 at 11:43 PM

What if I only want to insert the profile picture without API?

reply
Martin
Mar 25, 2019 at 9:35 PM

Is this tutorial in keeping with new Graph API?
Thanks you

reply
MAx
Mar 18, 2019 at 11:09 AM

Hi, thanks for this fantastic article!
I only have one question. You mentioned, that “making this function available you still will be able to collect all valuable user data required for targeting, email newsletters, and analytical purposes.” I don’t get this. If a user logs in via Instagram I can not ask him for mail-address and I don’t get the address from the instagram API. Right?

reply
Alex Pedchenko
Apr 11, 2019 at 11:15 AM
MAx,

Yes. But you can build own audience.

reply

WILMAR LIMA da SILVA
Feb 11, 2019 at 6:18 PM

Can I send messega auto to all my follower ?

reply
Alex Pedchenko
Feb 26, 2019 at 5:10 PM
WILMAR LIMA da SILVA,

Yes

reply

Victoria
Sep 17, 2018 at 2:55 PM

I really like your blogs. According to me, when a business plans to have a digital presence, it is very necessary to go for Website Development which can showcase their business digitally.

reply
Halder
Jul 23, 2018 at 12:13 AM

I Tried but I keep getting errors:
{“error_type”: “OAuthForbiddenException”, “code”: 403, “error_message”: “You are not a sandbox user of this client”}
Looks like this app needs manual approval from instagram as they have disabled permissions

reply
Siva
Mar 19, 2018 at 10:56 AM

now im building my web application
and i wanna use instrgram API
I followed this and i did as they say
last thing i arrived
i got the authantication aceess
and wrote the java script as they gave in the link
but when i load the page
nothing apperas

reply
Amir
Nov 12, 2017 at 9:39 AM

Great article.
Thanks

reply

Related services

Categories

All articles Business Company News Marketing Tips StartUp App Ideas Tech UI and Design

People are talking about

You've got
a project in mind

What's next?

Send us a message with a brief description of your project.
Our expert team will review it and get back to you within one business day with free consultation and next steps.

Testimonials

Nothing can be better than getting a review from our happy clients
who recommend us and trust us their business.

Dave
GBKSOFT’s performance has been very strong. We've referred them twice, which says all anyone needs to know about them. A referral is the ultimate signal we can give that these guys are great. Strong
Devan
They write clean code, adhere to deadlines, and communicate extremely well. I strongly recommend anyone from the GBKSOFT agency and hope to work with them again myself. Clean Code
Raphael
My Project with GBKSOFT gave me the ability to develop my software while keeping a busy schedule. Ana, who was my project manager, was very professional and was always understanding of my vision and what I wanted. I would recommend GBKSOFT again to any other company or person who has a vision for their web application. Thank you GBKSOFT! Recommend
Tao
GBKSOFT did a good job to manage the project. They put in a good effort to communicate with us and make it easier for us to communicate with developers. Good Job
Aaron
I’ve been using GBK Soft for the past 3 years and they have been great. Communication is unparalleled to other app development companies. I’ve continued to return to them to improve my iOS app countless times and I will continue to do so in the future. I highly recommend this company! Improve
Jonathan
More good work from team GBKSOFT. All well executed. The support within GBKSOFT is excellent. Communication is good too, spoken English as well as written. Support
Andy
I think they do great work. I haven’t yet given them something that they were unable to do. Great
Gireesh, USA
One word...EXCELLENT.
Very well thought out and articulate communication. Clear milestones, deadlines and fast work.Patience. Infinite patience. No shortcuts. Even if the client is being careless (me). The best part...always solving problems with great original ideas, especially with this strange project where we are making up new words every day!
Excellent
Garrett
They proved to be very good and they’re very reliable as well. They are quite conscientious. They will go the extra yard to make sure we're happy. Reliable
19
spinner