December 24, 2010

Widgets

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,

social-media-buttons

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,

data:post.body

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

 

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

<td>
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>
</td>

<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;http://widgets.digg.com/buttons.js&#39;;
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class='DiggThisButton DiggCompact'/>
</div></td>

<td>
<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=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;'/>
</td>
</tr>
</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 ▼
PLEASE NOTE:
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

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

    ReplyDelete
  3. @Shaila

    I am flattered. You welcome! :)

    @polei

    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! :)

    ReplyDelete
  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...

    ReplyDelete
  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."

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

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

    @chinna

    Most welcomed Jayaraj. Glad to see you too :)

    ReplyDelete
  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...:(

    ReplyDelete
  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 :)

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

    ReplyDelete
  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...
    http://www.plentyofebooks.net/2010/12/complete-book-of-wrist-locks-all-you.html

    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...

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

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

    Thank You
    Samsexy98

    ReplyDelete
  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.

    @samsexy
    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 www.abu-farhan.com 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. :)

    ReplyDelete
  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:
    http://theasianpunter.blogspot.com

    ReplyDelete
  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.

    ReplyDelete
  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

    ReplyDelete
  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..
    http://samsexy98downloads.blogspot.com/

    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..
    Bye..

    Thank You
    Samsexy98

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

    @Sam

    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! :)

    ReplyDelete
  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...like 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..
    http://samsexy98downloads.blogspot.com/p/table-of-contents.html

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

    ReplyDelete
  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...

    ReplyDelete
  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 template.so i added it to first one .
    please help me.check here
    http://www.techgadz.com/

    ReplyDelete
  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.

    ReplyDelete
  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...
    http://samsexy98downloads.blogspot.com/p/table-of-contents.html

    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... :)

    ReplyDelete
  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...:(

    Anyways...
    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...
    http://samsexy98downloads.blogspot.com/p/table-of-contents.html

    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.. :)

    ReplyDelete
  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 mydatanest.com 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.

    ReplyDelete
  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...:)

    Waiting...

    Thank You
    Samsexy98

    ReplyDelete
  26. This comment has been removed by the author.

    ReplyDelete
  27. Great post.Big thnx to mohammad.I used this on
    http://www.techgadz.com/

    ReplyDelete
  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.

    @devlevis
    You are welcomed devlevis :)

    ReplyDelete
  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
    Samsexy98

    ReplyDelete
  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!

    ReplyDelete
  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.

    ReplyDelete
  32. @Hannah

    Congratxx! Mistakes are natural :)


    @kinworm
    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'>
    <tr>
    <td><div style='padding-top:6px;'>
    <script type='text/javascript'>
    tweetmeme_style = &quot;compact&quot;;
    </script>
    <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
    </div></td>

    <td>
    <script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>
    </td>

    <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;http://widgets.digg.com/buttons.js&#39;;
    s1.parentNode.insertBeforeundefineds, s1);
    })undefined);
    </script>
    <a class='DiggThisButton DiggCompact'/>
    </div></td>

    <td>
    <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=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;'/>
    </td>
    </tr>
    </table> </b:if><br/>

    And I am glad you found it worth trying :)

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

    ReplyDelete
  34. @Heather

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

    ReplyDelete
  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 kinworm.com thank you if you know anything about this.

    ReplyDelete
  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!

    ReplyDelete
  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

    ReplyDelete
  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 (www.HarryTrident.com). They all seem to work except the Digg counter does not appear to be updating. Any ideas why? Thanks! Harry

    ReplyDelete
  39. I cant see the icons on my post page. What can i do? I see only a big space. http://www.alinsuceveanu.ro/2011/03/elemente-celtice-si-dacice-in.html

    ReplyDelete
  40. Thank you Frend...http://www.srisarigama.blogspot.com/

    ReplyDelete
  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!

    ReplyDelete
  42. Thanks! :D

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

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

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

    Awesome code Mustafa. Thanks again

    ReplyDelete
  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 :>
    @Riz
    Oh great pal. Thanks for the tip! :>

    PS:Humble Apologies to all for the late reply

    ReplyDelete
  44. www.o-alevel.co.cc

    ReplyDelete
  45. Dear MBT,

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

    ReplyDelete
  46. @Mehmood

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

    ReplyDelete
  47. This comment has been removed by the author.

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

    ReplyDelete
  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.

    ReplyDelete
  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.

    ReplyDelete
  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!!

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

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

    ReplyDelete
  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!

    ReplyDelete
  55. your blog has been a great help.. can't get this one working on my blog.. is it due to the new template?
    http://cinema-n-celebrities.blogspot.com/

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

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

    ReplyDelete
  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:/PlatoyPostre.blogspot.com
    Thanks!

    ReplyDelete
  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 http://jobfantacy.blogspot.com and suggerest me how i can do it.

    Thanking You.

    ReplyDelete
  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 : www.movieslinks4you.com please reply

    ReplyDelete
  61. great man
    http://mediaboat.blogspot.com/

    ReplyDelete
  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... :)

    ReplyDelete
  63. Mohammad Bro its not working on mine please reply: http://www.movieslinks4you.com/

    ReplyDelete
  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?.

    ReplyDelete
  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

    ReplyDelete
  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?

    ReplyDelete
  67. http://gadgetallaround.blogspot.com/

    ReplyDelete

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

Widgets

 
  • 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

    ALL IN ONE SEO PACK 2012

    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!

    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..

Recipes

SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics

Subscribe

Recent Comments

Popular Series

Powered by:

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