开发者

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.)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜