Question

我正在使用twitter小部件来查看我的推文，我会横向展示它们：

TWEET 1 TWEET 2 TWEET 3

我没有在doc中看到设置这样做的设置。

我使用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>

<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">Tweets de @XXXXX</a>

我使用此网站中的解决方案但不起作用：Twitter community

Answer 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();
    });
});

你的结果是＆＃34; GET THE DIRECT＆＃34;这部分page

Twitter小部件嵌入

1 个答案: