1

I'm trying to embed Instagram posts into posts on my Jekyll site. I'm using the oEmbed method. The URL that Instagram documentation has, gives a JSON which contains a key-value pair for HTML which is what I want to extract.

Here's what I'm trying to do:

  1. Enter the shortcode for the image in a post frontmatter (instagram: fA9uwTtkSN)
  2. Call an include that takes in the shortcode and makes an oEmbed call, to get to the JSON (https://api.instagram.com/oembed?url=http://instagr.am/p/{{ page.instagram }}/)
  3. Extract the value for the HTML key, and place it in the post.

I'm trying to write an include that does it, without the use of a Ruby plugin.

Pointers, please?

2 Answers 2

3
  1. Add the parameter to the post frontmatter instagram: BbR55zEnaQL
  2. Call the include inside the post content:

    {% include insta.html id=page.instagram %} 
    
  3. Create the include file at _includes/insta.html with:

      <script>
       function httpGet(theUrl)
       {
           if (window.XMLHttpRequest)
               {// code for IE7+, Firefox, Chrome, Opera, Safari
                   xmlhttp=new XMLHttpRequest();
               }
           else
               {// code for IE6, IE5
                   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
               }
           xmlhttp.onreadystatechange=function()
           {
               if (xmlhttp.readyState==4 && xmlhttp.status==200)
                   {
                       createDiv(xmlhttp.responseText);
                   }
           }
           xmlhttp.open("GET", theUrl, false);
           xmlhttp.send();    
       }
    
       function createDiv(responsetext)
       {
           var _body = document.getElementsByTagName('body')[0];
           var _div = document.createElement('div');
           _div.innerHTML = JSON.parse(responsetext)["html"];
           _body.appendChild(_div);
       }
    
       httpGet("https://api.instagram.com/oembed?url=http://instagr.am/p/{{ include.id }}/");
      </script>
    

That will include the HTML blockquote returned by instagram at the bottom of the body.

Notes

Javascript code is a modified version of Return HTML content as a string, given URL. Javascript Function

6
  • Hey @marcanuy, I think I did not make much sense. What I get after implementing the suggested solution is this. (The Instagram window appears at the bottom of the article, and does not contain the image for some reason.) What I'm looking for is something like this. Meanwhile, I also found sharedmemorydump.net/embedding-instagram-posts. I'll try tinkering with that as well.
    – Ram Iyer
    Commented Dec 1, 2017 at 23:44
  • Just change the placeholder for where the response will be injected. I've tested the code and works for me, it display the whole image.
    – marcanuy
    Commented Dec 2, 2017 at 1:57
  • That fixed it! I made some minor edit to the code, to load it after the paragraph preceding it. And added a class for formatting. The edit has been submitted. Thank you!
    – Ram Iyer
    Commented Dec 2, 2017 at 11:52
  • @RamIyer - I tried to use this code and I am not seeing the instagram post. Can you post your final working code?
    – jessi
    Commented Apr 8, 2018 at 3:46
  • 1
    @jessi yeah, that iFrame would simply bring the image into the post. The reason I wanted to use an oEmbed was in order to have Instagram interactions like liking the picture within the post. However, I couldn’t implement a working solution across all browsers. I fell back to hotlinking from Instagram without iframe, simply using CSS.
    – Ram Iyer
    Commented Apr 9, 2018 at 10:30
3

I took Marcanuy's answer and replaced insta.html with Instagram's own embed code. I pulled out their SVG logo into a separate file and moved the embed.js bit to the page I'm embedding to so it doesn't get called multiple times.

Also, since my requirement was to include multiple posts on a page, I did not put the post ID in front matter and instead put it in the include block itself.

{% include insta.html id="BbR55zEnaQL" %}

I talk about in detail here.

http://khoparzi.com/2019-02-06-embedding-instagram-on-jekyll/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.