Add Floating Facebook Like and Retweet Counters To Your Websites

floating-sharing-widget
UPDATED:  Problem Solved now happily use the new working code :>
Since it is weekend so I thought lets  play with some CSS again. Facebook Like Button and retweet counter by tweetmeme are the two most widely used social media widgets without which you can’t call a blog a blog. Both these buttons along with Stumble Upon bookmarking button can let your readers circulate/share your tutorials and articles with their interested collegues and friends connected to them via these social networks. With a little HTML spiced with CSS we succeeded in creating a floating widget that will include these three buttons and will stay fixed at the middle lift side of your websites. The widget settings can surely be changed to align it to the right, bottom or left if you wish. You can also add more buttons to it if you wish like DIGG for instance.  See a demo first,


Live Demo

How To add Floating Facebook Like, Retweet and Stumble Upon Counter to Blogger?

  1. Go To Blogger > Design
  2. Select HTML/JavaScript Widget from anywhere (Position doesn’t matter)
  3. Inside it paste the code below,
    <div style="display:scroll; position:fixed; top:40%; left:2%; border: 1px dotted #E8E8E8; padding:0px 0px 0px  5px; height:220px; width:53px ">
    <table cellpadding="1px" cellspacing="0">
    <tr>
    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;"> 
    <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/>
    </td>
    </tr>
    <tr>
    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">
    <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
    </td>
    </tr>
    <tr>
    <td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="mybloggertricks">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>
    </tr>
    </table>
    </div>

     4.    Simply replace mybloggertricks with your twitter username.
     5.    Save your widget and you are Done!

See your blog to find a light and beautiful widget hanging at left side of your blog. Hope you like it! :)

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 »

34 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. what for display:scroll if that used position:fixed...
    cool cool bos :)

    ReplyDelete
  2. @BEBEN

    Then that would make it to float as you go down.


    @Do LAm
    That's what I mentioned the code by tweetmeme doesn't seem to work and I am scratching my head to find a working code. Glad at least Facebook worked. :>

    ReplyDelete
  3. I got a solution for tweetmeme button

    Check the link below to get the solution.I can't post the solution here because script tag is not allowed.

    http://freetexthost.com/mxiycvz4kf

    ReplyDelete
  4. i want only "facebook like floating button" . please suggest corrections.

    Thanks

    ReplyDelete
  5. Please tell me if i can use this for wordpress or is there some other code?

    ReplyDelete
  6. @badaya
    Oh sure but unfortunately Your link is dead bro. Please update it. :>

    @candy

    In that case use the code below,


    <div style="display:scroll; position:fixed; top:40%; left:2%; border: 1px dotted #E8E8E8; padding:0px 0px 0px 5px; height:220px; width:53px ">
    <table cellpadding="1px" cellspacing="0">
    <tr>
    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">
    <iframe src="http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=box_count&amp;show_faces=true&amp;width=50&amp; action=like&amp;font&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:65px;" allowtransparency="true"></iframe>
    </td>
    </tr>

    </table>
    </div>


    @raj
    I know dear thats the problem I already mentioned however I am updating the code now so retry again and let me know.

    @Ayush
    Ofcourse you can but in upgraded version only.

    ReplyDelete
  7. This is awesome! I have two questions. 1. The icons are right below my post title. Is there a way to have them at the bottom of the post? 2. Can you check to make sure they are working - not sure the FaceBook Like one is??

    Been reading and trying some of your tricks with success - Thank You!

    BTW I have your button on my sidebar!

    ReplyDelete
  8. Nice post Bro.It helped me a lot.I have successfully implemented this in my website.Take a look at this
    http://www.techgadz.com/

    But i want one help from u bro.
    For this floating widget,i want to add digg button in it.So please tell me how i can add Digg button to floating widget.

    Bro and also i want ur comment about my blog.Thnx in advance

    ReplyDelete
  9. Hi Mohammad,

    How are you buddy, again thanks for the great tips.
    Instead of having floating share button, do you have a code for having the share buttons under the title post or below the post? Kind of like how you have it.

    Thanks.

    ReplyDelete
  10. Thank you for sharing the code with everyone. I could not get the facebook button to work correctly so I went here:
    http://developers.facebook.com/docs/reference/plugins/like/

    Generated my own code and pasted it between the iframe tags. I hope this tip may help others as well.

    ReplyDelete
  11. I have that one on my blog and I never had a problem with the installation. I only have problems on fetching the feeds on my blog.

    ReplyDelete
  12. @Indian Dramas

    Dude the widget will get fixed to the left of your template. It will not appear below post titles. I hope this post is what you are looking for,


    And thanks for the button. :>

    @G
    I am fine brother. Thanks for asking :)

    Oh sure I have kindly check this post -> Facebook, Twitter, Stumble, Digg Buttons

    @Rick Wilson
    I am glad it worked for you and thanks for the suggestion pal :>

    @Allen
    No spam please!

    ReplyDelete
  13. how is allen spamming? Great blog by the way! :D

    ReplyDelete
  14. @Brohan

    There is nothing required like Installation in the above post plus no mention of feeds
    :>

    ReplyDelete
  15. ya its nice but ...i dont want ot appear html title !!!its hanging me

    ReplyDelete
  16. nice post friend.really thanks for it.

    http://www.bloggertrix.com/

    ReplyDelete
  17. Thanks for your texts but please tell me how to add a non floating facebook like / stumble / tweet?

    thank you

    ReplyDelete
  18. Thanks :)
    but how to add adsense in the middle of a post?

    ReplyDelete
  19. Only the twitter button came up for me, the facebook and other ones didn't appear. :( Do you have a solution? Thanks!!

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

    ReplyDelete
  21. I added it on my blog:

    http://we-dotnet.blogspot.com

    only tweeter part is working.
    help needed.
    Thanks for your help :)

    ReplyDelete
  22. not working again. it shows only tweet counter

    ReplyDelete
  23. sir , why is it when i use 800x600 resolution ,, i can`t see the two buttons below "google +1 button". help

    ReplyDelete
  24. Really nice. I have been visiting MBT ever since I created my own blog http://2earncash-online.blogspot.com and I have earned and applied lots of things.
    Thanks Dude
    2 Earn Cash-Online
    http://2earncash-online.blogspot.com

    ReplyDelete
  25. @lookers

    The icons are visible only on all resolutions and work best with resolutions bigger than 800 by 600. Please check it first on your test blog.

    @james
    My pleasure pal.

    ReplyDelete
  26. I added it on my blog:

    http://oneworldblogger.blogspot.com

    only tweeter part is working.
    help needed.
    Thanks for your help :)

    ReplyDelete
  27. FOR FLOATING FACEBOOK SHARE BUTTON???

    ReplyDelete
  28. I insert that code in a html box but it shows only twitter icon no Stumble Upon and like button.
    help me.

    ReplyDelete
  29. Thank you! It is working for my blog right now. Been looking for this for sometime now. Is there anyway to have additional one button which is for Google+ like?

    Here's my blog http://bigfatreality.blogspot.com

    ReplyDelete
  30. asalam valikum!
    good evening sir!
    my name is khader vali from india i want to add menu to my blog can you help me plz my blog is:-trickntrips.blogspot.in

    ReplyDelete