April 9, 2011

Widgets

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 »

55 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. well this did not work for me buddy, i tried this on my blog www.webprogrammingscripts.blogspot.com, i added the code properly in html/javascript widget, but ur retweet button takes me to the error as given below

    "TweetMeme Button Error - Invalid
    An example of a TweetMeme button with an error, A TweetMeme button with an error

    This TweetMeme button is pointing at a URL that has an invalid structure."

    what should i do to solve this, is there code failure some where, please guide me at earliest.

    thanks

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

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

    ReplyDelete
  17. @Brohan

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

    ReplyDelete
  18. its help full sharing, i like it sir, hope that every one will like this and you will keep it up
    Webmaster Tools

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

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

    http://www.bloggertrix.com/

    ReplyDelete
  21. Hi.. nice tutorial.. i have a tutorial a bit similar to this but it's about using static image buttons.

    ReplyDelete
  22. I wish I can add the floating sharebar in my wordpress blog without having javascript problem. Gladly, it works with blogspot.

    ReplyDelete
  23. Hi, man!
    How can I have this widget without having a twitter account?
    I did what you said in the tutorial, but what appeared in my blog was just a deformed twitter button.

    Thanks!

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

    thank you

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

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

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

    ReplyDelete
  28. I added it on my blog:

    http://we-dotnet.blogspot.com

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

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

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

    ReplyDelete
  31. 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
  32. @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
  33. I added it on my blog:

    http://oneworldblogger.blogspot.com

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

    ReplyDelete
  34. UPDATED CODE:IN CASE THE ABOVE CODE DON'T WORK FOR YOU


    <div style="display:scroll; position:fixed; top:40%; left:2%; padding:0px 0px 0px 5px; height:230px; width:53px ">
    <table cellpadding="1px" cellspacing="0">
    <tr>
    <td style="padding:5px 0 2px 0;">
    <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=267341659960795&amp;xfbml=1"></script><fb:like href="http://www.facebook.com/pages/One-World-Internet/276646509017063" send="false" layout="box_count" show_faces="false" font=""></fb:like>
    </td>
    </tr>
    <tr>
    <td style="padding:5px 0 0px 0;">
    <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="a_rafay2010">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>
    </tr>
    <tr>
    <td style="padding:5px 0px;">
    <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
    </td></tr></table></div>


    REPLACE MY TWITTER AND FACEBOOK TO YOUR USER NAME AND ID.
    change this code to html back because it was converted with HTML encoder
    THAnKS

    ReplyDelete
  35. @abdulrafay

    thanks abdulrafay for your updated code its help me lots. you can see my blog

    ReplyDelete
  36. FOR FLOATING FACEBOOK SHARE BUTTON???

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

    ReplyDelete
  38. http://cinemaleak.blogspot.com/2012/01/topless-sunny-leone-in-saree.html
    http://cinemaleak.blogspot.com/2012/01/priya-new-hot-and-cute-pics-latest.html
    http://cinemaleak.blogspot.com/2012/01/topless-hot-pics-of-gabriella-fhm.html
    http://cinemaleak.blogspot.com/2012/01/topless-sunny-leone-in-saree.html
    http://cinemaleak.blogspot.com/2012/01/aishwarya-priyanka-in-dabboo-ratnani.html
    http://cinemaleak.blogspot.com/2012/01/malaika-arora-at-launch-of-sunsilk.html
    http://cinemaleak.blogspot.com/2012/01/diya-mirza-at-filmfare-nominations-bash.html
    http://cinemaleak.blogspot.com/2012/01/bipasha-basu-in-dabboo-ratnanis.html
    http://cinemaleak.blogspot.com/2012/01/katrina-kaif-louis-vuitton-fall.html
    http://cinemaleak.blogspot.com/2012/01/esha-gupta-top-less-on-femina-issue.html
    http://cinemaleak.blogspot.com/2012/01/topless-sunny-leone-in-saree.html
    http://cinemaleak.blogspot.com/2012/01/priya-new-hot-and-cute-pics-latest.html
    http://cinemaleak.blogspot.com/2012/01/topless-hot-pics-of-gabriella-fhm.html
    http://cinemaleak.blogspot.com/2012/01/topless-sunny-leone-in-saree.html
    http://cinemaleak.blogspot.com/2012/01/aishwarya-priyanka-in-dabboo-ratnani.html
    http://cinemaleak.blogspot.com/2012/01/malaika-arora-at-launch-of-sunsilk.html
    http://cinemaleak.blogspot.com/2012/01/diya-mirza-at-filmfare-nominations-bash.html
    http://cinemaleak.blogspot.com/2012/01/bipasha-basu-in-dabboo-ratnanis.html
    http://cinemaleak.blogspot.com/2012/01/katrina-kaif-louis-vuitton-fall.html
    http://cinemaleak.blogspot.com/2012/01/esha-gupta-top-less-on-femina-issue.html
    http://cinemaleak.blogspot.com/2012/01/topless-sunny-leone-in-saree.html
    http://cinemaleak.blogspot.com/2012/01/priya-new-hot-and-cute-pics-latest.html
    http://cinemaleak.blogspot.com/2012/01/topless-hot-pics-of-gabriella-fhm.html
    http://cinemaleak.blogspot.com/2012/01/topless-sunny-leone-in-saree.html
    http://cinemaleak.blogspot.com/2012/01/aishwarya-priyanka-in-dabboo-ratnani.html
    http://cinemaleak.blogspot.com/2012/01/malaika-arora-at-launch-of-sunsilk.html
    http://cinemaleak.blogspot.com/2012/01/diya-mirza-at-filmfare-nominations-bash.html
    http://cinemaleak.blogspot.com/2012/01/bipasha-basu-in-dabboo-ratnanis.html
    http://cinemaleak.blogspot.com/2012/01/katrina-kaif-louis-vuitton-fall.html
    http://cinemaleak.blogspot.com/2012/01/esha-gupta-top-less-on-femina-issue.html
    http://cinemaleak.blogspot.com/2012/01/topless-sunny-leone-in-saree.html
    http://cinemaleak.blogspot.com/2012/01/priya-new-hot-and-cute-pics-latest.html
    http://cinemaleak.blogspot.com/2012/01/topless-hot-pics-of-gabriella-fhm.html
    http://cinemaleak.blogspot.com/2012/01/topless-sunny-leone-in-saree.html
    http://cinemaleak.blogspot.com/2012/01/aishwarya-priyanka-in-dabboo-ratnani.html
    http://cinemaleak.blogspot.com/2012/01/malaika-arora-at-launch-of-sunsilk.html
    http://cinemaleak.blogspot.com/2012/01/diya-mirza-at-filmfare-nominations-bash.html
    http://cinemaleak.blogspot.com/2012/01/bipasha-basu-in-dabboo-ratnanis.html
    http://cinemaleak.blogspot.com/2012/01/katrina-kaif-louis-vuitton-fall.html
    http://cinemaleak.blogspot.com/2012/01/esha-gupta-top-less-on-femina-issue.html
    http://cinemaleak.blogspot.com/2012/01/topless-sunny-leone-in-saree.html
    http://cinemaleak.blogspot.com/2012/01/priya-new-hot-and-cute-pics-latest.html
    http://cinemaleak.blogspot.com/2012/01/topless-hot-pics-of-gabriella-fhm.html
    http://cinemaleak.blogspot.com/2012/01/topless-sunny-leone-in-saree.html
    http://cinemaleak.blogspot.com/2012/01/aishwarya-priyanka-in-dabboo-ratnani.html
    http://cinemaleak.blogspot.com/2012/01/malaika-arora-at-launch-of-sunsilk.html
    http://cinemaleak.blogspot.com/2012/01/diya-mirza-at-filmfare-nominations-bash.html
    http://cinemaleak.blogspot.com/2012/01/bipasha-basu-in-dabboo-ratnanis.html
    http://cinemaleak.blogspot.com/2012/01/katrina-kaif-louis-vuitton-fall.html
    http://cinemaleak.blogspot.com/2012/01/esha-gupta-top-less-on-femina-issue.html

    ReplyDelete
  39. novelsandmovies.blogspot.com

    ReplyDelete
  40. Thank you for your tutorial, I have added it to my blog but what was show is the tweeter button only, no facebook button, i guess fb does not support this any more pls update. thanks.

    Regards,
    Top 10 tourist Spots in the Philippines

    ReplyDelete
  41. Thanks Mohd.. I have applied it to my blog but tweaked it & it gives excellent result. Also, provided with complete graphical presentation "How to DIY". I have also solved the problem of not having Like Page ID. Have a look at my Blog & let me know what do you think of the same.

    http://www.yourbloggingtips.com/2012/03/facebook-like-box-widget-for-blogger.html

    ReplyDelete
  42. hello this my comment On this blog.Mashable tricks

    ReplyDelete
  43. 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
  44. Hey buddy I got very new kind of floating share widget here. Its Wall Street Journal's blog

    http://blogs.wsj.com/indiarealtime/2012/06/08/review-round-up-shanghai-is-the-place-to-be/

    Can you make one like this with just FB recommend, Tweet, G+
    please give it a try... Everyone will appreciate..Thanks in advance.

    ReplyDelete
  45. Can you tell me how can I add the Floating sidebar share button in blogger posts. Like you have done. Can you please provide us that code.

    http://www.salmanfanclub.org

    ReplyDelete
  46. 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
  47. This is very useful post for me and it helps me a lot. Thank you so much for this and have a great time..

    by ACC 290 Final Exam Guide

    ReplyDelete

Support Us

We have educated thousands of bloggers online and made several people Make a living Online. If our Tutorials have really helped you a little, then kindly show your love by using the badge below:-

Blogger Widgets

or try a Beautiful Banner

Widgets

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. STC Network was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..

Recipes

SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics

Subscribe

Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |