oEmbed loading only caption of Instagram post

Question

I'm trying to use the Instagram API to load the latest post by a particular user to a page. According to the API docs, using only the shortlink for the desired picture, the oEmbed response should contain everything that you'd get if you clicked the "embed" link on the picture itself.

Here's my code:

window.onload = function () {
    var insta = new XMLHttpRequest();
    var embed = document.getElementById('embed');
    insta.open("GET",   "https://api.instagram.com/v1/users/user/media/recent/?access_token=my-token");
    insta.send();
    insta.addEventListener("load", function(){
        var jsonResponse = JSON.parse(insta.responseText);
        var lastImageLink = jsonResponse.data[0].link;
        var shortCode = lastImageLink.split("/p/")[1];
        var url = "https://api.instagram.com/oembed?url=http://instagr.am/p/" + shortCode;
        var getLatest = new XMLHttpRequest;
        getLatest.open("GET", url);
        getLatest.send()
        getLatest.addEventListener("load", function(){
            getLatest = JSON.parse(getLatest.responseText);
            embed.innerHTML = getLatest.html;
        });
    });
};

So I do a GET request to get the link of the last post, take the shortlink suffix from that, then use that shortlink to perform another GET request to get get the embed code via the oEmbed method. However, when I load the page, what I see is just this:

What I've tried:

*I know the API depends on the embeds.js library, so I moved that to the head of the html doc and made it load synchronously. No change in result.

*Loading different pictures apart from the latest post. No change there either.

And that's about all I can think of. Is there any reason I'm not able to get the full embedded post with what I'm doing?

Thanks!

score 3 · Answer 1 · answered Aug 03 '17 at 14:23

For those still running into this problem. This happens because setting the innerHTML of the container does not cause the included tags to load their sources, so the Instagram embed.js is never loaded, and the embed does not process properly.

You need the following:

Include the instagram embed.js from https://platform.instagram.com/en_US/embeds.js
Call instgrm.Embeds.process() after setting the container's innerHTML to the oembed data's html field.
Optional, but recommended: add the omitscript=true parameter to the oembed request. As the name implies, this omits the tag from the returning html.

An access token is not needed, and you could get away with a single XMLHttpRequest, like so:

<script src="https://platform.instagram.com/en_US/embeds.js"></script>
<script>

    var url = "https://api.instagram.com/oembed?omitscript=true&url=http://instagr.am/p/" + shortCode;
    var embed = document.getElementById('embed');
    var req = new XMLHttpRequest;
    req.open("GET", url);
    req.send()
    req.addEventListener("load", function(){
        parsed = JSON.parse(req.responseText);
        embed.innerHTML = parsed.html;
        instgrm.Embeds.process(); // DON'T FORGET THIS
    });

</script>

I've made the code simple to focus on the issue, but make sure embed.js is properly loaded before calling instgrm.Embeds.process(), of course.

Thanks ! really helpful ;) – Lorenzo Canavaggio Jun 11 '19 at 22:53 — Lorenzo Canavaggio, Jun 11 '19 at 22:53

score 1 · Answer 2 · answered Jan 25 '16 at 09:44

Use the iframe embed to load the image like this:

<iframe src="https://www.instagram.com/p/8_kRtJBsBq/embed" width="400" height="480" frameborder="0" scrolling="no" allowtransparency="true"></iframe>

Instead of using API to get embed code, just get the shortcode and replace in the above iframe code snippet.

You can generate Instagram iframe embed code here and preview: http://www.gramfeed.com/instagram/embed#https://www.instagram.com/p/8_kRtJBsBq/

score 0 · Answer 3 · answered Jan 25 '16 at 00:20

you need to include conditionals inside your insta callback function:

insta.onload = function() {
    if (insta.readyState === 4) {
        if (insta.status === 200) {
            //do some stuff
        }
    }
}

readystate lets you know what state your request is in. as you can see here, there are 5 possible values, the last of which is 4, or DONE. you don't want your callback to run until it's reached the final state. the second conditional is checking for the type of server response. if it's 200 (success), you want it to execute your success code. you also need to check for 404 and do some damage control if the server responds with a page not found error.

also, in line 11, make sure you are properly declaring your variable: your constructor needs parentheses: var getLatest = new XMLHttpRequest();

oEmbed loading only caption of Instagram post

3 Answers3