CODEWITHSUNDEEP
jsonjekyllinstagram-apiliquidoembed
Ram Iyer
Ram Iyer

Reputation: 319

oEmbed Instagram in Jekyll using Liquid (no custom plugins)

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?

Upvotes: 1

Views: 781

Answers (2)

Abhinay Khoparzi
Abhinay Khoparzi

Reputation: 31

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/

Upvotes: 3

marcanuy
marcanuy

Reputation: 23972

  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

Upvotes: 3

Related Questions