5

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?
jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
  • 1
    https://stackoverflow.com/questions/59526137/my-app-was-rejected-by-instagram-basic-display-api-review-due-to-invalid-reasons – Amrut Bidri Dec 30 '19 at 05:35

1 Answers1

0

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)

Mr. Hugo
  • 11,887
  • 3
  • 42
  • 60
  • Thanks so much @JoostS, this worked great! Apologies for the late follow-up. Would you please upvote my question if it made sense :) –  Oct 15 '20 at 11:35
  • 1
    Note that I changed the implementation to a GDPR compliant one... – Mr. Hugo Oct 15 '20 at 11:37
  • I did see that - I've gotten a lot more knowledge since February and accounted for GDPR - This helped so much during the time. –  Oct 15 '20 at 11:38
  • 1
    Great. I already upvoted your question. Unfortunately I have only one for per question. – Mr. Hugo Oct 15 '20 at 11:39
  • Things have changed significantly during the summer. Loading images from Instagram is most likely not GDPR compliant due to the invalidation of the privacy shield. That is why I no use the alternative solution (instafeed.io). – Mr. Hugo Oct 15 '20 at 11:44