oEmbed Instagram in Jekyll using Liquid (no custom plugins)

Question

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?

Answer 1

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