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 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
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;
- Read the HTML code
- 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 - For the URL found make a call to the Instagram API endpoint
oembed - 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.
// 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/