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.
Add Pop Out Social Bookmarking Widget with Smooth Jquery Hover Effect.
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: 'en-US'} </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>
<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.
sir can i adjust the widget closer to the body of my blog post? thanks
ReplyDeleteyes,you can
ReplyDeleteTo 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
amazing blog and useful information is here.. simply super..keep it up.
ReplyDeleteanother great post thanks dude
ReplyDeletethanks man.really nice artical keep it up!!
ReplyDeletethis script in a add or remove the digg & other sharing site.
check this
http://www.w3mad.blogspot.com/
digg & stumbleupon button remove
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.
ReplyDeletehow to align this thing to right near the scroll bar
ReplyDeleteHi, 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?
ReplyDeleteHey 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.
ReplyDeleteGoogle +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.
ReplyDeleteHow i I remove this from the home page, i wnat it on ly on the internal pages?
ReplyDeletehey there, thanks for the widget
ReplyDeletebut 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 ?
@Bhavika
ReplyDeleteYou can check out this post to hide this widget from home page.
How to Show and Hide Blogger Widgets On Certain Pages?
;-) Excellent - Keep up the Good Work!
ReplyDeleteBest wishes From Cornwall, United Kingdom.
Thanks for the comment
ReplyDeleteCan you add pinterest to the code please?
ReplyDeleteReally amazing reading. Very informative, thank you
ReplyDeleteI must say that you are pretty good at blogging and you must need to carry on with this all the time. keep it up.
ReplyDeleteThanks for this widget You really helps me...
ReplyDeletehow to edit this? to become my own links for twitter and FB?
ReplyDeleteYou 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. :)
DeleteHow to add facebook like button in this.. can u help me out..
ReplyDeleteThe 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. :)
DeleteThis 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.
ReplyDeleteThanks for sharing this wonderful article.
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!
ReplyDeleteKeep up the good work!
You can know the way to add floating social media Google. Useful post
ReplyDeleteI am a new blogger and I want to ask you that how you add html codes in your posts?
ReplyDeleteSorry for the late reply, To show the html code on post you've to encode the html code and paste it your post. :)
DeleteThanks for this helpful post, i was realy looking for this awesome widget.
ReplyDeletethans for this awesome post, i was really lokking for this amazing widget.
ReplyDelete