Simple Blogger Tutorials

How to Add Retweet Button to Blogger and Customize it

Retweet Button“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.

Float retweet button right

While changing it to 'float: left;' will place it to the left of the post.

Float retweet left

Property 'padding: 5px;' will make the button to not to overlap with posts texts.

Adding Compact Retweet Button to Blogger

Customize Compact Retweet Buttom

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.

0 comments :

Post a Comment

Don't SPAM! Read comment policy.

Like