Twitter小部件嵌入答案

【问题标题】：Twitter widget embedTwitter小部件嵌入
【发布时间】：2015-07-15 00:00:59
【问题描述】：

我正在使用 twitter 小部件查看我的推文，我会水平显示它们：

推文 1 推文 2 推文 3

我在文档中没有看到做这种事情的设置。

我用的是twitter的代码：

<script>
    !function(d,s,id){
        var js,
            fjs=d.getElementsByTagName(s)[0],
            p=/^http:/.test(d.location)?'http':'https';
        if(!d.getElementById(id)){js=d.createElement(s);
                                  js.id=id;
                                  js.src=p+"://platform.twitter.com/widgets.js";
                                  fjs.parentNode.insertBefore(js,fjs);
                                 }
    }(document,"script","twitter-wjs");
                            </script>

&lt;a class="twitter-timeline" href="https://twitter.com/XXXXX" data-widget-id="XXXXXXXXX" data-tweet-limit="3" data-chrome="nofooter" width="300" height="500" data-screen-name="XXXXXX"&gt;Tweets de @XXXXX&lt;/a&gt;

我使用了本网站的解决方案，但不起作用：Twitter community

【问题讨论】：

标签： javascript html iframe twitter widget

【解决方案1】：

Twitter 的小部件 JavaScript 在初始化时和查看者与小部件交互后触发事件：https://dev.twitter.com/web/javascript/events。

您必须在页面上加载 javascript：

<script src="http://platform.twitter.com/widgets.js" id="twitter-wjs"></script>

一旦添加了twitter给出的<script>标签就没有用了。

然后添加一些 javascript 以在小部件呈现后对其进行自定义。

twttr.ready(function (twttr) {
    twttr.events.bind(
    'rendered',
    function (ev) {
      // customization code here
    });
});

这有点乏味，因为小部件出现在 <iframe> 中，这超出了页面的 css 和 js 范围。您必须手动将它们添加到 iframe 中，即使您的页面中已经包含它们。这是一个将slick slider 激活到 Twitter 帖子上的快速示例：

twttr.ready(function (twttr) {
  twttr.events.bind(
    'rendered',
    function (ev) {
      var iframe = ev.target,
          doc = iframe.contentDocument,
          head = doc.querySelector('head'),
          slicklink = document.createElement('link'),
          slickscript = document.createElement('script');

          slicklink.rel = 'stylesheet';
          slicklink.href = '//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css';
          head.appendChild(slicklink);

          slickscript.src = '//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js';
          head.appendChild(slickscript);
          jQuery(doc.querySelector('ol.h-feed')).slick();
    });
});

你在这个page的“获取直接”部分的结果

【讨论】：