如何在博客中添加Twitter的Follow和Tweet按钮

在博客中加上一个Twitter的Follow(跟随)和一个Tweet(推荐到Twitter)按钮,让关注您博客的读者朋友们也能够有机会关注您的Twitter或将您博客的文章分享到Twitter。这两个按钮目前非常流行,国外几乎每个博客都有,国内也有少部份的博客使用,如果不是“无法访问Twitter”,一样也会火热起来。添加这两个按钮十分简单,就像使用Twitter一样简单(只要您能上Twitter),方法有好几种,下面简单介绍一下。

添加Follow按钮

1.直接到Twitter填写个人信息

想办法打开这个网址,您会看到Twitter如下的页面:

Twitter Follow Button 从上图中,第一项:填写您的Twitter用户名;第二项:选择按钮背景颜色;第三项:选择是否要显示跟随者数目;Language options这一项是语言选择,英文吧,目前还未支持中文!右边上方出现一个即时预览按钮,将其下方生成的代码复制并粘贴到您自己的博客中就可以使用了。

如果您不想上Twitter,也可以使用下面的代码,将Chunlinsay改为您的Twitter用户名就可以了:

<a href="http://twitter.com/Chunlinsay" class="twitter-follow-button" data-button="grey" data-text-color="#FFFFFF" data-link-color="#00AEFF" data-count=“true”>Follow @Chunlinsay</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

2.使用Javascript添加Follow按钮

这种方法是最简单的,推荐采用。复制下面的代码粘贴到网页即可:

<a href=http://twitter.com/Chunlinsay class="twitter-follow-button">Follow @Chunlinsay</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

将其中的Chunlinsay改成您自己的Twitter用户名就可以了。

Chunlinsay-1

3.使用IFRAME框架嵌入按钮

代码:

<iframe allowtransparency="true" frameborder="0" scrolling="no"
  src="http://platform.twitter.com/widgets/follow_button.html?screen_name=Chunlinsay"
  style="width:300px; height:20px;"></iframe>

同样记得将Chunlinsay改成您自己的Tiwtter用户名。

Chunlinsay-2

后面的两种方法在使用时允许您添加一些参数,基本上是一些CSS样式代码,参考这里吧!

添加Tweet按钮

在您的博客上加上一个”Tweet“按钮,让读者随时可以将您的文章分享到Tiwtter,同时好让更多的朋友看到。方法基本上也跟上面的Follow按钮操作过程同样,您可以从这里访问Tiwtter获取代码,也可以直接复制下面的来使用,都是一样的:

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">分享到Twitter</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

代码中的data-count有两个参数:horizontal(水平按钮)和vertical(垂直按钮),如果您不想要显示跟随者计数,将data-count这一句去掉即可,它们的外观如下:Twitter Tweet Button

题外话:目前国内访问Twitter受阻,常规的直接访问是无效的,但还是可以通过“特殊方式”访问的,看看这一篇或者您就能够畅通无阻地遨游Twitter了。别忘记了发表一下评论哦!

如无特别说明,本站文章皆为原创,若要转载,必须注明以下原文信息:
日志标题: 《如何在博客中添加Twitter的Follow和Tweet按钮》
日志链接: http://www.chenchunlin.info/how-to-add-a-follow-and-tweet-button-to-your-blog.html
博客名称: Chenchunlinblog

This entry was posted in 应用技巧 and tagged . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

欢迎发表评论

我们不会公开您的邮箱地址, 标有*号的是必填项哦!

*
*

您可以使用这些HTML标签及其属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>