Add Twitter Tweet button to every post on Blogger

Tweet

Previous post: Add a Retweet button to every post on Blogger with TweetMeme

Twitter has officially released tweet buttons which displays a real-time count and is very similar to TweetMeme's retweet button.

These new Tweet buttons are available in three styles and it shows the number of times your blog post has been tweeted. Add this button to your blog to let people share your blog posts on Twitter without having to leave the blog.

Demo

Tweet	Tweet	Tweet
Vertical button	Horizontal button	No count

Vertical Tweet button

First you need to backup your blogger template. In your blogger dashboard, click on 'Design' > 'Edit HTML' and then click on 'download full template' and save your template.

1. Go to Blogger Dashboard > Design > Edit HTML and check the "Expand Widget Templates" option.
2. Press CTRL+F to find the code which looks like <data:post.body/>
3. Copy the below code

<!--VERTICAL TWEET BUTTON BEGINS-->
<div style='float:right; margin-left:5px;'>
<a class='twitter-share-button' data-count='vertical' data-via='Cyberack' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<!--VERTICAL TWEET BUTTON ENDS-->

4. Paste it on top of <data:post.body/> this code.
5. Preview your template and if everything works fine, then save it.

Horizontal Tweet button

For the horizontal button, paste the below code on top of <data:post.body/>

<!--HORIZONTAL TWEET BUTTON BEGINS-->
<div style='float:right; margin-left:5px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='Cyberack' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<!--HORIZONTAL TWEET BUTTON ENDS-->

Tweet button with no count

For the button with no count, paste the below code on top of <data:post.body/>

<!--TWEET BUTTON BEGINS-->
<div style='float:right; margin-left:5px;'>
<a class='twitter-share-button' data-count='none' data-via='Cyberack' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<!--TWEET BUTTON ENDS-->

Changing the @username who is tweeted

By default the above code will tweet in the format of "<title> <link> via @Cyberack". Replace 'Cyberack' with your Twitter username in the code. If you don't want your username gets retweeted by users, then remove the data-via='Cyberack' attribute in the above code.

Tweet Button by Twitter [Video]

Here's a video by Twitter that explains the features of the new Tweet Button: