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
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
۵٫۰ ADD A PAGE HEADER
This will be under the class=”col-lg-12″ div tag.
۶٫۰ INITIALIZE VARIABLES NEEDED TO RETRIEVE INSTAGRAM FEED
This will be under page header.
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.
Use the following code instead if you’re using PHP version older than 5.4
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.
۹٫۰ ADD CUSTOM CSS
Add the following code below the bootstrap CSS in the head section.
۱۰٫۰ 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
- Login to Instagram and go to https://instagram.com/developer/
- Click “Manage Clients”, then click “Register New Client”. Both located on the upper right corner for the page.
- Fill out the form. In the “Details” tab, make sure you fill out the “Application name” and “Valid redirect URIs”.
- In the “Security” tab, un-check “Disable implicit OAuth”
- Fill out all other required fields and click “Register”
- Once registered, it will give you a “Client ID”
۱۰٫۲ How To Get Your API Client Access Token:
- Go to the following URL: https://www.instagram.com/oauth/authorize/?client_id=CLIENT_ID&redirect_uri=REDIRECT_URI&response_type=token
- Replace CLIENT_ID and REDIRECT_URL with your own and go to that URL.
- This will redirect you to your REDIRECT_URI.
- 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.
- They need to receive a sandbox invite and accept it.
- 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
- 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:
- Locate your API Client and click “Edit”.
- Click the “Migrations” tab and check the box that says “Non square media”.
- Click “Update Client”.
۱۱٫۰ 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