Blogging Ethics

MBT Tube

July 19, 2011

Add Google+ Button & Social Networking Buttons Below Post Title


After having explained the importance of social network buttons for your blog traffic in order of priority, its now time to add them below your blogger posts titles so that readers may find it easy to like, stumble, +1 recommend and tweet your posts instantly.  This is the same widget that I am using on this blog. Check the social network buttons appearing below this post title and see how they are arranged. social-share-buttonsI have arranged them in order of load time so that they may appear as quickly as possible when the page is viewed. I have added twitter, Facebook like, stumbleupon and Google+ button i.e +1 button. Other sharing options are included in the AddThis Share button. This widget is different from my previous version in terms of load time and importance. You can find the previous version by visiting this page.

Adding Social Networking Buttons To Blogger

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for <data:post.body/>
  4. and just above it paste the code given below,

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<table border='0'>

<tr> <td> <a class='twitter-share-button' data-count='horizontal' data-lang='en'  data-via='mybloggertricks' 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> <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:20px; width:100px; height:20px;'/> </td>

<td><div style='margin-right:25px;'> <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;'> <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' 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>

</b:if><br/>

 

Replace mybloggertricks your twitter username.

5.  Note: If you have previously added the +1 button then you may skip this step. Now search for </head> and just above 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 visit your blog to see it appearing on post pages. The widget will not be visible on homepage but on post pages only. If you want to show it on homepage too then delete the highlighted yellow lines.

    

Have fun! :>

Feel free to ask any questions you may have.





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 »

27 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. Thanks a Lot.Great , I Love It, I did all that you said you may see all this www.sp1947.blogspot.com

    ReplyDelete
  2. It didn't work when I add them above <data:post.body/>, but it works adding them just below <div class='post-body entry-content'>, thanks to Basharat, as I viewed his html page source, I saw he added the bunch of codes below there...

    Thank you so much MBT!!!!!!!!
    SimplifiedBlogging

    ReplyDelete
  3. hi,

    thanks for this accurate and wonderful tutorial...I have implemented it on my blog and it works great!..thanks a lot!!!


    Liezl,

    ReplyDelete
  4. Does The FB like button take count of all the people who liked it when I posted on FB or do they have to login to their acct to like the post ?

    ReplyDelete
  5. Sir but in my template is dont have the code...!! what to do now... :(

    ReplyDelete
  6. hi dear.. i try u r code.
    But its not work in first page.i clik to the post title then after open full page of this post then share widget is disply..

    plz help to its see also first page ..

    blog see..
    http://vanita-wallpaper.blogspot.com

    ReplyDelete
  7. Bro, your website is totally awesome. And I get almost every help that I need but the problem is your website pages take lots of time to get loaded totally! Can't you do anything about it?
    +1'd your page ;)
    Nice post.

    ReplyDelete
  8. Nice effort. learning lot from you. thanks
    i also have blog for blogger widgets, templates and tutorials.

    http://bloggeranalytics.blogspot.com

    ReplyDelete
  9. Hay brother if you compress your css code then it will not take long time to load on slower connections.use this resource

    http://www.cssdrive.com/index.php/main/csscompressor/

    ReplyDelete
  10. hi,
    I have placed the app on my website but while sharing, it doesn't pulling the body title and contains, it has been pulling index title and content.
    any help?

    thanks in advance

    ReplyDelete
  11. the google plus button is not sowing for some time today

    ReplyDelete
  12. good, i was searching for this script from 3 months, very useful, keep it up

    ReplyDelete
  13. hey brother

    I added this to my blog ,after that there is a big gap between post title and post in home page.
    also Google plus button shows horizontal count box...please help me... how align this buttons (i deleted stumble button)
    I would be grateful if you could help me out.

    ReplyDelete
  14. Hi there,

    I followed all the steps but Blogger will not let me save and gives me this error message:

    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 "div" must be terminated by the matching end-tag "

    Any idea how to fix this?

    Thank you!

    ReplyDelete
  15. Please tell me How to add facebook fans on my blog as you do it on upper right hand side ..
    check it....
    http://studytipsandtricks.blogspot.in

    ReplyDelete
  16. How do i add them in Post pages only?

    ReplyDelete
  17. This is really nice .. But how do I do , I want these buttons to appear below each posts.

    ReplyDelete
  18. very nice i done every thing u can see here
    atif3.blogspot.com

    ReplyDelete
  19. it didn't work on mine! i followed every single steps!
    www.movieslinks4you.com

    ReplyDelete

Widgets + Web Designing

Workshops

SEO Mashup