Question

我正在一个网站上工作，我们想要在角落里放一个小小的Twitter徽标，点击它时会在一个“弹出”小24x24徽标的框中显示standard Twitter Widget（并切换为隐藏）。

我用jquery管理它，但我意识到它很慢，并且认为由于大多数人不会点击这个图像，所以只有在需要时才能动态加载小部件。

但是我似乎已经达到了我有限的jquery专业知识的结束，所以会感激一些帮助。

到目前为止我的尝试：

<div id = "twittertoggle"><img src="images/Twitter_logo.png" alt="David's Twitter feed" id="twibble" /></div>
<div id = "twitterwidget">Widget to go in this DIV.</div>
<script language="javascript" > 
$('#twitterwidget').hide();  // hide the container DIV on load

$('#twibble').bind('click', function() {  // event for clicking on the twitter logo
$('#twitterwidget').toggle();   // toggle show or hide the widget container DIV
$.getScript('http://widgets.twimg.com/j/2/widget.js', function() {   // attempt to load the JS for the widget 
$.getScript('twitterwidget.js');  // fail horribly.
  });
});
</script>

我将以下代码放入'twitterwidget.js'文件中：

new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 320,
  height: 340,
  theme: {
    shell: {
      background: '#b0b0b0',
      color: '#ffffff'
    },
    tweets: {
      background: '#f7f4f7',
      color: '#474647',
      links: '#a16d99'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('TWITTERUSERNAME').start();

我尝试了许多不同的方法来实现这个目标（大概2-3个小时），但我现在已经完全陷入困境，所以有些建议会受到赞赏，谢谢！

Answer 1

请参阅https://web.archive.org/web/20120208150540/http://od-eon.com/blogs/stefan/asynchronous-loading-twitter-widgets

（尽管小部件JS现在异步加载。）

使用jquery动态加载Twitter小部件

1 个答案: