How to Add Retweet Button to Blogger and Customize it
“The retweet button is for blog and website publishers who want to encourage their readers to tweet their content on Twitter.”
This button also acts like a twitter counter. It not only allows your readers to tweet your blog posts to their twitter accounts but also shows the number of times your blog posts has been tweeted.
You can easily get the source code from TweetMeme but here also need an explanation on how to add this to your blogger posts.
Generally when you get the code for the full script, it will look like:
<script type='text/javascript'>
tweetmeme_url = 'http://yoururl.com';
tweetmeme_source = 'tweetmeme';
tweetmeme_service = 'bit.ly';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
Now for an explanation:
'http://yoururl.com' is the blog post URL, change it to '<data:post.url/>'
'tweetmeme' is the twitter account, change it to your account.
'bit.ly' is the link shortening service.
So the whole script will look like:
<script type='text/javascript'>
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'blogger_Raju';
tweetmeme_service = 'bit.ly';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
Adding Retweet Button to Blogger
1. Go to Design > Edit HTML, backup your template and check the "Expand Widget Templates" box.
2. Find <data:post.body/> and immediately above it add:
<div style="float: right; padding: 5px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'Your Twitter Account';
tweetmeme_service = 'bit.ly';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
Customizing Retweet Button
Taking the example of the above code, property 'float: right;' will make your button to float right of your post.
While changing it to 'float: left;' will place it to the left of the post.
Property 'padding: 5px;' will make the button to not to overlap with posts texts.
Adding Compact Retweet Button to Blogger
Just adding tweetmeme_style = 'compact' will make your button look compact.
The whole script will look like:
<div style="float:right;padding:5px;">
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'Your Twitter Account';
tweetmeme_service = 'bit.ly';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
3. Save your template.
Have a view on your blog posts and see how your Retweet button looks, if it works, and how many have tweeted your posts!
If you are find this Retweet Button Adding and Customization Tutorial useful then don't forget to retweet it.
