【问题标题】：oEmbed Instagram in Jekyll using Liquid (no custom plugins)o使用 Liquid 在 Jekyll 中嵌入 Instagram（无自定义插件）
【发布时间】：2017-12-01 15:46:34
【问题描述】：

我正在尝试将 Instagram 帖子嵌入到我的 Jekyll 网站上的帖子中。我正在使用 oEmbed 方法。 Instagram 文档的 URL 提供了一个 JSON，其中包含我要提取的 HTML 键值对。

这就是我想要做的：

在 post frontmatter (instagram: fA9uwTtkSN) 中输入图片的简码
调用include 接收短代码并进行oEmbed 调用，以获取JSON (https://api.instagram.com/oembed?url=http://instagr.am/p/{{ page.instagram }}/)
提取HTML 键的值，并将其放入帖子中。

我正在尝试编写一个 include 来完成它，而不使用 Ruby plugin。

请指点？

【问题讨论】：

标签： json jekyll instagram-api liquid oembed

【解决方案1】：

将参数添加到post frontmatter instagram: BbR55zEnaQL

在帖子内容中调用包含：

{% include insta.html id=page.instagram %}

在_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块引用。

注意事项

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

【讨论】：

嘿@marcanuy，我认为我没有多大意义。实施建议的解决方案后我得到的是this。（Instagram 窗口出现在文章底部，并且由于某种原因不包含图像。）我正在寻找的是something like this。同时，我还找到了sharedmemorydump.net/embedding-instagram-posts。我也会尝试修改它。
只需更改将注入响应的占位符。我已经测试了代码并为我工作，它显示了整个图像。
解决了！我对代码进行了一些小的编辑，以将其加载到after 前面的段落中。并添加了一个格式化类。修改已提交。谢谢！
@RamIyer - 我尝试使用此代码，但没有看到 instagram 帖子。你能发布你的最终工作代码吗？
@jessi 是的，iFrame 只会将图像带入帖子中。我想使用 oEmbed 的原因是为了让 Instagram 互动，比如喜欢帖子中的图片。但是，我无法在所有浏览器中实现有效的解决方案。我回到不使用 iframe 的 Instagram 热链接，仅使用 CSS。

【解决方案2】：

我接受了 Marcanuy 的回答，并用 Instagram 自己的嵌入代码替换了 insta.html。我将他们的 SVG 徽标提取到一个单独的文件中，并将 embed.js 位移动到我要嵌入的页面，这样它就不会被多次调用。

另外，由于我的要求是在一个页面上包含多个帖子，因此我没有将帖子 ID 放在最前面，而是将它放在包含块本身中。

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

我这里详细说一下。

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

【讨论】：