Friday 17 May 2013

Add Social Sharing buttons under post title in blogger




Hello Friends, In this post we will learn how to add social sharing buttons under the post titles in every blogger posts. This social sharing widget will contain four sharing buttons including Facebook, Twitter, Google+ Recommend and Stumbleupon. Social Media is playing a great role in the blogging these days. It allows you to connect with your online readers and to increase your readership. This social sharing widget will help your online readers to share your articles on their social profiles. Social networks like Facebook, Twitter, Google+, Stumbleupon etc are great source of referral traffic and every blogger wants to increase their blog traffic, this widget will surely help every webmaster to increase blog traffic.
social-sharing-buttons-blogger


Many of our online readers wanted to add this kind of social buttons widget in their blog posts. So I decided to write a tutorial for the same. You can easily add this widget to every post by editing the blogger template. Now we shall see the steps that you need to follow to add this social sharing buttons widget in your blogger posts.

Recommended Articles:

Add Social Sharing buttons under post titles

  • Login in to your blogger account and navigate to template page.
  • Take back up of your blogger template. It is recommended to take back up before you edit your template to avoid any loss.
  • Now click on Edit HTML.
  • Search for </head> and place the JavaScript code mentioned below just before this tag.
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
  • If you are already using Google+ recommend button in your blog, then this code will already exist there. You can skip the above step.
  • Now search for <data:post.body/>, it might be occurring more than once in your blog.
  • Most of the users get confused with this. It depends upon the template, which code is going to work for you. In my case it was the second last one. You can try the last one and the second last one.
  • Now place the following code just before <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='box-shadow:0px 0px 1px 2px #000;' id="UT-social-share">
        <table align='center' border='0'>
            <tr>
                <td>
                    <a class='twitter-share-button' data-count='horizontal' data-lang='en' data-via='unziptech' 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>
            </tr>
        </table>
    </div>
</b:if>
<br/>

  • Now replace my twitter username with yours (highlighted with red).
  • Click on save template and view any post.

Note: This widget will not appear on the homepage, it will only be displayed on the posts page. If you want to display it on the homepage then see the customization part.

Customization:

  • For displaying it on the homepage as well as posts page just remove the code highlighted with yellow color.
  • If you want to change the shadow color from black to some other color, replace the color code highlighted with green color.
  • If you want to remove the shadow completely then remove the style attribute from the second line. It will look like this:
 <div  id='UT-social-share'>
After the customization save your template and review the changes you made. You should not modify other codes, it may stop working. You have successfully added a social sharing buttons widget in your blogger. If you face any problem, you can comment here. I will be glad to help you. You need to wait for my next tutorial, if you want a similar social network widget that I am currently using in my posts rather than this social sharing widget.

You should also check out our Blogging and SEO optimization section for more cool tips, tricks and tutorials. It will help you improve your blogging experience.

If you like my work; you can show your regards by hitting Facebook like button, following us on Google+ or Twitter, stumbling our posts on stumble upon or giving us a link back via the links below. Stay tuned for more tech updates.

Do you like this post? Please link back to this article by copying one of the codes below.

URL: HTML link code: BB link code:
author pic
Author: Mohammad Zafar Ahmad
Zafar Ahmad is PHP/Java Developer and a Passionate Blogger. He likes to write about Blogging tips, SEO tips, Blogger Widgets, Smart phones, Tablets and Online Earnings. You can find him on Facebook, Twitter or Google+

42 comments:

  1. Hello,
    I did it as you mentioned, still couldnt get the icons on my blog.

    ReplyDelete
    Replies
    1. I post these tutorials after testing them myself..As you can see it is working on my blog. So there might be problem with your editing..I have your template backup..i will edit it myself and send you after placing this widget in it..

      Delete
    2. Check out your email buddy..i have sent you the template..

      Delete
  2. Hi, i tried to add the plugin several times but I had no luck. It wont show on my blog.

    ReplyDelete
    Replies
    1. Hello Glen..as i told earlier i test these widgets and plugins myself before posting them, so there might be a case that you are not following the whole procedure. Let me do it for you, send me your blogger template backup at my email id at xafar89[at]gmail.com

      Delete
  3. You are doing good job dear :) keep it up

    ReplyDelete
    Replies
    1. @Gagan
      Thanks for your appreciation Brother.. I am Glad that you visited my Blog and followed me on Twitter :)

      Delete
  4. Replies
    1. Thanks Monjur..Keep visiting and subscribe to us..

      Delete
  5. Thanks mate for sharing this. It s wonderful!

    ReplyDelete
  6. Hi

    Almost got it to work except it wont show on homepage. Can you help please?

    Thanks

    therealmandem.blogspot.com

    ReplyDelete
    Replies
    1. Thanks for the appreciation..For displaying it on both homepage and post page just remove the code highlighted in yellow..

      Delete
  7. Thanks, I removed the code in yello but it still doesn't show? An I doing something wrong?

    ReplyDelete
  8. Hello! For some reason my template just doesn't have "" it has something similar to it where it says "body"

    ReplyDelete
  9. hi, my template can not find the end of "head"

    any ideas?

    ty

    ReplyDelete
  10. Thanks you so much. It works perfectly... I have tried to get buttons for a while but nothing worked until I saw your post. Thank you

    ReplyDelete
    Replies
    1. Thanks Naomi..Keep visiting for more blogger widgets.,.,Subscribe to us..

      Delete
  11. Thanks for this amazing articles but bad luck this is not working on my blog i try lot's of codes but now i lose my mind also for searching these types of codes

    ReplyDelete
    Replies
    1. Well, I try to make these tutorials as simple as i can..If you cant get it to work send me your template backup at admin[at]unziptech.com..I will try it out myself..

      Delete
    2. Give Me Your Right Email Address bro this is not right Email?

      Delete
    3. replace the [at] with @..It is correct email address

      Delete
  12. Hi, i found this morning that the social share buttons have a black rectangular outline. Why is this?

    ReplyDelete
    Replies
    1. If you don't like that please remove this code : style='box-shadow:0px 0px 1px 2px #000;'

      Delete
  13. Thanks again. It worked perfectly. You may want to consider including a linked in button as well? Great job you're doing *thumbs up*

    ReplyDelete
    Replies
    1. Okay..Next time i will do that as well.. :)

      Delete
  14. Thanks Zafar, with the sharing widgets my blog got extra 1000 clicks. Good knowing you. Thanks for helping out!

    ReplyDelete
    Replies
    1. Good to hear that Author :)
      Feel free to contact us in case you face any problem..Join us on social networks for instant updates from our blog..

      Delete
  15. didn't worked for me either. it won't show up.

    ReplyDelete
    Replies
    1. Brother this widget is working like charm on many blogs..i have also included a sililar widget on my blog..there might be some problem with your editing..if you can't get it to work let me do it for you..

      Delete
  16. thanx, but I did it via sharethis.

    ReplyDelete
  17. Pls mine doesn't have on my template. My blog is moofasabyomah.blogspot.com, You can check it out and tell me how you can help. I will appreciate the help

    ReplyDelete
  18. Didn't work for me :( any chance you could help me fix it?

    ReplyDelete
    Replies
    1. You can send me your blog template backup..I will insert the code..

      Delete
  19. how to remove these codes :(

    ReplyDelete
  20. Thank you for great instruction...clear, easy and they work!

    ReplyDelete
  21. @cheryl
    @varun

    Thanks friends..Keep Visiting..:)

    ReplyDelete