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
Advertisement
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

30 comments:

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

    ReplyDelete
  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

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

    ReplyDelete
  4. another great post thanks dude

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

    check this
    http://www.w3mad.blogspot.com/
    digg & stumbleupon button remove

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

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

    ReplyDelete
  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?

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

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

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

    ReplyDelete
  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 ?

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

    ReplyDelete
  14. Can you add pinterest to the code please?

    ReplyDelete
  15. Really amazing reading. Very informative, thank you

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

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

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

    ReplyDelete
    Replies
    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. :)

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

    ReplyDelete
    Replies
    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. :)

      Delete
  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.

    ReplyDelete
  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!

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

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

    ReplyDelete
    Replies
    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. :)

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

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

    ReplyDelete

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.

Thanks,
Chandeep