5

I am looking to simply add a instagram feed onto a cms website - I have got an api code/secret key to use - but the instagram instructions make absolutely no sense. I can see how to embed one post - but not an entire feed (i am not a developer so I donlt understand how to write a get/ombed query - but if I had a code snipper I could change it!)

I just need the code as I presume I can then change this to the relevant instragram account

https://www.instagram.com/developer/embedding/

daisy
  • 51
  • 1
  • 2
  • Haven't personally tried it, but this article looks promising: https://dev.to/ljcdev/embedding-an-instagram-post-in-your-website-3666 – frederj May 16 '21 at 15:27

1 Answers1

4

Here is a link to a good post about how to display an Instagram feed on your website. Parts of the article include javascript, but the author tries to keep it as simple as possible. The main javascript code is:

var request = new XMLHttpRequest();
request.open('GET', 'https://api.instagram.com/v1/users/self/media/recent/?access_token=ENTER-YOUR-ACCESS-TOKEN-HERE&count=8', true);
request.onload = function(container) {
    if (request.status >= 200 && request.status < 400) {
        // Success!
        var data = JSON.parse(request.responseText);
        for (var i=0;i < data.data.length;i++) {
            var container = document.getElementById('insta-feed');
            var imgURL = data.data[i].images.standard_resolution.url;
            console.log(imgURL);
            var div = document.createElement('div');
            div.setAttribute('class','instapic');
            container.appendChild(div);
            var img = document.createElement('img');
            img.setAttribute('src',imgURL)
            div.appendChild(img);
        }
        console.log(data);
    } else { }
};
request.onerror = function() {
    //There was a connection error of some sort
};
request.send();

This code adds the instagram image to the html div with the id "insta-feed". So you need to add the following html to your page:

<div id="insta-feed"></div>

A similar piece of code using jquery would be:

$.get("https://api.instagram.com/v1/users/self/media/recent/?access_token=ENTER-YOUR-ACCESS-TOKEN-HERE&count=8", function (result) {
    var html = "";
    for (var i = 0; i < result.data.length; i++) {
        html += "<div><img src='" + result.data[i].images.standard_resolution.url + "' /></div>";
    }
    $("#insta-feed").html(html);
});
joeshmoe301
  • 1,193
  • 2
  • 11
  • 25
  • 1
    For many MANY MANY years, I've seen ppl on SO add comments "You should copy the code here in case that site ever goes down", always in the context of pastebin.ca or jsfiddle.net, sites that everyone uses and have been around forever. This is the very first time I've seen someone actually paste the code first, and the origin site (a one-off blog that nobody ever read) was actually taken down. Thanks for the code paste. – monsto May 18 '21 at 17:45