使用jquery動態加載Twitter小部件

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做負載異步現在。）