December 29, 2011

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='http://twitter.com/share' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'> </script> </b:if> </td>

<td><!--Facebook-->

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

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

<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;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='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de3b2d654f56f28' 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='http://apis.google.com/js/plusone.js' 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! :)





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 »

83 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. 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 mustafa.stc@gmail.com


    www.krackoworld.com

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

    ReplyDelete
  3. it is not working :( my blog is www.koufanekdota.blogspot.com

    ReplyDelete
  4. nice widget
    http://softechnogeek.blogspot.com/

    ReplyDelete
  5. Please can you tell me how to search

    ReplyDelete
  6. tried this widget,mohammed i am having a sharethis plugin already in my blog http://studentsidea.blogspot.com ,how can i remove that ,if we add manualy i can remove it but ,the plugin was auto aded ,so kindly do help me..

    ReplyDelete
  7. Thanks, this is working perfectly on my blog

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

    ReplyDelete
  9. 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: http://iphone-hello-demo.blogspot.com/2011/05/vietnam-tours-and-travel.html

    ReplyDelete
  10. @karan

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

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

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

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

    ReplyDelete
  12. 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 http://www.feedvalidator.org/check.cgi?url=http%3A//feeds.feedburner.com/IndiaCoupons 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.

    Thanks

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

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

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

    ReplyDelete
  16. @arnel
    The first one, the code that appears the first.

    @Harsh
    I checked your feeds and everything seems ok for your blog http://feeds.feedburner.com/IndiaCoupons
    The feed is always updated around 12 hours later pal.

    @numtamil

    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.

    @Sam
    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

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

      Delete
  17. 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 ;)

    id- mayur_prabhu@yahoo.com

    keep up the good work and nice widget :D

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

    ReplyDelete
  19. Thanks bro. The container got deleted ,it worked.

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

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

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

    thanks

    ReplyDelete
  23. @Max

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

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

    @Gul
    My pleasure buddy. :)

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

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

    ReplyDelete
  24. Already replied to your mail yesterday Bro.

    ReplyDelete
  25. cant find <data:post.body.....
    my blog www.techcafe.tk


    help me

    ReplyDelete
  26. 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 :-> http://www.techinspiro.blogspot.com

    ReplyDelete
  27. working tnx :)....

    http://nirmalmaza.blogspot.com/

    ReplyDelete
  28. Thanks Mohammad for your ebook - Create and sale ebboks. I would like to point out sharrre.com which seems to be fair lighter load on page. Whoever I am not skilled enought to implement into the blogger. Can you be of assistance.
    Thanks very much.

    ReplyDelete
  29. great post...thnx:)

    http://technogist.blogspot.com

    ReplyDelete
  30. Thanks... Its Works...

    Me Blog: http://haris-tkj-kreatif.blogspot.com/

    ReplyDelete
  31. hey i want to remove the widget ! how can i remove it from my blog ? www.androidcop.blogspot.com

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

    http://qtutors.blogspot.com
    have any suggestion regarding this kindly let me know :)

    ReplyDelete
  33. Sharing Button Now Showing see

    http://warrive.blogspot.com
    http://warrive.co.cc

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

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

    ReplyDelete
  35. thanks i am searching for it long time .....thanks.....

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

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

    ReplyDelete
  38. can you help me my blog dont have ???

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

    ReplyDelete
  40. my blog is snapmails.blogspot.com.....please help

    ReplyDelete
  41. thanq for sharing this post.
    www.dynamictrick.in

    ReplyDelete
  42. It is working perfectly. You can see it at www.funnyshiit.com. Thank you!

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

    ReplyDelete
  44. Thanks a million time, I was able to install it on my blogger blog at http://www.nigeriabusinessdirectories.com.

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

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

    ReplyDelete
  47. http://www.indian-bet.com/2012/10/europa-league.html
    see my problem

    ReplyDelete
  48. Thanks for the posts. great blog.

    ReplyDelete
  49. This doesn't work on my blog :( Any help here for me???
    http://codecrypton.blogspot.in

    ReplyDelete
  50. Assalam,
    this is not working in my blog....
    http://itnewscorner4u.blogspot.com/

    ReplyDelete
  51. Thank You So Much For This Post. mybloggertricks.com is my emergency outlet wghen i need help online

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

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

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

    ReplyDelete
  54. Its Not Show Shairing Buttons Bellow Title, It Shows Below Ads
    Check IT, And Help Me

    ReplyDelete
  55. Not working...

    www.tknowmore.blogspot.com

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

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

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

    http://www.bestshoppingdealsofindia.com

    ReplyDelete
  59. Thanks for sharing this I used this for my site which is a game and movie recommendations Site

    ReplyDelete
  60. This is really nice post works well and easy to configure...thanks for all info..
    Regards
    ProblogBooster.com

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

    ReplyDelete

  62. The visitors are to be tracked frequently.. this tips really good one to follow

    with,,,the main benefits is to understand customer mind set.. by PSY 201 Week 2 Assignment

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

    http://www.indianquizleague.blogspot.com

    ReplyDelete
  64. 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 all...no 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!

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

    ReplyDelete
  66. The Info in the blog is out of this world, I so want to read more.
    increase facebook likes

    ReplyDelete

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