Simple Blogger Tutorials

Add Floating Share Buttons Like Mashable to Blogger

You must have seen in many Wordpress blogs including Mashable that they use floating share buttons. Now it’s time for Blogger to add a floating share buttons widget. In this tutorial I will tell you the method that can be used to implement this widget to Blogger by using the features of jQuery. It will appear outside of your post sections and as you scroll the page, this widget will also scroll with some animation effects.

Floating Share box using jQuery

Demo

Step 1. Go to Design > Edit HTML tab and check “Expand Widget Templates”. Find <data:post.body/> and before this snippet add:

<b:if cond='data:blog.pageType == "item"'>
<div id='sharebox'>
<div class='wdt'> Tweet Button </div>
<div class='wdt'> Facebook Share </div>
<div class='wdt'> StumbleUpon </div>
<div class='wdt'> Digg </div>
<div class='wdt'> The bookmarking button you want to add next </div>
</div>
</b:if>

Add your share buttons scripts between “<div class=’wdt’>add the share button code</div>”. You can get script codes from the bookmarking sites that you may like to add or you can also see my blog posts labeled as Button Counter or in the demo itself or in the normal floating share buttons. Here is an example to how to add the codes:

<div class='wdt'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>

Step 2. Add the latest jQuery library immediately after ]]></b:skin>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'></script>

If you have previously added it, then you need not to add another one, just check whether it’s the latest or not and then replace it.

Step 3. Next is to add the JavaScript which will make the share box to float like Mashable that I have find out from CSS Tricks and modified a little by adding “.ready()” function. Find </head> and before it add:

<script type='text/javascript'>
$(document).ready(function() {

var $sidebar   = $("#sharebox"),
$window    = $(window),
offset     = $sidebar.offset(),
topPadding = 15;

$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

});
</script>

Step 4. Now is the CSS part. Add the below styling properties above ]]></b:skin>:

#sharebox {
float: left;
margin-left: -80px;
background: #992211;
position: absolute;
-moz-border-radius: 5px;
border-radius: 5px;
}
#sharebox .wdt {
float: left;
clear: left;
padding: 5px;
}

If you want the share box widget to float further left to your post body section, then increase the margin-left pixel value (marked in red) and if you want it to float closer then decrease it.

Step 5. Save your template.

If you are good with CSS then you can get different styles with it and give the floating share box a new look.

79 comments :

  1. hey, its look beautyfull thnks a lots.

    ReplyDelete
  2. thanks friend,,,,,,,,
    I used it,
    Many people use it but forgets to show the sign of gratitude........
    Same happens with my blog also.....

    ReplyDelete
  3. Hi,
    Please i can't see it after doing and adding every thing into the HTML.
    will you help me please.

    ReplyDelete
  4. Hey, thanks a lot, although I have one question. The share box, when I am at the top of my page, just floats in the middle, but when i scroll further down the page, it returns to its rightful place at the top. how to I make it always at the top? such as on this very page. you can view what is wrong by clicking on my name, which should go strait to my blog. thanks.

    ReplyDelete
  5. Also, how can I change so that it appears on my homepage?

    ReplyDelete
  6. Ok, I see what your problem is and that is also in IE. While adding hte facebook share code you have used:

    <div style="float: right; padding: 4px;">
    Script goes here
    </div>

    Delete these opening and closing divs marked in bold and everything will be fine.

    Secondly, it's configured to show in post pages only so that the floating feature works correctly.

    ReplyDelete
  7. Hey Raju, I have the same problem as shani. After following your instructions the buttons don't appear on the left side as desired. Can I get some help here?

    ~Sam

    ReplyDelete
  8. Sam, I visited your blog and it's visible and working fine. Still, if you got any problems, ask me.

    ReplyDelete
  9. its not working properly on my blog at "-80px"...
    it is coming on to the post if positive pixels are used....

    could you please help me??

    my blog is http://kuchkhaasblog.blogspot.com/

    thanks...

    ReplyDelete
  10. Vijay, first you need to find:

    .art-contentLayout .art-singlecontent{border:0;float:left;margin:0;overflow:hidden;padding:0;position:relative;width:598px}

    And delete overflow:hidden;.

    Next, set margin-left to -80px, it will work now.

    ReplyDelete
  11. Thanks Raju... for your help... now it seems to be working...

    thanks again...

    ReplyDelete
  12. but digg button is not appearing in sharebox....why???

    ReplyDelete
  13. Because you didn't add the type of button you want to have. Have a look at: How to Add Digg Button to Blogger.

    ReplyDelete
  14. Tried everything accordingly, still doesn't seem to work. the problematic blog: projectboundless.blogspot.com

    ReplyDelete
  15. Change the iframe width of the Like button from "450" to "55". This will fix the width.

    ReplyDelete
  16. Thanx Raju
    It workd perfectly...
    My blog : freen8apps.blogspot.com

    ReplyDelete
  17. this didn't work in my blog and it make's my post's appear blank(in post pages)
    <a href='www.paulsantosh.com>www.paulsantosh.com</a>

    ReplyDelete
  18. Thank you Raju! Been wanting this ever since I saw this on Mashable more than a year back. And thanks to you, now I have it on my blog.

    Keep up the good work! If you are ever in Bangalore, I owe you a mug of beer at least :-) Let me know.

    ReplyDelete
  19. This does not work for me. I've followed the steps multiple times and I keep receiving errors saying the code isn't formatted properly. Thus not allowing me to save the template. :(

    ReplyDelete
  20. Which step in causing your template to not to save. You can find out by clicking "Preview" after doing each step to check whether there's any problem.

    ReplyDelete
  21. Ok, there are no more formatting errors and the code saves fine. So I assume everything checks out syntax-wise. However nothing is appearing on my blog. And I cant seem to find out why this is. :(

    Link: http://idlikesomepoundcake.blogspot.com/

    ReplyDelete
  22. You have not properly added any button counter scripts into it. Have a look at the demo for the list of button codes and how to add it.

    Demo

    ReplyDelete
  23. the facebook and twitter counters are not working

    ReplyDelete
  24. I've checked your blog and it's working properly.

    ReplyDelete
  25. Hi, i have a troubles with the step 1, Preview says: The element type "script" must be terminated by the matching end-tag "/script". Can u help me?

    ReplyDelete
  26. This may happen if the sharing scripts are not added properly. To add the floating sharing buttons properly have a look at the demo blog for examples.

    ReplyDelete
  27. Raju-

    First thank you for your blog and for helping the rest of us! You do incredible work!

    I've added everything as you have instructed and have even done some troubleshooting according to some of the comments here.

    My buttons are planting themselves at the top left corner of my post, covering up some text and not scrolling.

    Thoughts?

    ReplyDelete
  28. Apply the margin. If you are new to all these it's best for you to setup a test blog and then try this.

    ReplyDelete
  29. How you made your floating button on this site ? Its just like wherever i scroll, it follows my screen.

    ReplyDelete
  30. It's same as I mentioned in this tutorial.

    ReplyDelete
  31. How can I make the box stop scrolling down the page ? I mean .... a '' fixed '' floatind share box xD

    ReplyDelete
  32. to Raju,
    this trix is great but i have problem in my blog can you help me?

    this is my blog
    http://www.coldfiregfx.info/2011/05/big-day-party-design.html

    ReplyDelete
  33. You need to add CSS as mentioned in step 4.

    ReplyDelete
  34. i already added but same problem i think the css code not working in my template

    ReplyDelete
  35. wow now its working i place the css before /style

    thank you great staff!

    ReplyDelete
  36. Hi Raju,
    My floating share box is extremely large for no reason, how do you fix it?

    ReplyDelete
  37. The problem is with your Facebook Like which is making the floating share box so large. Find the width:
    <fb:like ... width='450' ... />
    and change this to width='55'.

    Check out XFBML Facebook Like button for Blogger for more information.

    ReplyDelete
  38. Hi RAJU
    i want to add social bookmarking icons below my posts.I tried so many tutorial in the internet but it does'nt work.can you help me

    ReplyDelete
  39. Does this work with the new blogger re-design? I can't seem to be able to expand widgets anymore?

    ReplyDelete
  40. Yes, it works with every Blogger template. For your problem I need to know your blog's URL.

    ReplyDelete
  41. Hi Raju,
    Would you mind to check whether is mine working for my blog. I have follow step by step but i can't see it.

    URL : http://socialnetwork102.blogspot.com

    ReplyDelete
  42. You will see it only on post pages. I visited your blog and it's working fine.

    ReplyDelete
  43. It doesn't work for me :( I do not know why.

    ReplyDelete
  44. I visited your blog, it's working fine. Try clearing browser's cache.

    ReplyDelete
  45. i don't really understand how to do it...:(:(
    "add the share button code"
    where do i need to find the code..help me..

    ReplyDelete
  46. It's told clearly on the given example links as told in the tutorial. See the demo or this.

    ReplyDelete
  47. i've tried everything and i can't do it :(

    ReplyDelete
  48. Once more add it properly as told in the tutorial, step by step. If it still doesn't work, reply me here and leave it as it is until I see the problem.

    ReplyDelete
  49. In which blog have you added it. I didn't find any codes mentioned above.

    ReplyDelete
  50. Hi Raju;

    I am very much interested on your tutorials. I tried many times last night until this morning but seems nothing good on my side and erros always appear. I followed your Demo.

    Please help me.

    This what appear when I tried to save my HTML

    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: The element type "a" must be terminated by the matching end-tag "".

    ReplyDelete
  51. There were some typos in the demo. I have fixed it. Update the codes now, this should work.

    ReplyDelete
  52. greetings… i am not good with coding.. so can you share the code you used like the one on this page? I mean the one with tweet, send, like, and google plus

    i am very grateful if you help

    ReplyDelete
  53. Updated the codes in demo with Google Plus One button. If you like to have the Like with Send button, replace the Facebook iframe code with XFBML Facebook Like button. If you need to add any other button codes, just explore my blog.

    ReplyDelete
  54. not working on my blog. help pls

    ReplyDelete
  55. You have a 3 column template, better not use it.

    ReplyDelete
  56. Hi Raju

    Excellent work and thanks for sharing.

    Unfortunately, even though I have followed your instructions carefully several times, it doesn't work on my blog. Could you please check and let me know what I am doing wrong? http://rimmich.blogspot.com/

    Thanks

    ReplyDelete
  57. It's working but it's behaving improperly for you. Contact me.

    ReplyDelete
  58. Hi Raju

    Sent you a mail using your Kontactr form.

    Thanks

    ReplyDelete
  59. Hey Raju

    I am trying to add the floating share button to each post, but when I test your codes, it does not work. Is this because of the slideshow.

    Could you please help. Thanks.

    http://thecelestialconvergence.blogspot.com/

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

    ReplyDelete
  61. hey, i have tried this code multiple times but it's just not appearing on my blog can you help me out please. The blog site is http://purejoker.blogspot.com/. Thank you

    ReplyDelete
  62. Don't use it if you have 3 column template as it has to give some space on the left side of your post.

    ReplyDelete
  63. Thank's for your complately tips, i try to modify my floating share button like you.

    ReplyDelete
  64. Thanks Raju! Only problem I'm having is that it isn't moving as I scroll down the page like it does on yours. See http://www.atheistrev.com

    ReplyDelete
  65. You didn't followed step 3 properly. Re-do step 3 and don't add the script (which I've deleted) from my previous comment. Follow from the post only...

    ReplyDelete
  66. Hello
    Great tutorial.

    I have a little problem, in my blog the share box shown in the footer just below and does not move.

    See in any post of www.yauar.com Thanks :)

    ReplyDelete
  67. I visited your blog and tested in FF, Chrome and IE9. It seems to be working fine. Better clear your browser's cache and see if it's working or not.

    ReplyDelete
  68. How can I stop it at the top like you have done

    ReplyDelete
  69. Hemant, it's script is somewhat buggy and can act weirdly if not implemented properly. Let me get a proper script and then I'll write a tutorial about it.

    ReplyDelete
  70. Can i still have the script . I believe i will be able to implement it

    ReplyDelete
  71. LOL, I have a Contact me link at top!

    ReplyDelete
  72. Replies
    1. Complete the steps first as told in the tutorial. Then only I can help you.

      Delete

Don't SPAM! Read comment policy.

Like