Add Instagram Widget for Blogger Themes 2017 with New Client API

Learn how to AMP'd your blog with valid AMP HTML Blogger theme framework. Visit Blogr-AMP Theme and AMPaction Theme. No 3rd party application. Compatible with published posts. Quick in search & on any devices.
Ever since June 2016 Instagram API updates, we found that a lot of Instagram widgets developed & made for Blogger platform (themes) becomes unusable. This is due to the changes at Instagram API which requires more security authentication to retrieve users Instagram posts/feed.

Luckily on BlogrCart Blogger themes, the Instagram widget pre-installed with this theme collection already provided easy solution/integration & currently working as expected.

After a year of testing, we thought that we could share this unique Blogger Instagram widget with users & it can be easily installed on any Blogger themes, including the new responsive theme collection Soho, Emporio, Notable and Contempo.

New Instagram Widget for Blogs on Blogger Templates

Before proceeding, lets take a look on this widget features:-

  • Does not require external web services for subscriptions.
  • Manage directly from your Blogger blog theme/widgets.
  • No 3rd party plugins required.
  • Easily add to blog with 1 click installer.
  • Retrieve Instagram posts/images in various sorting display.
  • Control amount of Instagram post display.
  • Drag & drop placed widget anywhere in theme Layout
  • No Javascript framework required.
  • Extend Instagram image HTML output to your preference.
  • Work on any layout -- fixed or responsive. 


Below is a live example how the Instagram posts is retrieved using this awesome Blogger widget for any blog themes.




Version History

0-9-0 June 2017

  • Initial widget release

There will be a 3 step process when installing this Instagram widget for Blogger which are:-

  1. Install Blogger Instagram widget to your blog, (difficulty: easy)
  2. Create an Instagram client and retrieve personalized information. (step-by-step instruction included)
  3. Setting up & custom set Instagram posts display (difficulty: easy)

Step 1.0: Install Instagram Widget on Blogger Blogs.



Add widget to your Blog!





Reaching  users installed & counting...
Thank you for the support! — Irsah inDesigns




Subscribe Us & Widgets Updates Delivered Instantly!



By clicking the "Add Shopping Cart Order Form widget", you have read & agreed on the Terms of Service & Software Policy


  1. While sign in to Blogger, click "Add Instagram Widget to my Blog!" button above
  2. At Blogger Add Page Element, select your blog to install this widget
  3. Click Add Widget
  4. Preview your new widget which will be located at your Layout > Sidebar section.
  5. Click Edit to setup your plugins/extension settings. You may skip this as you can customize directly from your blog dashboard.

If you need to preview the widget contents you can click Edit Content.

Add Instagram Images and Posts with Controlled Settings

1.1 Adding & Removing Widget


You can remove the widget anytime you like & re-install but do take note on the dependencies as stated/required below.

This widget is 100% safe & secured, no encryption -- read able codes & mark-ups.

1.2 Widget Placement


Use Layout drag & drop feature to place the widget accordingly.

Display Instagram Posts Easily on Website or Blog on Blogger Platform

Step 2.0: Get Your Instagram Client & Credentials.


This is required to retrieve:-

  • userId
  • clientId
  • accessToken

Below is the easy step-by-step guide with screeen capture to retrieve all the above information from your new Instagram App Client.

You can skip this step if you already have a userId, clientId and accessToken. For example Blogrcart blogger theme with shopping cart users can re-use their Instagram API credentials & add directly their custom setup in Step 3.

Create & Register an Instagram Client


Go to https://www.instagram.com/developer/ and click Log-In button

Create Instagram Client for Blogs on Blogger

Use your email/user name & password registered at Instagram to Log-in

Register Free Instagram Client for Blogs on Blogger

Once logged-in head over to Manage/Create Clients

Get Free Instagram Client for Blogs on Blogger to Display Posts/Images

Click Register a new Client

Manage Instagram Client for Blogs on Blogger Widget

Fill in the Instagram client registration form, use screenshot as your guide.

Under the Details tab:-

  • Application Name: Enter your app name
  • Description: Enter a brief description
  • Website: Enter your blogger URL
  • OAuth_redirect_uri: Enter http://instafeedjs.com

Setup Free Instagram Client for Blogs on Blogger Themes

IMPORTANT: At Security tab:-

  • Uncheck the "Disable Implicit OAuth"


Disable oAuth Settings Free Instagram Client for Blogs on Blogger

Now click the Register button.

Once successful, the details for your new registered Instagram client will display. Take note of your Client ID given.

Copy Client ID Free Instagram Client for Blogs on Blogger

Open  a new tab at your browser. Copy below URL & place it at the URL bar.

https://instagram.com/oauth/authorize/?client_id=[CLIENT_ID_HERE]&redirect_uri=http://instafeedjs.com&response_type=token

Replace highlighted yellow with your Client ID provided at your Instagram dashboard (screenshot above). Once completed, press Enter.

Get Access Token for Instagram Client for Blogs on Blogger

If the authentication goes well, you will be redirected to instafeedjs.com website to retrieve your access_token & user_id to use with your Instagram widget.

Copy Access Token Instagram Client for Blogs on Blogger

Copy the user_id and the access_token for your reference. Keep it safe.

Instagram Sandbox Environment


Upon registering a new Instagram client, users are provided with a Sandbox API environment. This API environment only allows you to retrieve your own Instagram images from your account.

Under Instagram Sandbox mode, users are limited to 20 post images to retrieve & some other limitations explained at Instagram Developers page in detail.

With all the information has been retrieved, you can continue to Step 3 below.

Step 3.0: Display Instagram Posts


Find the Instagram widget at your Blog Layout and Edit. The Instagram variables is made available for you to custom set.

<div id="instafeed">
</div>

<script>
  var INSTAGRAM = {
    instaFeed : '//cdn.rawgit.com/stevenschobert/instafeed.js/e8c3a766/instafeed.min.js',
    get: 'user',
    userId : 'ADD-USER-ID',
    clientId: 'ADD-CLIENT-ID',
    accessToken : 'ADD-ACCESS-TOKEN',
    sortBy:'least-recent',
    limit: 10,
    resolution: 'thumbnail'
  };
</script>

General Specifications


<div id="instafeed">
</div>

This is the <div/> element with a unique ID to append the retrieved images from Instagram (required)

var INSTAGRAM = {

 ... {{ settings }}...

};

The object variable to pass to the Instagram plugin with the custom settings.

Important Variables to Replace


userId : 'ADD-USER-ID',

Replace highlighted yellow with your Instagram userId retrieved in Step 2.

clientId: 'ADD-CLIENT-ID',

Replace highlighted orange with your Instagram clientId retrieved in Step 2.

accessToken : 'ADD-ACCESS-TOKEN',

Replace highlighted green with your Instagram accessToken retrieved in Step 2.

Variable Definitions for Setup


instaFeed : '//cdn.rawgit.com/stevenschobert/instafeed.js/e8c3a766/instafeed.min.js',

The javascript plugin library file URL to retrieve from Gihub by using a free reliable Content Delivery Network (CDN) service by RawGit.

sortBy : 'least-recent'

How post images is arranged or sorted when retrieved from Instagram. Available values as follows.

  • most-recent - default
  • least-recent
  • most-liked
  • least-liked
  • most-commented
  • least-commented
  • random

limit : 10

The amount of posts to retrieve from Instagram. Max allowed 20.

resolution: 'thumbnail'

The post image resolution to retrieve from Instagram. Available values are:-
  • thumbnail (150x150) - default
  • low_resolution (306x306)
  • high_resolution (612x612)

References:



What do you think? Do you have any feedback or additional functions that needs to be included with this Instagram Blogger widget? Add your questions & comments below...

New shopping cart widget for Blogger blogs -- transform your blog & sell products using your blog posts instantly! Visit Add Shopping Cart Widget Page to learn more.

Interesting Related to this Topic at Irsah inDesigns Blog

DISQUS With Us!