Add a Retweet button to every post on Blogger with TweetMeme

Tweet

This post is about adding TweetMeme button on Blogger. Twitter has released official retweet button, check out this post.

Twitter is a micro-blogging and also a social networking site which enables its users to send and read messages known as tweets. It has become a very good media for social marketing.

TweetMeme is a free service which helps you to publicize your blog by using its retweet button. It helps you to integrate a retweet button into your blog in a simple and easy way.

The button shows a real time count of the number of times your blog post has been tweeted and it would be easy for your readers to retweet your blog posts.

TweetMeme button is for bloggers who want to encourage their readers to retweet their content on twitter. If your content is good and gets retweeted by other Twitter users, then traffic to your blog is enormous.

Demo

Normal button	Compact button

Adding a retweet counter on Blogger with TweetMeme

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

<!--RETWEET BUTTON BEGINS-->
<div style='float:right; margin-left:5px;'>
<script type='text/javascript'>
tweetmeme_url='<data:post.url/>';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'>
</script></div>
<!--RETWEET 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.

Changing the size of the button – Compact Button

TweetMeme also offer a compact version of the retweet button, with the same options as the larger button. For the compact button, use the following code instead of the above code.

<!--COMPACT RETWEET BUTTON BEGINS-->
<div style='float:right; margin-left:5px;'>
<script type='text/javascript'>
tweetmeme_url='<data:post.url/>';
tweetmeme_style = 'compact';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'>
</script></div>
<!--COMPACT RETWEET BUTTON ENDS-->

Changing the @username who is tweeted

By default the TweetMeme button will tweet in the format of "RT @tweetmeme <title> <link>". You can, however change the button to retweet your username. By specifying the 'tweetmeme_source' parameter in the JavaScript you can change the format to "RT @yourname <title> <link>". So now you can add your twitter username by adding the code below:

<!--RETWEET BUTTON BEGINS-->
<div style='float:right; margin-left:5px;'>
<script type='text/javascript'>
tweetmeme_url='<data:post.url/>';
tweetmeme_source ='Twitter Username';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'>
</script></div>
<!--RETWEET BUTTON ENDS-->

An example below would retweet in the format of "RT @Cyberack <title> <link>".

<!--RETWEET BUTTON BEGINS-->
<div style='float:right; margin-left:5px;'>
<script type='text/javascript'>
tweetmeme_url='<data:post.url/>';
tweetmeme_source ='Cyberack';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'>
</script></div>
<!--RETWEET BUTTON ENDS-->

Changing the URL Shortener used

TweetMeme have also added the ability to use a URL shortener of your choice which will be great and when the API support comes you could also many more features instead of thier default one. If you would like to do this then you need to include the 'tweetmeme_service' parameter as shown below:

<!--RETWEET BUTTON BEGINS-->
<div style='float:right; margin-left:5px;'>
<script type='text/javascript'>
tweetmeme_url='<data:post.url/>';
tweetmeme_source ='Twitter Username';
tweetmeme_service = 'Url Shortener';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'>
</script></div>
<!--RETWEET BUTTON ENDS-->

An example below uses bit.ly as url shortener.

<!--RETWEET BUTTON BEGINS-->
<div style='float:right; margin-left:5px;'>
<script type='text/javascript'>
tweetmeme_url='<data:post.url/>';
tweetmeme_source ='Cyberack';
tweetmeme_service = 'bit.ly';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'>
</script></div>
<!--RETWEET BUTTON ENDS-->

This is a list of the URL Shorteners that TweetMeme is currently supporting:

• bit.ly
• awe.sm (API support)
• cli.gs
• digg.com (API support)
• is.gd
• TinyURL.com
• tr.im
• su.pr (API support)
• ow.ly
• twurl.nl

This is the final code for TweetMeme compact button with customizable username and url shortener.

<!--COMPACT RETWEET BUTTON BEGINS-->
<div style='float:right; margin-left:5px;'>
<script type='text/javascript'>
tweetmeme_url='<data:post.url/>';
tweetmeme_style = 'compact';
tweetmeme_source ='Twitter Username';
tweetmeme_service = 'Url Shortener';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'>
</script></div>
<!--COMPACT RETWEET BUTTON ENDS-->

Remove tweetmeme_style = 'compact'; if you don't want a compact button.
Replace Twitter Username with your twitter username.
Replace Url Shortener with your choice of url shortener listed above.

Now you should have a retweet button near each of your blog posts.