透过oEmbed Instagram的杰基尔中使用的液体（没有自定义插件）

Question

我试图嵌入Instagram的帖子到我的哲基尔网站的帖子。我使用的是透过oEmbed方法。是Instagram的文档的URL是，给出了包含HTML的键值对是我想提取什么JSON。

这里就是我想要做的事：

1. 输入短代码在后frontmatter图像（instagram: fA9uwTtkSN）
2. 调用include这需要在短码，使一个透过oEmbed电话，得到的JSON（https://api.instagram.com/oembed?url=http://instagr.am/p/{{ page.instagram }}/）
3. 提取的HTML键的值，并将其放置在后。

我试着写，做它的include，不使用Ruby plugin的。

指针，好吗？

Answer 1

1. 该参数添加到后frontmatter instagram: BbR55zEnaQL
2. 调用包括文章内容里面： {% include insta.html id=page.instagram %}
3. 创建包含文件在与_includes/insta.html：

     <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>

这将包括在body底部通过Instagram的返回的HTML块引用。

Notes

Javascript代码是Return HTML content as a string, given URL. Javascript Function的修改版本

Answer 2

我把Marcanuy的答案，并与Instagram的自身嵌入代码代替insta.html。我掏出自己的SVG标志为一个单独的文件和移动embed.js位我嵌入到这样它不会多次调用的页面。

此外，由于我的要求是包括一个页面上的多个帖子，我没有把帖子的ID在前面的问题，而是把它放在包括块本身。

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

我详细说说这里。

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