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! :)

Need Quick Help within 24 Hours? ASK NOW



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 »

36 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. what for display:scroll if that used position:fixed...
    cool cool bos :)

    ReplyDelete
  2. Facebook and stumpupon buttons are fine, but I got a problem with twitter button. Here is the error message:
    Failure: invalid story url specified
    This is my blog link:
    http://mobimas.blogspot.com/

    ReplyDelete
  3. @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
  4. Nice widget. I'll try this.

    ReplyDelete
  5. 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
  6. i want only "facebook like floating button" . please suggest corrections.

    Thanks

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

    ReplyDelete
  8. @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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. @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
  15. how is allen spamming? Great blog by the way! :D

    ReplyDelete
  16. @Brohan

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

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

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

    http://www.bloggertrix.com/

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

    thank you

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

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

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

    ReplyDelete
  23. I added it on my blog:

    http://we-dotnet.blogspot.com

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

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

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

    ReplyDelete
  26. 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
  27. @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
  28. I added it on my blog:

    http://oneworldblogger.blogspot.com

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

    ReplyDelete
  29. FOR FLOATING FACEBOOK SHARE BUTTON???

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

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