How to Add the Twitter Share Button to Your Blogger Posts

How to Add the Twitter Share Button to Your Blogger Posts - Twitter has recently officially released its new Sharing Button with optional counter (Tweet Button). The button comes in three styles and features a new URL shortener. The Tweet Button will show how many times your post has been shared on Twitter.

The main advantage of the Tweet Button is that it enables the reader to follow you (and a related account) after he tweets your post. If you have a WordPress blog, please use the WordPress Tweet Button Plugin

To add the new Tweet Button to your Blogger blog, follow these simple steps:

1. Login to your Blogger Dashboard and Navigate to Design Edit HTML
2. Click on the Check box which says Expand Widget Templates
3. Now look for (Ctrl + F)

<data:post.body/>

and immediately above it paste the following code snippet (after proper editing)

<div style="float:left;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-related='metropersonal:Tips and Tricks for Blogger' data-count='vertical' data-via='' data-lang='en'>Tweet</a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>

4. Save your template.
5. Now you should see the Twitter button somewhere near your blog posts.

Editable parameters

• Float:left - you can change this to float:right if you need the button on the right side of the post instead of on the left.
• data-count='vertical' - you can change this to data-count='horizontal' or data-count='none'
• data-via='' - you can edit it with your Twitter username. So if your Twitter name happens to be tom, then change it to data-via='tom'
• Adding some extra text in the tweet � With the current code, the button will make a tweet with the title of the blog post. If you want to add some extra text to the tweet, change expr:data-text='data:post.title' to expr:data-text='"I am Reading: "+data:post.title' This will append "I am Reading:" to the tweet
• Recommend another Twitter user - data-related='metropersonal: Tips and Tricks for Blogger' here metropersonal can be replaced with the twitter username that you want to recommend (don't use @) and you can replace Tips and Tricks for Blogger with the a short description of the related account.
• Change language � you can change data-lang='en' to data-lang='fr' or data-lang='de' or data-lang='es' or data-lang='ja' (en, fr, de, es and ja stand for English, French, German, Spanish, Indonesia and Japanese respectively) Displaying the Tweet Button on Post Pages Only If you want to display the Twitter button on posts page only, then wrap the code with conditional tags like (wrapping tags in green)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="float:left;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-related='bloggerplugins:Tutorials and Widgets for Blogger' data-count='vertical' data-lang='en' data-via=''>Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</div>
</b:if>

Demos

1.data-count='vertical'
2.data-count='horizontal'
3.data-count='none'

If you want to display a simple Text link instead of the Button, pleease read my article Simple "Tweet This" Text Link for Blogger.

More Info about the Tweet Button

<iframe width="360" height="360" src="http://www.youtube.com/embed/LB0hrJ_ZZzc?feature=player_embedded" frameborder="0" allowfullscreen></iframe>