How To Display Instagram FEED On Your Website

How To Display Instagram Feed On Website Using PHP? Step By Step Guide!

Today post will include the following contents:

۱٫۰ Source Code Overview

۲٫۰ Final Code Output

۳٫۰ Get your Instagram Access Token

۴٫۰ Create index.php File And Make It Bootstrap Ready

۵٫۰ Add A Page Header

۶٫۰ Initialize Variables Needed To Retrieve Instagram Feed

۷٫۰ Get JSON Data And Decode It

۸٫۰ Loop Through the JSON Data

۹٫۰ Add Custom CSS

۱۰٫۰ How To Display Non-Square Media?

۱۱٫۰ Download the Complete Source Code

۱۲٫۰ Social Media Scripts – LEVEL 3 – PRO PACK

۱۳٫۰ Use the Instagram Feed Website Plugin

۱۴٫۰ What’s Next?

۱۵٫۰ Related Source Codes

۱۶٫۰ Some Notes

۲٫۰ FINAL CODE OUTPUT

۲٫۱ LEVEL 1 Source Code Output

We have to know where we are going, once we completed the code tutorial below, we will achieve this output:
demo-screenshot-display-instagram-feed-level-1

The LEVEL 2 and LEVEL 3 source codes has more features you might need. You can view the list of features and download them in section 11.2 and 11.3 below. For now, here’s the step by step tutorial of our LEVEL 1 source code. Enjoy!

۳٫۰ GET YOUR INSTAGRAM ACCESS TOKEN

To get your Instagram API Access Token, use this Instagram access token generator.

۴٫۰ CREATE INDEX.PHP FILE AND MAKE IT BOOTSTRAP READY

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Display Instagram Posts On Website - LEVEL 1 - Live Demo</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<!-- Instagram feed will be here -->
</div>
</div>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<![endif]-->
</body>
</html>

۵٫۰ ADD A PAGE HEADER

This will be under the class=”col-lg-12″ div tag.

<div class="col-lg-12">
    <div class="page-header">
        <h1>Display Instagram Feed On Website - LEVEL 1 - Live Demo</h1>
    </div>
</div>

۶٫۰ INITIALIZE VARIABLES NEEDED TO RETRIEVE INSTAGRAM FEED

This will be under page header.

<?php
// use this instagram access token generator http://instagram.pixelunion.net/
$access_token="CHANGE_TO_YOUR_ACCESS_TOKEN";
$photo_count=9;
    
$json_link.="access_token={$access_token}&count={$photo_count}";
?>

Let me explain the variables above:

  • $access_token will contain value retrieved from section 3.0
  • $photo_count is where you can specify how many posts you want to retrieve.
  • $json_link is where we’ll get the JSON data (photos and videos) of the Instagram user.

۷٫۰ GET JSON DATA AND DECODE IT

Get the JSON data from the $json_link using json_decode() to decode it so we can loop through the contents later.

$json = file_get_contents($json_link);
$obj = json_decode($json, true, 512, JSON_BIGINT_AS_STRING);

Use the following code instead if you’re using PHP version older than 5.4

$json = file_get_contents($json_link);
$obj = json_decode(preg_replace('/("\w+"):(\d+)/', '\\1:"\\2"', $json), true);

I highly recommend you upgrade to PHP version 5.4+, you can ask you web hosting provider to do it for you.

۸٫۰ LOOP THROUGH THE JSON DATA

Now we’ll loop through the JSON data retrieved from the $json_link, and also display the images using HTML.

foreach ($obj['data'] as $post) {
    
    $pic_text=$post['caption']['text'];
    $pic_link=$post['link'];
    $pic_like_count=$post['likes']['count'];
    $pic_comment_count=$post['comments']['count'];
    $pic_src=str_replace("http://", "https://", $post['images']['standard_resolution']['url']);
    $pic_created_time=date("F j, Y", $post['caption']['created_time']);
    $pic_created_time=date("F j, Y", strtotime($pic_created_time . " +1 days"));
    
    echo "<div class='col-md-4 col-sm-6 col-xs-12 item_box'>";       
        echo "<a href='{$pic_link}' target='_blank'>";
            echo "<img class='img-responsive photo-thumb' src='{$pic_src}' alt='{$pic_text}'>";
        echo "</a>";
        echo "<p>";
            echo "<p>";
                echo "<div style='color:#888;'>";
                    echo "<a href='{$pic_link}' target='_blank'>{$pic_created_time}</a>";
                echo "</div>";
            echo "</p>";
            echo "<p>{$pic_text}</p>";
        echo "</p>";
    echo "</div>";
}

۹٫۰ ADD CUSTOM CSS

Add the following code below the bootstrap CSS in the head section.

.item_box{
    height:500px;
}
.photo-thumb{
    width:100%;
    height:auto;
    float:left;
    border: thin solid #d1d1d1;
    margin:0 1em .5em 0;
    float:left;
}
</style>

۱۰٫۰ HOW TO DISPLAY NON-SQUARE MEDIA?

As of September 2015, Instagram API allows us to retrieve media (images and videos) in their original (non-square) aspect ratio.

The instructions above works for people who does not want to create an API client and prefer the square images. But for people who need the original aspect ratio of their media, you will need an API client access token. Here’s how to do it:

By the way, special thanks to @Ed in the comments section below for helping me figure it out.

۱۰٫۱ Create an API Client

  1. Login to Instagram and go to https://instagram.com/developer/
  2. Click “Manage Clients”, then click “Register New Client”. Both located on the upper right corner for the page.
  3. Fill out the form. In the “Details” tab, make sure you fill out the “Application name” and “Valid redirect URIs”.
  4. In the “Security” tab, un-check “Disable implicit OAuth”
  5. Fill out all other required fields and click “Register”
  6. Once registered, it will give you a “Client ID”

۱۰٫۲ How To Get Your API Client Access Token:

  1. Go to the following URL: https://www.instagram.com/oauth/authorize/?client_id=CLIENT_ID&redirect_uri=REDIRECT_URI&response_type=token
  2. Replace CLIENT_ID and REDIRECT_URL with your own and go to that URL.
  3. This will redirect you to your REDIRECT_URI.
  4. You will see your access token in your browser’s address bar. It looks like http://yourdomain.com/instagram_uri.php#access_token=xxx.yyy.zzz

۱۰٫۳ How To Get Other User’s Access Token?

Other Instagram users, can use the same API client to get their access token.

  1. They need to receive a sandbox invite and accept it.
  2. They need to go to the same URL: https://www.instagram.com/oauth/authorize/?client_id=CLIENT_ID&redirect_uri=REDIRECT_URI&response_type=token
  3. They can see their access token in the browser’s address bar. It looks like http://yourdomain.com/instagram_uri.php#access_token=xxx.yyy.zzz

I probably need to build a simple tool for this. 😀

۱۰٫۴ Check “Non Square Media”

You might still have to do the following:

  1. Locate your API Client and click “Edit”.
  2. Click the “Migrations” tab and check the box that says “Non square media”.
  3. Click “Update Client”.

instagram-get-non-square-media

Related from Instagram Blog: Thinking Outside the Square and API Migration.

۱۱٫۰ DOWNLOAD THE COMPLETE SOURCE CODE

You can get the source code by following the whole, well detailed tutorial above. But isn’t it more convenient if you can just download the complete source code we used, and play around it?

There’s a small fee in getting the complete source code, it is small compared to the value or skill upgrade it can bring you, or income you can get from your website project or business.

For a limited time only, I will give you the source code for a low price. DOWNLOAD THE SOURCE CODE by clicking the green buy button below

 

Social Media API Tutorials

5 سال پیش

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.