陈志伟博客 » 挂件 http://chenzhiwei.net 善始者实繁，克终者盖寡。 Sat, 17 Mar 2012 04:16:44 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 博客上添加twitter挂件的方法-超级简单 http://chenzhiwei.net/2010/06/add-twitter-gadget-on-your-blog/ http://chenzhiwei.net/2010/06/add-twitter-gadget-on-your-blog/#comments Thu, 10 Jun 2010 12:23:03 +0000 zhiwei http://chenzhiwei.net/?p=30219 最近一不小心发现原来在博客上添加twitter挂件很简单。只需要一个twitter api  地址，几行代码就可以了，现在贴出来与各位同学分享。以下是相关说明。

假设你的twitter api地址是：http://abc.com/api/

只需要将以下代码第六行中的twitter_username改为你自己的twitter用户名，其中的count=2是说明只显示最新的两条推。你可以根据自己的需求而适当更改。将这几行代码加到<head></head>之间，当然，你也可以加到主题的function.php或其他.php文件里面。看完以下代码后你会发现，只需稍做修改就可以运用到静态网页中了。

1
2
3
4
5
6
7
8
9

<?php
function twitter_show()
{
    ?>
    <script type="text/javascript" src="http://abc.com/api/javascripts/blogger.js"></script>
    <script type="text/javascript" src="http://abc.com/api/statuses/user_timeline/twitter_username.json?callback=twitterCallback2&count=2"></script>
    <?php
}
?>

以下代码是显示twitter条目的代码，你可以加到博客侧边栏或者加到博客顶部，像我博客(chenzhiwei.net)这样，由于博客主机速度原因，加载javascript太慢，所以将顶部tweets去掉了，效果见http://chenzhiwei.net/twitter/tweets.php ，因api原因，有时可能会显示不出来，刷新一下就OK了。如果懂CSS的话，你自己还可以优化一下tweets的显示，使用其更加美观。

1
2
3
4
5
6

<div id="">
	<ul id="twitter_update_list">
		<li>&nbsp;loading...</li>
		<?php twitter_show(); ?>
	</ul>
</div>

到此，博客上添加twitter挂件功能就实现了，非常简单。
下面给出一个测试例子：index.php文件，将该文件中的http://abc.com/api/改为你自己的twitter api地址，然后运行该文件后就会显示两条tweets。效果见http://chenzhiwei.net/twitter/tweets.php 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<html xmlns="http://www.w3.org/1999/xhtml" >
<head profile="http://gmpg.org/xfn/11">
<title>show tweets</title>
<?php
function twitter_show()
{
    ?>
    <script type="text/javascript" src="http://abc.com/api/javascripts/blogger.js"></script>
    <script type="text/javascript" src="http://abc.com/api/statuses/user_timeline/chenzhiwei.json?callback=twitterCallback2&count=2"></script>
    <?php
}
?>
</head>
<body>
    <ul id="twitter_update_list">
        <li>&nbsp;</li>
            <?php twitter_show(); ?>
    </ul>
</body>
</html>

© 2010, chenzhiwei.net. 版权所有.
本文永久链接：http://chenzhiwei.net/2010/06/add-twitter-gadget-on-your-blog/

相关日志
]]> http://chenzhiwei.net/2010/06/add-twitter-gadget-on-your-blog/feed/ 17