How To Add Twitter Official Tweet Buttons to Blogger

Posted by Lasantha Bandara on August 17th, 2010 File Under : bookmarks, twitter, widget12 Comments

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

File Under : bookmarks, twitter, widget

12 Responses to “How To Add Twitter Official Tweet Buttons to Blogger”

  1. Google Adsense Code Converter says:

    Thanx Alot

  2. Anonymous says:

    Thank you bro.

  3. Anonymous says:

    Please can you tell how to add these buttons below blog post?

  4. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    Add twitter buttons code just below <data:post.body/>.

  5. Anonymous says:

    Thank you very much Lasantha.It works.

  6. Anonymous says:

    can u say how add footer links like as your blog.please say.....

  7. Bloger Mania says:

    please say how to add icon to sidebar Gadget like this template?

  8. Anonymous says:

    how can iget my blogger site attractive and famous?

  9. Jewels says:

    HI THERE. mine won't work, it keeps saying I have to close with matching tags, but i am copying the exact code from this site. any advice?

  10. John and Aileen @ Mas de flory says:

    Take a look at your follower pics. I think one should be removed?

  11. fajar says:

    nice inpo ...thanks God Bless U

  12. Samantha says:

    thank you.Mr.Lasantha,God bless u.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.