December 24, 2010


Add Facebook Like Button, Retweet, Stumble and Digg Counter Buttons To Blogger

social-media Ever expected to add the best social media buttons all at one go? Well today’s Widget is not just a smart one but it will surely increase your blog Traffic tremendously. The widget includes Facebook Like Button which is highly appreciated throughout the blogosphere and our favourite the retweet button, Stumble and Digg Counter Buttons. All these buttons are eye catching so the visitors would love clicking them and thus bringing you more and more traffic by sharing your tutorials with people in their social media networks. You can see these buttons in action just under my post titles. So how do we add them? Here we go –>

Demo Screenshot,


How to add Social Media Buttons To Blogger?

The method is as simply as throwing a peanut in air and swallowing it. =p Simply follow these steps,

  1. Go To Blogger > Design > Edit HTML
  2. Back up your template
  3. Check the Expand Widget Templates box
  4. Then click Ctrl + F and in the browser search box paste this,


    5. Just above this code paste the giant code below,


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0'>
<td><div style='padding-top:6px;'>
<script type='text/javascript'>
tweetmeme_style = &quot;compact&quot;;
<script src='' type='text/javascript'/>

<script expr:src='&quot;;r=&quot; + data:post.url'/>

<td><div style='margin-left:35px;'>
<script type='text/javascript'>
(function() {
var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = &#39;;;
s1.parentNode.insertBefore(s, s1);
<a class='DiggThisButton DiggCompact'/>

<iframe allowTransparency='true' expr:src='&quot;; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:35px;  width:100px; height:20px;'/>
</table> </b:if><br/>


6.  Save your template and see your blog decorated with some best social media buttons.


That’s All!

If you liked the tutorial then kindly be generous enough to liking it :)

Ps: Please Respect copyrights.

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

72 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Mohd luv you.. mua... i was dying for this... thk U a Lot mate! xoxo! :D

  2. Thanks Mohammed it worked but why didn't you include google buZZ? Any reasons?

  3. @Shaila

    I am flattered. You welcome! :)


    Well I really don't see Google BUZZ as important till now. Its still in the race to reach some status but the number of people who use it is not traffic orientated. and yup you are welcomed! :)

  4. I get the following error..

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "span" must be terminated by the matching end-tag "".

    Should I parse the HTML...

  5. sorry but your script is error
    i just repair the 'XML error message: The element type "span" must be terminated by the matching end-tag "".'
    and now i find it
    XML "error message: The reference to entity "r" must end with the ';' delimiter."

  6. nice to see you after a long time dude..............thanks for the digg dude...

  7. Sorry sorry I forgot to encode the code. I have updated the code now. Feel free to try it now.


    Most welcomed Jayaraj. Glad to see you too :)

  8. Its working but I think I need to change the template again for my ebooks site as the current one is fixed width and when these buttons are added everything becomes messy...:(

  9. @samsexy

    Dude simply reduce the pixel size in the following two codes,

    <div style='padding-top:6px;'>

    and this one,

    <div style='margin-left:35px;'>

    Of course you don't need to change the template now :)

  10. I am using MBT Church modified and its displaying blank no icons like your blog mustafa. Would you have any solution for that

  11. Still doesn't works..
    I reduced it to 1 and 10 respectively but no good result and even if this one fixes then what about the other widgets...

    I am not even able to add my own subscribe widget..
    Faced a real trouble with my current template...
    Have a look at one of my post...

    Sometimes I feel laughing on myself...XD hahaha...

    Btw I already started working on my new template and the only part remaining is the widgets provided by you and Divya Sai...

    Btw a request to you....
    I have not yet found a PERFECT WORKING page navigation widget...
    Can you make a perfect one...??

    And how was your exams...I completely forgot to ask you...

    Nothing else coming in mind right now...haha...:D

    Anyways hope you didn't got bored reading my loooonnngg reply :D

    Thank You

  12. @Vishal

    I have tried it first on MBT Church theme -> You can see it here MBT Church Theme

    Please make sure you are following the steps correctly.

    Well this widget is really easy to be installed and even after that changes if your template is still showing alignment problem then I will encourage that you get a more well coded template.
    For page navigation widget I will encourage you read he has many versions of it.
    And my exams went awesome. To know about my percentage and other stuff why not add me to your facebook friend list. I share my life there.
    And I love long comments so you are always welcomed pal. :)

  13. Nice to see you back Mustafa

    i use MBT Church too but this trick is not working on my site, have a look by yourself:

  14. @TAP @Vishal

    TAP thanks for the greetings :) Hope you are doing great too.
    Dude The Icons will be visible on post pages only and not homepage. I have copied the code again into MBT Church theme and its working perfectly. If it still did not worked then kindly give me the editing rights to your templates. I will do it for you. If its ok for you guys.

  15. @Mustafa

    Thanks again for the quick help, finally i have the trick on my post pages, working fine, i tried many times and didn`t see it on my homepage, my own fault, thanks one more time

  16. @Mohammad
    Well I don't go much on facebook because of security reasons...
    I will send you my gmail ID through Contact page so you can add me in your gmail account..:)

    And the site you gave is really good but noticed that there is lack of content..

    And as you said to get a well coded template i customized the template named Helios for blogger though i dnt know what is a well coded template..haha..:p

    Here is a Demo of my customized template..

    Dnt read the contents as they are crap and just for testing..:p
    The changes i made was some hover effects, sidebar color and most important the slider which i removed it...

    Hope you like...Any suggestions will be helpful...:)

    Will send you my email now..

    Thank You

  17. @TAP
    I am glad it worked now! :)


    I am impressed with your customization. Well actually a Centrally aligned post-body with a left and right sidebars are often not well coded when it comes to alignment issue. Thus some widgets especially like the page navigation and the newer, older links are messed up. Though your current template has just one sidebar at right and the coding looks just perfect so well done! :)

  18. Wowww...
    Compliment from the owner of MyBloggerTricks to me...
    It can't get better to me...
    Thank You So Very Much.. :)

    Btw as you there could be some messed up things then yes there is some messed up which I need to figure out and I think you to have figure out in your template because you have the same problem as mine...

    The problem is the read more hack...
    I installed you TOC widget and it is now working but on every new page I get a read more button which is not required at all..
    You too have a read more button on your TOC page...

    Another thing is the time like when it was posted on something something, etc...

    I have "ON" written just below the title on the page and you that clock icon but the no time or date displayed...

    Have a look at my page here..

    And also look at the "Credits" at bottom right...
    sorry but didn't got a much better way to express it...:P

  19. Hey looks like there is some problem with the tweet button...
    It is not displayed properly sometimes, neither on your site nor on my site...

  20. Bro for me its not working.After adding this code it is not showing anything.I dont know wot i did wrong and also i have many
    data:post.body words in my i added it to first one .
    please help me.check here

  21. @Sam
    hey I just read your comment... Oh please don't thank me. you did a good work so keep it up. you learning fast.
    Yeh I have observed the two pros that you mentioned. Blogger's pages should not contain other widgets but I don't know when will these engineers make things simple!
    And dates are not displayed on pages dude so its ok. :)

    For the retweet button. Its working fine. Probably your network connection could be a reason for the slow loading.

  22. Bro it won't be good if I don't give credit to people who helped me or whose site helped he...
    Its somewhat greedy or unethical (can't find the right word) if I don't give credit..

    And about that widget on pages or more specifically the Read More problem, I managed to remove that read more from my page but I dnt remember what I actually did...

    I will mail you my new read more code because I get an error while commenting here that DIV tags are not allowed...

    And about the date, I know that its not displayed on pages but there is some other problem..
    I will explain...
    See if we publish a normal post the date somewhat comes like "Posted On some date"...
    Now when we publish page the date do not come but a part of the phrase is there...Like in my case it comes as "ON" instead of "Posted On"...

    See this page and you will understand clearly what I am talking...

    And also see on that page that the TOC is now gone...
    It neither on my site nor on your site... :(

    And I will launch my new template on the main site on New Year... :)

  23. Well now I am able to comment so here is what I was trying to comment..

    Hey where is my comment gone...???
    I commented here in reply to you but now its not there...:(

    Now I need to comment that long one again in short though...

    Mohammad it won't be good if I dnt give credit to people who helped me..
    It would be somewhat greedy or unethical (can't find the word) if I dnt give credit..

    Regarding read more stuff I have mailed you with a new code which removes read more on pages...

    And about the date I know that dates are not displayed on pages but my problem is a bit different..

    I will explain..
    When we post a new article the date comes like "Posted On some date" but when we create a new page the date do not appear but the part of the phrase appears..
    I my case it shows "ON" below the title...

    See this page and you will be cleared on what I am trying to explain...

    Also see on that page that the TOC is gone.. :(
    Its neither on your site nor on my site...
    Probably because the host is down where the script is hosted...
    Can you mail me the script so that I can host in on blogger itself to avoid future problems..??

    Btw I will launch my new template on New Year on my main site.. :)

  24. @Sam

    Oh I am really sorry that you had to comment again. Your comments went automatically into spam folder so I had to mark them as not spam. Sorry for the inconvenience its old blogger bugs you know. :)
    And thanks for the credits I loved it!
    And your read more code is just awesome. Look now you are even teaching me and I am glad I am receiving knowledge in return. keep up this great quality. I will publish that code soon and will surely link your homepage for helping me.

    For that On or icons thing at top. I will use the same read more code and will tell you very soon on how I do it. let me test first for icons.
    Thanks again.

    The TOC is not showing because is dead. It will be functioning once mydatanest is fixed. Else I will have to move the files to a better server then.. I will buy hosting soon so you guys will never feel any such problem in future InshAllah.

  25. @Mohammad
    Well I think it gone into spam folder because I was trying put some HTML tags for explaining more clearly..
    Or may be because I am commenting too much to be tagged as spam..:P

    I will waiting for the post with Read More including On or icons hack...
    And about the linking thing I have no words to explain on how happy I am that on the Net there are still some people who left who are not greedy or unethical... :)

    And about the hosting stuff, I don't think you need to buy it because there is one trick to host the javascript on blogger itself.. and with blogger I mean just blogger and not google sites...

    I am doing this on my demo blog and it seems to be working fine but if you can send me that TOC script it would be much easier to check it because the TOC is on a complete different page and it would be much easier to judge whether everything is working fine or not...

    Please mail me that script so that I can test and let you know the code...:)


    Thank You

  26. This comment has been removed by the author.

  27. Great post.Big thnx to mohammad.I used this on

  28. @Samsexy

    May be you are right this could be one reason and even blogger loves comments so never stop that :P

    And don't ya worry InshAllah I will post that very soon.
    For javascript I saw your mail and I am aware of this method. It indeed works great but I still will need a storage medium because I will need to store some flash and mp3 files too so blogger wont help me in this case. Further hosting has a lot more importance in its own.

    You are welcomed devlevis :)

  29. @Mohammad
    Of-course I won't stop commenting but I am afraid that blogger do not mark me as a permanent spammer :P Haha..

    I too like flash but I don't use it so I think it will be good for me to host it on blogger itself...

    Are there any negative impacts in doing this..

    Thank You

  30. I thought I was having issues until I read you mention, "Dude The Icons will be visible on post pages only and not homepage.'

    I clicked one of the articles, and THERE is was! lol!

    Thank you! This is awesome!

  31. This is great, thank you so much.

    Is there a way to also add this into the home posts of a blog and not just the post pages?

    I only ask as most visitors just seem to come to my homepage so will sadly not even see these.

  32. @Hannah

    Congratxx! Mistakes are natural :)

    Oh yeh sure you can do this by removing these two bolded lines,

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <table border='0'>
    <td><div style='padding-top:6px;'>
    <script type='text/javascript'>
    tweetmeme_style = &quot;compact&quot;;
    <script src='' type='text/javascript'/>

    <script expr:src='&quot;;r=&quot; + data:post.url'/>

    <td><div style='margin-left:35px;'>
    <script type='text/javascript'>
    undefinedfunctionundefined) {
    var s = document.createElementundefined&#39;SCRIPT&#39;), s1 = document.getElementsByTagNameundefined&#39;SCRIPT&#39;)[0];
    s.type = &#39;text/javascript&#39;;
    s.async = true;
    s.src = &#39;;;
    s1.parentNode.insertBeforeundefineds, s1);
    <a class='DiggThisButton DiggCompact'/>

    <iframe allowTransparency='true' expr:src='&quot;; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:35px; width:100px; height:20px;'/>
    </table> </b:if><br/>

    And I am glad you found it worth trying :)

  33. It didn't work for me but I have found your site to be most helpful otherwise. Thanks! :)

  34. @Heather

    I would be more than happy if I can help you. :> Where exactly are you finding it difficult?

  35. Thank you so very much - thanks to your code, I now have sharing buttons on every post and even the home page. Much karma to you :)

    Please may I ask a question? Do you have any idea at all why some of my blog posts look as if they are embedded into other blog posts when I do a search sometimes or click on a label to find all blog posts containing a certain subject.

    I have troubleshooted by removing all the scripts from my template but it still happens. So I'm thinking it's a blogger bug but I can't find any reference to this :(

    Blog at thank you if you know anything about this.

  36. Just to say I solved the above :) The posts actually were embedded in some previous posts - I went in to edit them and removed the extra data. It must have been some kind of weird glitch!

  37. @kinsworm

    hey sorry for the late reply. I am glad you did it by yourself. Though I was scratching my head when I just read your question :p

  38. Hi, thanks for the tip! You can see i've implemented it here on my site both the main and individual post pages just above the footer for each post ( They all seem to work except the Digg counter does not appear to be updating. Any ideas why? Thanks! Harry

  39. I cant see the icons on my post page. What can i do? I see only a big space.

  40. Thank you Frend...

  41. This is awesome! I have two questions. 1. The icons are right below my post title. Is there a way to have them at the bottom of the post? 2. Can you check to make sure they are working - not sure the FaceBook Like one is??

    Been reading and trying some of your tricks with success - Thank You!

    BTW I have your button on my sidebar!

  42. Thanks! :D

    for centering, i defined a table property: {margin-left:auto; margin-right:auto;}

    and edited starting of your code to:
    |table border='0' class='center'|
    |td||div style='padding-top:6px;'|

    ( replaced "<" with "|" as tag "table" is not accepted :s )

    Awesome code Mustafa. Thanks again

  43. @Debby

    yes you can simply add the code below data:post.body instead. Forgive me pal for the late reply. Thank you so much for the kind favour :>
    Oh great pal. Thanks for the tip! :>

    PS:Humble Apologies to all for the late reply


  45. Dear MBT,

    Please update this code and add facebook share , Send, google buzz and +1 button please

  46. @Mehmood

    I did brother. You can find the new version on this post ->

  47. This comment has been removed by the author.

  48. The Digg Compact button doesn't show up if the service is down otherwise this is a great post.

  49. @webmaster

    Yes you are right brother. The button loading time depends on the button service servers. I am sure it wont take long to appear frequently.

  50. For me every button works but the facebook like button is glitching for some reason. When you click on it, it shows 1 next to it and then just nothing the 1 disappears instantaneously.

  51. This is just what I have been looking for. I just had to change ITEM at the end of the first line with STATIC_PAGE and it works. Thanks for this!!

  52. hii yaar i want sharing buttons below title as sames as yours plz help me yaar.
    looking for a positive response.

  53. Can this work on the right sidebar instead of the left? If yes, How?

  54. Thanks so much! I couldnt find a SU button that went directly to my current post and not my home page. This was very helpful!

  55. your blog has been a great help.. can't get this one working on my blog.. is it due to the new template?

  56. Hello there, there is no data:post.body in my template, I am using at customized one at

  57. Sorry for having bothered, widgets were not being displayed, thanks anyway, greetings from Argentina

  58. Thanks for your help!
    The code works great for a few days, but since today the "stumble" button is not working any more. It doesn´t appear in the table.
    Any ideas?
    My blog is http:/

  59. Dear Friend,

    Thanks for such a nice widget and its work for me very well but i want to show this widget at home page before or after jump link, please visit my blog and suggerest me how i can do it.

    Thanking You.

  60. it is not working on my site, i put the codes and i saved it but result is nothing it is same as it was.
    my blog url : please reply

  61. great man

  62. This is very informative. I search to add some of those social links which I don't have in my blog. And I got one that I need and it worked. Thanks for your effort. This really very helpful when regards to social media connections... :)

  63. Mohammad Bro its not working on mine please reply:

  64. I'm new to blogging please.

    I found that [data:post.body] 4 times in my template.
    Where am I going to add these codes please?.

  65. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    html5 video hosting| html5 hosting

  66. Please I am new and I am using Blogger. first I can't find the EXPAND WIDGET BOX and I think that is the reason why it is not working on my blog.... Please how can you help me with this?



Support Us

We have educated thousands of bloggers online and made several people Make a living Online. If our Tutorials have really helped you a little, then kindly show your love by using the badge below:-

Blogger Widgets

or try a Beautiful Banner


  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger


    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!


    Learn what it takes to become a successful entrepreneur and build a living online!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. STC Network was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..


SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics


Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |