Show Sharing Buttons Just Below all Post Titles in Blogs

social sharing buttons widgetThe widget today is an upgraded version of the sharing widget we earlier shared. It includes popular social networking buttons like Twitter, Facebook Like, Google Plus +1, Add this and Stumbleupon. I am using it in my blog as you can see. We will also customize here the Add This button and will add blog title inside it. You can easily customize it to change the background colors and widget overall look. It can be added to both Blogger and Wordpress. It has great importance in boosting blog traffic through the shares made through these buttons which will circulate in social media and help you enjoy a long lasting referenced traffic. Lets add these valuable buttons to your blog.

Live Demo


Add Social Sharing Buttons Below Post Titles

I am sharing here the method for blogspot blogs. If you are using Wordpress then you may please add the code shared below inside your template by going to template section.

Follow the steps below if you use Blogger.

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Click on the box at top right that says "Expand Widget Templates"
  4. Then search for <data:post.body/>
  5. Just above it paste the following code,

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='background:#FEE6E6; border:1px solid #ddd; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; padding:5px; box-shadow: 3px 3px 3px #CCCCCC;'> <table border='0'> <tr>

<td><!-- Twitter -->

<a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-text='data:post.title' expr:data-url='data:post.url' href='' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='' type='text/javascript'> </script> </b:if> </td>


<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:0px; width:100px; height:20px;'/> </td>

<td><div style='margin-right:25px;'><!-- STUMBLE UPON -->

<script expr:src='&quot;;r=&quot; + data:post.url'/></div> </td> <td><div style='margin-right:5px;'><!-- GOOGLEPLUS --> <g:plusone expr:href='data:post.url' size='medium'/> </div> </td>

<td><!-- AddThis Button BEGIN -->

<div class='addthis_toolbox addthis_default_style '> <a class='addthis_counter addthis_pill_style'/> </div> <script src='' type='text/javascript'/> <script type='text/javascript'> var addthis_config = { ui_cobrand: &quot;MY BLOGGER TRICKS&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; } </script>

<!-- AddThis Button END --></td> </tr> </table></div> </b:if><br/>


Make these changes:

  • To change the background color of the container edit #FEE6E6
  • Change MY BLOGGER TRICKS with your blog title so that it appears on the add this button upon mouse hover. As shown below:

customize add-this button

      5.  Note: skip this step if you have already added a Google+ button somewhere in your blog. Search for ]]></b:skin>  and just below it paste the following code:

<script src='' type='text/javascript'> {lang: &#39;en-US&#39;} </script>


       6.  Save your template and say bingo!

Visit your blogs and see it appearing only on post pages and not the homepage. If you wish to show it even on your homepage then simply delete the two purple lines from the code above.

Want more?

If you want more variations of the same widget then kindly check our social sharing widget collection.  Do let me know if you needed help. Peace pals! :)

Need Quick Help within 24 Hours? ASK NOW

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 »

67 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. Hey Mohd_ its karan singh chauhan your old grt visitor. I am very much impressed by this post and sooner to implement this widget in my blog. Anyways plz check my guest post at

  2. it is not working :( my blog is

  3. Please can you tell me how to search

  4. tried this widget,mohammed i am having a sharethis plugin already in my blog ,how can i remove that ,if we add manualy i can remove it but ,the plugin was auto aded ,so kindly do help me..

  5. Thanks, this is working perfectly on my blog

  6. thanks a lot dude (^-^)...
    its look amazing in my blog...

  7. Mohammed, I know this is very off-topic but I feel only you can help me with this problem that I've been trying to fix for a week now. In this template below that I've incorporated to my blog, Every time there’s more than one comment posted, the sidebars drop below the content posts on Internet Explorer. Can you please help me in figuring this out? I'm a 1000% sure the problem is with the comment area. So if you can help me, I'll subscribe and add your blog to my website as a thank you!

    Open this template with Internet Explorer to see what I mean:

  8. @karan

    Welcome back karan :) Sure I will check it soon.

    Kindly click Ctrl + f to find the short specified code using your browser search box.

    @Tech Geeks
    Search for that widget inside your Page Elements and delete it there.

    Your demo blog looks just perfect in IE9 which is the one I use. Which version are you using?

    Normally we introduce conditional IE statements for stylesheet to work properly. IE9 works now perfect with all designs.

  9. sir I have also question why in my html editor have a two data post body. this a new blogger template.And where I put the code for sharing buttons the top or in the buttom?

  10. Hey mohammed i have a problem i am trying to fix since long. Can you please help me with it. My blogs feed is not updating as i post new content. I checked on Feed Validator and is the error it gave. I am not sure what to do and what not to. Please guide me. I also checked with the FAQ's where they say something about tag being introduced in the blog but i don't know how to find it and remove it.


  11. This comment has been removed by the author.

  12. Hi Mustafa , I'm using this one but I dont want the widget to look in a separate box , can I make it integrated with the background just like in yours?

  13. Hi
    Can I know what's the difference between this & the old one?

  14. @arnel
    The first one, the code that appears the first.

    I checked your feeds and everything seems ok for your blog
    The feed is always updated around 12 hours later pal.


    Delete these two bolded lines from the code above:

    <div style='background:#FEE6E6; border:1px solid #ddd; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; padding:5px; box-shadow: 3px 3px 3px #CCCCCC;'>

    and the div tag from below:

    <!-- AddThis Button END --></td> </tr> </table></div> </b:if><br/>

    the container will get deleted.

    How are you buddy? :) This widget provides a container that makes it more visible and also contains a customized add this button. No digg button is included because preference is given to widely used social sharing buttons

    1. How can we customize these sharing buttons. I want to use my own custom buttons and it would be great if you can share code for pinterest and reddit. Thanks

  15. Hey Mohammad, i have been waiting in anticipation for many days now for the monop template to arrive in my inbox, i am daily reader of your blog, have subscribed ages ago ;)


    keep up the good work and nice widget :D

  16. Ok..
    I wanted that full pack with icons & other stuff included. I also commented there a few days ago but just didn't remember the title.

  17. Thanks bro. The container got deleted ,it worked.

  18. Thank you very much Ahmedzai Brother,
    I like your Blogspot widgets very much and this is also a very good and useful widget.
    Thumbs Up

  19. Thanx pal but the prob was my feed size was more than 512K. Solved the problem by restricting my feed to recent 5 posts :)

  20. i think that go daddy is better why did not you use it
    you can convert your blogger to custom domain with 7$/year and then you can add 90 cnames and you can upgrade after for premium dns for unlimited cnames

    i would like to know your answer about this question


  21. @Max

    I am sorry for the inconvenience mark. I just sent all resources to you. :>

    Just sent them buddy. Everything and waiting for your reply to the email. :)

    My pleasure buddy. :)

    You are getting smarter day by day. Keep it up :)

    That is correct but godaddy offers only domain registration not web hosting. You can not create sub domains with it like forum and tools and services that I am going to release tonoght. Wait for my post on 2012 today to discover the secret. you will love the post. :)

  22. Already replied to your mail yesterday Bro.

  23. cant find <data:post.body.....
    my blog

    help me

  24. Bro Share button is getting cutted, so I have to remove tweet button..

    Help me to get al five buttons in a single line

    Here :->

  25. working tnx :)....

  26. great post...thnx:)

  27. hey i want to remove the widget ! how can i remove it from my blog ?

  28. Dear Mohammad,
    Some problem this widget in IE. it hides the google plus button and block the privacy of sharethis website... it's ok when i allow the privacy of sharethis site but it block the google+1 button what i do ?
    have any suggestion regarding this kindly let me know :)

  29. Sharing Button Now Showing see

    here i add the above code but not showing the icon just div why?

  30. hey buddy it shows adchoice ... you might be aerning by sharing this widget... If dont then who else is

  31. thanks i am searching for it long time .....thanks.....

  32. Thanks for sharing your knowledge. I've a problem with FACEBOOK Share button, It shows a wrong title, since it shows the title of my blog instead of showing the title of my post!!. It also shows a wrong description.
    AS for DIGG it works just fine. I do not know if the problem with facebook of with my template.
    Kindly fix this problem for me. Thanks in advance. My blog's name is Science universe: Physics articles. I'll not put the url. I do not spam. Thanks again.

  33. You are rocking with excellent tips and tricks.I appreciated you because your tips and tricks are easily understandable even no html knowledge. Thumbs up. Long live MBT.

  34. can you help me my blog dont have ???

  35. I tried to add this share button .but it is not appearing .Even i tried Lockerzplugging that also flop.Is this the problem of the template.please help.

  36. my blog is help

  37. thanq for sharing this post.

  38. It is working perfectly. You can see it at Thank you!

  39. This comment has been removed by the author.

  40. Thanks a million time, I was able to install it on my blogger blog at

  41. This comment has been removed by the author.

  42. problem with addthis in all my posts
    suddenly twitter icon disappear,facebbok icon disappear
    and i have a message "terms of service or of imageshack terms of service"
    please help

    see my problem

  44. Thanks for the posts. great blog.

  45. This doesn't work on my blog :( Any help here for me???

  46. Assalam,
    this is not working in my blog....

  47. Thank You So Much For This Post. is my emergency outlet wghen i need help online

    kind regards from , your online source for online income ideas and legit sites.

  48. Hi, i want to add the "via USERNME in the twitter share, anybody can help me with it?

  49. I'm here again back for good with your helpful guide. I am having a new food blog and need this instruction to put up the social sharing buttons.

    I successfully follow this again. Big Thumbs up for you!

    Next help I need is on how to change my comment form background into like yours. Could you help me with it?

  50. Not working...

  51. Share box not coming in homepage evenafter deleting those two lines... help me bro...

  52. This comment has been removed by the author.

  53. I want to add default sharing buttons for each post.
    what to do..

  54. Thanks sir your widget is nice.sir i have a big problem please help me to solve it,i want to add this widget to my blog but its not working although i had done all those steps which are asked by you but still it is not working.please help me i want to add a beautiful social sharing widget beneath my each post.please reply??? i can send you my template to do so.

  55. This site is superb....Awesome post...I am gonna try this on my blog...Impressed by your huge number of google plus followers

  56. I've tried so hard in so many different ways to add "share/like" widgets for facebook, et. al...I've been working on this for literally 8 months. I get an Could not load template preview: Error parsing XML, line 2200, column 38: Attribute name "async" associated with an element type "script" must be followed by the ' = ' or after having done what your instructions suggest...after adding the script where you suggest a template that doesn't change at error but also no like/share buttons. I'm exasperated. Someone offered to do this work for me for $60.$60.I don't have So I remain frustrated...I'll let the effort go for a day or two and then try to add the buttons again but alas after almost a year I simply can't figure out how I can make these widgets show...I'd be ever so grateful for any instructions you might offer. Your code didn't produce an error it just didn't produce anything. Yes, I cleaned out my cache...I'm at my wits end! Any help would be gratefully appreciated!

  57. Sorry to say it. Why everytime I try widget from you can't? Though, I want to try the widget of your post. Let me know! Reply please...

    From: Indonesian