CODEWITHSUNDEEP
instagraminstagram-apifeed
daisy
daisy

Reputation: 51

Embed an instagram feed

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/

Upvotes: 5

Views: 8191

Answers (1)

joeshmoe301
joeshmoe301

Reputation: 1418

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);
});

Upvotes: 4

Related Questions