How To Add Twitter Official Tweet Buttons to Blogger

Few days ago Twitter has introduced their own tweet buttons for web masters.Now you can use this twitter button directly share your posts through twitter without any third party web site.So you and your visitors don't want to authenticate any third party web site to access your Twitter account.These new tweet button loads very fast and anyone can share your article with in few seconds.There are 3 types of Beautiful Tweet buttons : Vertical count, Horizontal count and No count.Here I am going to describe how to add these Twitter buttons to your blogger blog.

If you like o add these Twitter official share button to your blogger blog,then follow the steps given below.



1.Login to your blogger Dashboard--> Design- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see below code:

<div class='post-header-line-1'/>

4.Now Copy your "Twitter tweet button" code and paste it just below the above code.

NOTE: If you can't find <div class='post-header-line-1'/> in your template, paste your "Twitter tweet button" code just before <data:post.body/> .

Code 1 : Vertical Count

<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>

Result:


Code 2 : Horizontal Count

<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>

Result:


Code 3 : No Count

<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>

Result:


Note :
Remember to replace "TWITTER-USERNAME" with your real Twitter username.

If you want to show Tweet buttons not only Post pages but also Home page,Archive pages,Label pages,etc... , then remove "<b:if cond='data:blog.pageType == "item"'>" and "</b:if>" from above codes.

5.Now save your template.

You can view more info from here:

http://twitter.com/goodies/tweetbutton

Want to build a custom tweet button for your site? Check out developer documentation for the Sharing API to provide the same Tweet Button sharing functionality with your own style :

http://dev.twitter.com/pages/tweet_button