Socialize Me: How To Add Twitter and Facebook Like Buttons to Blogger

Friday, January 21, 2011

How To Add Twitter and Facebook Like Buttons to Blogger

Over the weekend, I was asked how I was able to add the Twitter and Facebook buttons to my blog on Blogger. I realized that this took me a while to figure out and I never shared how to do it. Though I did share how to do it for those of you running blogs on Domino. Therefore, here's the step-by-step on how to add the Twitter and Facebook Like buttons to your blog on Blogger:

Update 21/Jan/2011 @ 2:40PM: Make sure you get an account with http://bit.ly first. I recommend getting a Pro account (which is FREE) which would allow you to use your own shortening domain. For example, if your blog is http://www.IDontLikeWar.com, a free Pro bit.ly account will allow you to shorten URLs to http://IDontLikeW.ar )

1) Go to http://Blogger.com -> Pick Your blog -> click on Design tab -> then Edit HTML

2) Click on Expand Widget Templates

3) Search for post-body and you should find something like this:

<div class='post-body entry-content'>

4) Immediately after that line, add the following code:

<div class='post_share social-media'>

<div class='wdt_button'>

<script type='text/javascript'>

tweetmeme_url = &#39;<data:post.url/>&#39;;

tweetmeme_source = &#39;twitter_user_id&#39;;

tweetmeme_service = &#39;bit.ly&#39;

tweetmeme_service_api = &#39;twitter_user_id:your_bit_ly_API_key&#39;;

</script>

<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>

</div>

<div class='wdt_button'>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=75&amp;action=like&amp;font=verdana&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:75px; height:30px;'/>

</div>

</div>

Note that you should change the values for tweetmeme_source, tweetmeme_service and tweetmeme_service_api to your respective values.

5) Now look for .footer-outer { and you should find something like this:

.footer-outer {

color:$(footer.text.color);

background: $(footer.background);

...

Just before that line add the following:

/* Social share styles

----------------------------------------------- */

.social-media {

width: 90px;

}

.post_share {

float:left;

}

.post_share .wdt_button {

clear:left;

margin:0;

}

.wdt_button {

padding:5px;

}

6) Click Save Template and that should do it.

Enjoy!