带有Javascript的Twitter小部件
Twitter Widget with Javascript
我已经查看了简单的 Twitter 小部件,该
小部件显示了指定帐户有多少关注者,并且是前 5 条推文,但我找不到/让其中任何一个工作。你们有什么想法吗?我试过这个 http://www.themelab.com/2010/05/18/custom-twitter-widget-tutorial/但我无法让它工作。
您好,您可以使用https://api.twitter.com/1/statuses/user_timeline.json
来获取用户时间线,http://api.twitter.com/1/users/show.json
以获取有关特定用户名的信息。这是我开发的Twitter小部件示例,希望对您有所帮助。
<html>
<body>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<style type="text/css">
body{background:#ccc;}
.status{
color:#000;
}
h3,h4{
font-size: 14px;
font-family: "Segoe UI", Tahoma, Verdana, Arial;
text-decoration:none;
}
#txt
{
font-size: 11px;
font-family: "Segoe UI", Tahoma, Verdana, Arial;
}
.status
{
min-height:60px;
padding:6px;
border-bottom:solid 1px #DEDEDE
font-size: 11px;
background:transparent;
border:#eaeaea 2px;
}
.status a
{
color:#3cf;
text-decoration:none
font-size: 11px;
}
.status a:hover{
color:#3cf;
text-decoration:underline
}
.twitter_image{
float:left;
margin-right:14px;
width:50px;
height:50px;
padding:3px;
}
.twitter_posted_at{
font-size:11px;
color:#999
}
#tweets{
margin:auto auto;
overflow:scroll;
background:#eaeaea;
height:300px;
width:300px;
}
</style>
<div id="tweets">
<div id = "heading"></div>
</div>
<script type="text/javascript">
var username = "Google";
var recentTweetsUrl = "https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=true&screen_name="+username+"&count=15&callback=?"
var followerCountUrl ="http://api.twitter.com/1/users/show.json?screen_name="+username+"&callback=?";
$(document).ready(function()
{
$.ajax
({type: "GET",url: followerCountUrl,dataType:"jsonp",success: function(response)
{
fCount = response.followers_count;
var headerData = "<h3>"+username+"</h3><h4>"+fCount+"Followers on Twitter</h4>";
$(headerData).appendTo('#heading');
}
});
$.ajax
({type: "GET",url: recentTweetsUrl,dataType:"jsonp",success: function(response)
{
var tdata='';
for(i=0;i<response.length;i++)
{
data =response[i];
var id=data.id;
var text=data.text;
var created_time=data.created_at;
var screen_name=data.user.screen_name;
var image=data.user.profile_image_url;
var source=data.source;
tdata+="<div class='status' id='"+id+"'><img src="+image+" class='twitter_image'/><a href='http://twitter.com/"+screen_name+"'>"+screen_name+"</a><div id='txt'>"+text+"<div class='twitter_posted_at'><span class='timeago' title='"+created_time+"'></span><i>via "+source+" </i></div></div></div>";
}
$(tdata).appendTo('#tweets');
}
});
});
</script>
</body>
</html>
相关文章:
- Twitter嵌入的时间轴小部件
- 我可以't在Divs中获得3个twitter小部件,以便并排排列
- 未解决的Twitter小工具时代之谜
- 用于Reddit的JavaScript Twitter小工具
- 当我们使用twitter小部件时,如何修改html
- 如何在twitter引导程序2.3.2中设置网页的最小宽度
- 带有Javascript的Twitter小部件
- 基于SSL的Twitter搜索小工具
- chucknorris的twitter小部件在IE上正在失去风格
- 试图消除twitter小部件中的回复和转发
- 从<p>标记到twitter小部件文本数据属性
- twitter小部件包装问题
- Twitter小部件在一个未托管的网站上从工作变成了不工作
- Masonry不适用于Twitter小部件
- Twitter Typeahead最小长度=0等效
- 构建一个最小化的twitter分析工具
- CSS覆盖twitter feed小部件
- 带有mootools的Twitter小工具
- jquery获取Twitter小部件的高度
- 在我的主页上显示推特的twitter小部件:twitter.com