Dynamically loading Twitter widget using jquery
I'm working on a website where we want a little Twitter logo in the corner, that when clicked will show the standard Twitter Widget in a box that 'pops out' of the little 24x24 logo (and toggles to hide).
I managed it ok with jquery, but I realised that it is quite slow, and thought that as most people won't be clicking on this image, the widget should be dynamically loaded only if needed.
But I seem to have reached the end of my limited jquery expertise, so would appreciate some help.
My attempt so far:
<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>
I placed the following code into the 'twitterwidget.js' file:
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();
I have tried many, many different ways to get this to work (probably 2-3 hours) but I'm now thoroughly stuck, so some advice would be appreciated, thanks!
see https://web.archive.org/web/20120208150540/http://od-eon.com/blogs/stefan/asynchronous-loading-twitter-widgets
(although the widget JS does load asynchronously now.)
精彩评论