Adding custom url for Instagram images using instafeed.js

instafeed

You may be using instafeed.js library to display the Instagram feed in your website. But wonder how can we add your own url for those images while it displaying the images from Instagram. In this post I’ll show you the way of adding custom url for Instagram images using instafeed.js and it has a little hack. 🙂 The hack is applied since the instafeed doesn’t allow to have dynamic link.

Example scenario  :  You are running a online shopping site and you want to map each products of the site to Instagram image, So when someone click the instagram image it’ll direct to the particular product page.

Instafeed provides a great flexibility to have our own template to decorate the image feed using template feature. So what we do here is, assign the custom url to those images feed. There are two kind of url, static and dynamic and we’ll see the way of implementation both in the following section.

 

Providing a static url for all images

Just for the reference, we’ll see how to give static url, but it’s not the thing we are gonna implement.

Here the template holds the url that each image want to directed to.

 

Providing dynamic url for each images.

This part has a small hack and it works as follows;

  1. You should provide the custom url as a comment to the Instagram image(In the Instagram image via App or site)
  2. The code will fetch the first comment and assign the url that specified in comment as hyperlink of the image feed.

Instafeed has a preset of attributes of the Instagram images as variable. Also provides a great flexible way to refer the missing attribute using the model object. The model object is a JSON object, so it’s easy to read whatever the data we want. Refer this instafeed model file to find everything inside the model object.

The first comment of the image:  model.comments.data[0].text

 

Refer the codepen for the complete code.

More instafeed post:

Load Instagram images to multiple Divs using instafeed.js

Displaying Instagram feeds on website with pagination

 

Happy insta(gram)feed  😉

You may also like...

2 Responses

  1. Julie says:

    This hack doesn’t seem to be working anymore. Do you know of another way of doing this? I’d be so appreciative! Thank you 🙂

  2. Ajith Srikukan says:

    Hi,

    the way the api get authorized has been changes by Instagram and you need to provide the authentication information as shows in the code below
    http://codepen.io/ajithsri/pen/BjZVxL

Leave a Reply

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

%d bloggers like this: