Search code examples
instagraminstagram-api

Instagram Basic Display API

The ultimate goal: display our corporate account's Instagram media onto our corporate website. Below, I will show everything that I have so far.

  1. I have the Instagram basic permissions approved:

    enter image description here

  2. I have the Facebook app authenticated with the Instagram account with the appropriate permissions.

    enter image description here

Questions:

  1. If I'm using the Instagram Basic Display API, do I still need a website platform with the SDK implemented?
  2. Do I need Facebook Login if I'm just using one account to display media on our corporate website?
Solution

  • The answers: YES and YES...

    However, your ultimate goal is 8 lines of Javascript and 4 lines of CSS away if you allow some out of the box thinking. It is not the most beautiful solution and it has limited features, but it is really simple. Just look at the example and installation instructions.

    The solution I came up with is actually quite simple: fully split the server-side and client-side part and use XML(RSS) as an intermediate. For the server-side part I used Zapier (for free). Zapier authenticates with Instagram and gets the required long lived access token. Using this token it listens to the users feed on a five minute interval. When it discovers a new post/image, it adds this to a Zapier RSS feed that has nothing to do with Instagram. Zapier takes care of the CORS policy on the RSS feed. Therefore, we only have to visualize the RSS feed. This requires just a few lines of Javascript and a touch of CSS.

    <p id="instafeed"></p>

<script src="/js/jquery.min.js"></script>
<script type="text/javascript">
$.get('https://zapier.com/engine/rss/2502510/jhvanderschee', function (data) {
    $(data).find("item").each(function () { // or "item" or whatever suits your feed
        var el = $(this);
        var title = el.find("title").text();
        var link = el.find("link").text();
        var image = el.find("enclosure").attr('url');
        var description = el.find("description").text();
        $('#instafeed').append('<a href="'+encodeURI(link)+'" target="_blank" title="'+title.replace('Caption: ','')+'"><img src="'+encodeURI(image)+'" alt="'+title.replace('Caption: ','')+'" /></a>');
    });
});
</script>

<style>
    #instafeed {overflow: auto; margin-left: -1%;}
    #instafeed a {float: left; display: block; margin: 0 0 1% 1%; width: 19%;}
    #instafeed a img {width: 100%;}
</style>

    Source: Instafeed.js alternative (for Instagram)