Jun 05 2016 0

Embedding Instagram Posts

Not so long ago I read a short conversation on twitter about embedding Instagram posts into posts on the Blot.im platform.

https://twitter.com/nashp/status/738017388889841664

https://twitter.com/lllIIlIlIl/status/738074161055076358

So nothing out-of-the-box as of yet. I couldn’t resist in looking into this and see how hard this would be. The short answer is: It would be very easy to add”.

Instagram

Instagram provides an easy to use API to embed Instagram posts elsewhere. This API is documented at https://www.instagram.com/developer/embedding/.

To embed a single post into for instance a blog post the endpoint oembed can be used, this endpoint does not require an access_token or client_id.

The oembed endpoint has the following parameters

Parameter Description
URL A short link, like http://instagr.am/p/fA9uwTtkSN/
CALLBACK A JSON callback to be invoked.
OMITSCRIPT If set to true, the embed code does not include the script tag. This is useful for websites that want to handle the loading of the embeds.js script by themselves. To manually initialize the embed code, call the JS function instgrm.Embeds.process().
HIDECAPTION If set to true, the embed code hides the caption. Defaults to false.
MAXWIDTH Maximum width of returned media. This value is optional and must be greater than 320. Note that the maxheight parameter is not supported and always returns null. This is because the embed code is responsive and its height varies depending on its width and lenght of the caption.

The API endpoint call https://api.instagram.com/oembed/?url=https://www.instagram.com/p/4mg1TKAbE2/&maxwidth=320&omitscript=true result in the following JSON response

{
    provider_url: "https://www.instagram.com",
    media_id: "1019646765835596086_1619620107",
    author_name: "_drexore",
    height: null,
    thumbnail_url: "https://scontent-lhr3-1.cdninstagram.com/t51.2885-15/s320x320/e15/11356398_1579728272288828_1851030556_n.jpg?ig_cache_key=MTAxOTY0Njc2NTgzNTU5NjA4Ng%3D%3D.2",
    thumbnail_width: 320,
    thumbnail_height: 320,
    provider_name: "Instagram",
    title: "Found myself a sea urchin skeleton while snorkeling:)",
    html: "<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="7" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:320px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/4mg1TKAbE2/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">Found myself a sea urchin skeleton while snorkeling:)</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Een foto die door _drexore is geplaatst op <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2015-07-01T17:23:08+00:00">1 Jul 2015 om 10:23 PDT</time></p></div></blockquote> <script async defer src="//platform.instagram.com/en_US/embeds.js"></script>",
    width: 320,
    version: "1.0",
    author_url: "https://www.instagram.com/_drexore",
    author_id: 1619620107,
    type: "rich"
}

Taking the code from the html-attribute and pasting it directly into the document making up your post, would result in the following Instagram post to be embedded into the post

Found myself a sea urchin skeleton while snorkeling:)

Een foto die door _drexore is geplaatst op

Tinker with some additional jQuery code

Since the Instagram API provides the oembed endpoint that provides the complete piece of HTML code to be embed I decided to go a little further and try to get something working similar Blot’s feature to turn links to a tweet into an embedded tweet, just like is shown at the beginning of this post.

The code required would have to perform the following operations;

  1. Read the HTML code
  2. Look for any <p>-element that contains an Instagram URL (i.e. https://www.instagram.com/p/shortcode/) and also make sure the URL is the only thing within the <p>-element
  3. For the URL found make a call to the Instagram API endpoint oembed
  4. From the returned JSON data read the html-attribute and use it to replace the found URL

After some struggling (jQuery really doesn’t like me) I ended up with the following piece of code (I opted to set the maximum width for the Instagram media to 400, maxwidth). This piece of code has been added to my Blot-template in the file script.js.

1

// Embedding of instagram posts
$('p').each(function () {
    searchText = $(this).text();
    matches = searchText.match(/(?:(?:http|https):\/\/)?(?:www.)?(?:instagram.com|instagr.am)\/[p]\/([A-Za-z0-9-_]*)\//g);

    if ( matches != null && searchText === matches[0] ) {
        $.ajax({
            context: this,
            url: "https://api.instagram.com/oembed/?maxwidth=400&url="+matches[0],
            dataType: 'jsonp',
            success: function(data) { $(this).html(data.html); }
        });
    }
});

Maybe based on this experiment David can add this as a default feature of Blot.im

Example

The post below has been automatically converted from the URL into an Instagram embedded post

https://www.instagram.com/p/4mg1TKAbE2/


Previous post
Apps for May 2016 Opera VPN: Free unlimited ad blocking VPN Opera Software ASA Version 1.0 Ad blocking and a free unlimited VPN from a respectable company.
Next post
Revising the sharing buttons Previous year I added sharing buttons to the end of each post so one could easily share a post with others. These buttons were looking like this
This blog is powered by Blot