Web Development

How to Integrate Instagram API and Feed on PHP Website

Published

2 years ago

, on

2022-05-02

Rody

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 (MAUs) and about 400 million active users per day (DAUs). No surprise that many merchants and companies are already using Instagram as their primary sale or promotion channel.

Taking into 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.

Table of Contents:

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, by 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

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.

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.

The first thing we need to do is to get 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 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 the target blank. Then, list 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 these 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.