Twitter订阅常规div?

时间:2011-07-21 19:53:47

标签: javascript jquery html twitter

如果你问我,Twitter的嵌入代码是一个很大的笨重。看来你必须加载js并将js嵌入代码(javascript)放在你想要它的页面中才能显示它。我想在</body>结束之前加载js,并且还将js脚本放在那里。然后我想在我的页面上的任何地方放置一个空div,并在那里显示twitter feed。像<div id='twitter_feed'></div>那样可以调整Twitter给我们的代码吗?

<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: false,
    behavior: 'all'
  }
}).render().setUser('example').start();
</script>

我的问题不是如何使用不同的工具来呈现Feed。我的问题是我如何制作上面提供的代码并以一种它将在我指定的div中呈现的方式编写它。

通过阅读后... ... http://www.dustindiaz.com/twitter-widget-doc我发现你可以指定一个id。

2 个答案:

答案 0 :(得分:1)

This听起来像你想要的,使用http://plugins.jquery.com/project/jQuery-Tweets上的jQuery推文插件

HTML

<div id="tweets">
</div>

的jQuery

 $('#tweets').tweets({
           tweets:4,
           username: "jquery"
  });

或使用您当前的小部件http://jsfiddle.net/mazlix/dZ2aP/

<div class="content_up_here">
There's so much stuff here.
</div>
<script>twitterwidget();</script>
<div class="content_down_here">
Lorem and Ipsum sitting in a tree. D O L O R S I T.
</div>

答案 1 :(得分:0)

var username = "username";
$.getJSON("http://twitter.com/statuses/user_timeline/"+username+".json?callback=?",
function(data) {  
  function replaceURLWithHTMLLinks(text) {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(exp,"<a href='$1'>$1</a>"); 
  }

  $("#tweet").html(replaceURLWithHTMLLinks(data[0].text));
});

上面的脚本将解析链接和用户名,并使它们成为实际链接。您需要做的就是拥有一个id为#tweet的div。确保你也加载jQuery。这也只得到了最新的推文。