Friday, January 21, 2011

How To Add Twitter and Facebook Like Buttons to Blogger

View Comments

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 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, a free Pro account will allow you to shorten URLs to )

1) Go to -> 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;;

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


<script src='' type='text/javascript'/>


<div class='wdt_button'>

<iframe allowTransparency='true' expr:src='&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;'/>



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 {


background: $(footer.background);


Just before that line add the following:

/* Social share styles

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

.social-media {

width: 90px;


.post_share {



.post_share .wdt_button {




.wdt_button {



6) Click Save Template and that should do it.


blog comments powered by Disqus