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?

marcanuy
  • 23,118
  • 9
  • 64
  • 113
Ram Iyer
  • 319
  • 1
  • 4
  • 14

2 Answers2

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

marcanuy
  • 23,118
  • 9
  • 64
  • 113
  • Hey @marcanuy, I think I did not make much sense. What I get after implementing the suggested solution is [this](http://test.merakipost.com/2017/11/on-india). (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](http://test.merakipost.com/2017/11/blowfish-by-siddharth-tripathi). Meanwhile, I also found http://sharedmemorydump.net/embedding-instagram-posts. I'll try tinkering with that as well. – Ram Iyer Dec 01 '17 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 Dec 02 '17 at 01: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 Dec 02 '17 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 Apr 08 '18 at 03:46
  • I ended up greatly simplifying "insta.html" to ``` ``` – jessi Apr 08 '18 at 04:05
  • 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 Apr 09 '18 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/

Abhinay Khoparzi
  • 31
  • 3