Question

我正在尝试使用一个非常标准的Twitter搜索小部件，直接来自Twitter网站：

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: '$AAPL',
  interval: 6000,
  title: 'AAPL',
  subject: '',
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#8ec1da',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#444444',
      links: '#1985b5'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    toptweets: true,
    behavior: 'default'
  }
}).render().start();
</script>

它的装载方式如下：

$(".linktosymbol").bind("ajax:success", function(event, data, status, xhr) {
    $(".symboldetails").html("");
    var target = $("#" + $(this).attr('data-target'));
    target.html(data);
});

它永远不会出现，它似乎只是空白屏幕并继续加载。想法？

Answer 1

有同样的问题。问题是Twitter JS使用document.write创建标记，该标记仅在生成文档时有效。否则它将创建一个新文档。

提示：在调试时，使用http://twitter.com/javascripts/widgets/widget.js上的原始代码会更容易。

<div id="twtr-widget"></div>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 500,
  height: 300,
  id: 'twtr-widget',
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('Znarkus').start();
</script>

这是我的解决方案。添加id参数，Twitter会将标记添加到具有该ID的元素（这是顶部div的用途）。

注意：我的脚本缩小版本有问题，所以我使用http://twitter.com/javascripts/widgets/widget.js代替。

Answer 2

$('#Twitter').click(function (e) {
  $.getScript
    (
      "http://widgets.twimg.com/j/2/widget.js",
      function () {
         makeTwitterWidget();
       }
     ); 
});

function makeTwitterWidget() {
new TWTR.Widget
    (
        {
            version: 2,
            type: 'profile',
            rpp: 3,
            interval: 3000,
            width: 'auto',
            height: 300,
            id: 'twtr-widget', // id of DIV
            theme:
        {
            shell:
                {
                    background: '#ff0000',
                    color: '#ffffff'
                },
            tweets:
                {
                    background: '#ffffff',
                    color: '#000000',
                    links: '#ff0000'
                }
        },
            features:
            {
                scrollbar: false,
                loop: true,
                live: true,
                hashtags: true,
                timestamp: true,
                avatars: false,
                behavior: 'default'
            }
        }
    ).render().setUser('sohelelite').start();
}

Answer 3

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: true,
    loop: false,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    behavior: 'all'
  }
}).render().setUser('roby_jazz').start();
</script>

从ajax加载的HTML加载twitter小部件？

3 个答案: