Displaying Instagram feeds on website with pagination

Hi Folks,

This post about integrating Instagram feeds on website with pagination support.

Now a days people are spending most of their time with social networks, so what is the easiest way to attract the views to your website. It’s easy, integrate the social network with your website so views can be more attached to you site. In one of my previous post, I have explained about Integrate social [twitter,blogger,wordpress,flicker,youtube] feeds with your Website.

In this post, we’ll see how to integrate Instagram feed with pagination to your site. Before write this post I went through some posts but couldn’t find a one that describe, how to integrate with pagination.

To load the Instagram feed I have used Instafeed.js JavaScript library which  has flexible to modify the way we want to display the feeds. I personally like this once because it’s dead-simple and No jQuery required, just plain ‘ol JavaScript.

also you can find the sample code here

Here is the sample screenshot of Instagram feed of SriLanka

insta3

insta1

first write the html block to add previous next button and feed container.

 

Now load the Instagram feeds and the way buttons work using JavaScript

the following code block has the following functions;

  1. Fetching the Instagram feeds using instafeed.js and store it on array of img. This images will be cached to this array.
  2. Fetching new feed on click of next button.
  3. On click of previous button or next button, load the feeds from cache.

for more information you can refer the instafeed.js api

instafeed javascript file : instafeed.min

Happy Insta Feeding to you site 🙂

You may also like...

2 Responses

  1. jatinder says:

    hii…i m using ur code for pagination as want to show these images like gallery in website.
    but when i running code..it displays only two buttons..nothing else..can u help??

  1. March 5, 2016

    […] Displaying Instagram feeds on website with pagination […]

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: