It's a faith in technology.

Floating social media sharing buttons for Blogger

Share on :
Accordance with my promise to my readers, I am providing a tutorial on how to add a Mashable-like floating bar of social media buttons to a Blogger blog (or a Word Press blog or just for any website). From now you will not have to go into your template HTML to install (or remove) them as I have made it, using widget. Only you have to drop the whole code into a HTML/JavaScript gadget.

I also have included Face book Share, Retweet, Stumble Upon, Digg and Google +1 (plus one) buttons in the bar. Each of them comes with a live counter. The corners of Face book Share button and counter are rounded to blend with the rest of the buttons i.e. it will not work in Internet Explorer .Suppose later if you want to add more social bookmarking or sharing buttons, you can also do that.


<!-- floating page sharers Start www.blogtechworld.com-->
<style>
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Get this from blogtechworld.com">
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.blogtechworld.com/2011/10/floating-social-media-sharing-buttons.html">Add this</a></div>
<!-- floating page sharers End --></div>

Copy Give code and Don't Change it.

Layout>Add a Gadget>HTML/JavaScript (Copy given code below and Paste it)

Note :- If Your Social Media Shearing Button Not Showing on Proper Place
Search margin-left:-250px and Change Numeric Value to Move on Proper Place.

Save and Enjoy............

5 comments on Floating social media sharing buttons for Blogger :

rockhyvez said... November 6, 2011 at 10:02 PM

awesome script man, thanks, but how can i close this, it is permanently in web page!, can you add a close button for that.thanks

Admin said... November 6, 2011 at 10:14 PM

Add this code just after body tag in your web page

john said... February 23, 2012 at 7:40 AM

When i try this code widget comes to center of the page on my blog. what should i do now?

Admin said... February 23, 2012 at 9:57 PM

@John Search Code margin-left:-71px; in the 3rd row from the top and Change Numeric Value 71 to 250 or Increase and Decries to set the position.

R.S. Mallari said... May 1, 2012 at 4:03 AM

How can I change the share button with a like button?

Post a Comment and Don't Spam!

Thanks For Your Comment. You can also reach me at my mai Id :- blogtips.frd@gmail.com

 

Receive all updates via Facebook. Just Click the Like Button Below

You can also receive Free Email Updates: