Spice Up Your Blogger Blog with Custom Designed Templates - BTNT Services!

How to add floating social media (Google +1, Facebook, Twitter, Digg, Stumbleupon) buttons on your blog

On By // 30 comments
UPDATE: I Have Released Updated The Version Of this widget you can get it from here.
Add Pop Out Social Bookmarking Widget with Smooth Jquery Hover Effect.
Why do we need these social media Facebook, Twitter, Google +1, Digg, StumbleUpon buttons? Social media is a great way to drive more traffic to your sites. Get these buttons means that you will have a better chance to make your site become popular.

In this tutorial I will show you the way to add social media buttons on your blog.

Adding Floating Social Media to your WordPress Blog

Since Wordpress the most preferred CMS to create a blog. So, We'll start with how to add social share buttons on your wp blog.

In wordpress we have tones of plugin to add social sharing buttons, but not everything is good. The plugin which I recommend using for this purpose is called SumoMe, it’s a whole suite of tools and it's free. Just install the "Share” app and follow the instruction to add social buttons.

You can get it for free over here: https://sumome.com/app/share

Adding Floating Social Media to your Blogger Blog

To add floating these buttons to your blogger. All you need to do is following these simple steps:

1. Go to Dashboard>Design>Edit HTML and search for <head>
2. Paste this code just below it and save your template. Note: Google +1 button only works when you disable default share buttons in "Blog Posts" widget

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

3. Go to Design>Page Elements, click Add a gadget, then choose HTML/JavaScript

4. Paste this code inside it

<style>#floatingbuttons{background:#F9F9F9;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #F9F9F9));background:-moz-linear-gradient(top, #fff, #F9F9F9);border:1px solid #ccc;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#000;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>

<div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>

<div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div>

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

<div class='floatbutton' id='digg'><a class="DiggThisButton DiggMedium"></a></div>

<div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div>

<div class="addbuttons"><a href="http://www.blogtipsntricks.com/2011/07/how-to-add-floating-social-media-google.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a> </div> </div>

5. Save your widget, refresh your blog. Now you can see the widget.

 <==The left sidebar of this page is an illustration


  1. sir can i adjust the widget closer to the body of my blog post? thanks

  2. yes,you can

    To adjust the width just search for left:0 from the above code and change the 0 to your size

    To adjust the height search for bottom:15% and change 15% to your height

  3. amazing blog and useful information is here.. simply super..keep it up.

  4. another great post thanks dude

  5. thanks man.really nice artical keep it up!!
    this script in a add or remove the digg & other sharing site.

    check this
    digg & stumbleupon button remove

  6. This is a big help! Thank you for sharing it! I added it to my blog...feel free to check it out: www.TheTeacherGarden.blogspot.com.

  7. how to align this thing to right near the scroll bar

  8. Hi, great widget, I've just got one question. Is it possible to modify the Tweet button so it includes my username in the tweet it creates?

  9. Hey man thanks for the widget. I hope I can direct traffic back to you so others can uses your widget as well. Thanks and God bless.

  10. Google +1 now is really helpful on SEO in finland too many SEO guy are putting it to there site.Thanks for posting it in here.

  11. How i I remove this from the home page, i wnat it on ly on the internal pages?

  12. hey there, thanks for the widget
    but I'm wondering, can i make it float only on a certain distance, for example from the top to the bottom of the post on blogger and not further ?

  13. ;-) Excellent - Keep up the Good Work!
    Best wishes From Cornwall, United Kingdom.

  14. Can you add pinterest to the code please?

  15. Really amazing reading. Very informative, thank you

  16. I must say that you are pretty good at blogging and you must need to carry on with this all the time. keep it up.

  17. Thanks for this widget You really helps me...

  18. how to edit this? to become my own links for twitter and FB?

    1. You do not need to edit this Because its social sharing widget. It Just helps your readers to share your articles on your blog with only one click. :)

  19. How to add facebook like button in this.. can u help me out..

    1. The widget already contain a facebook like button. I think you asked this Question due to seeing the Side floating illustration Now I updated my blog's theme. So, The widget in this blog is not the demo. :)

  20. This is my one of favorite widget. I love this as it help me to enhance the beauty of my blog. As well as it help me to have more feedback with the help of social networks.
    Thanks for sharing this wonderful article.

  21. Thank you so much! I have been searching for a widget like this for so long and this is the first that worked the way I wanted it to!

    Keep up the good work!

  22. You can know the way to add floating social media Google. Useful post

  23. I am a new blogger and I want to ask you that how you add html codes in your posts?

    1. Sorry for the late reply, To show the html code on post you've to encode the html code and paste it your post. :)

  24. Thanks for this helpful post, i was realy looking for this awesome widget.

  25. thans for this awesome post, i was really lokking for this amazing widget.


I Appreciate your valuable Feedback. So, Please DO NOT SPAM - Spam comments will be deleted immediately.

Don't use brand name in name field and you're not allowed to use links in comments unless it's necessary

Such Comments will be removed immediately.