Sunday, 21 March 2010

How to add a retweet and facebook button to your blog

With all the commotion with opening up Moodle to iPhone (and now some android driven phones, but still in the initial try-out phase), I was not keeping up with my blog lay-out. But now, I finaly got the retweet button for blogger embedded in my blog html template, as well as a facebook button.

In order to do this, I relied on the blogger plugins blog: here is the link for the retweet button and this one for the facebook button. But to make things easy, I wrote down what I chose.

For the retweet button, I used this code:

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url>';
tweetmeme_source = 'your_twitter_user_name';
<script type="text/javascript" src="">script>

Mind you, I did replace the fourth line with my own twitterame, so that line became:

tweetmeme_source = 'ignatia';

But there are other types of button layouts, so check the post on bloggerplugins if you are looking for something different. Once I got the code, I followed the steps below:

How to install the Retweet Button on your blog?

1.Select the retweet button styles,and copy the corresponding code into a text file.

2.Now in this code replace your_twitter_username with your actual twitter username (e.g. ignatia)

3.Now we have got the final retweet code.Now login to your blogger dashboard and navigate to Layout > Edit Html and expand the widget templates

4.Find this piece of code

< div class='post-header-line-1'>

and immediately after that place our retweet code(from our text file) < div class='post-header-line-1'"> and you are done :)

If you were unable to find this code in your template,then look for the first occurrence of


and immediately before that, place our retweet code(from our text file)

5.Save the template.

For the facebook button, I used this code:

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src=""/>