Jul 16, 2011

How To Add A Floating Social Sharing Button To Blogger

H ave you seen the floating share button in Mashable? It’s cool, isn’t it? A blogger should have a s...


Horizon33_2011-7-15_23-26-8

Have you seen the floating share button in Mashable? It’s cool, isn’t it? A blogger should have a social sharing option in his blog. I have tried several ways but none of the suits in my eyes. So I give a search for it. If you are a wordpress user, then you only need to install a simple plug-in in your blog. But what about blogger user? Yeah, there’s no such widget available for blogger. But there’s always some great designers who are working on this sort of things. And that's it! You can easily add a social sharing button list which will float. I am keeping this on my blog and till now it look fine. It uses CSS and some Java Script for sharing counter. No additional Java Script is needed and no JQuery trigger too. So let’s learn how.

Adding Share Floater


1st Login to your Blogger account.
Then Go to Design > Page Elements (Layout in New Blogger Dashborad).
Click On “Add A Gadget”.
Now Select HTML/Javascript.
Horizon33_2011-7-16_0-22-39
Copy the code below and paste it inside the content box.

<!-- floating page sharers Start -->
<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 BloggerSentral.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='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 class='sbutton' id='gb'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'></script>
</a></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>
</a></div>

<!-- floating page sharers End -->
Now Save the gadget.
Drag the gadget and reposition it under Blog Posts gadget.
Click Save button on upper right corner.

That’s it. This includes Facebook Share Button With Counter, Google+ Button With Counter, Tweeter Tweet Button With Counter, Stumbleupon Button With Counter, Digg Button With Counter and Google Buzz Button With Counter.

Customizing

  • Vertical alignment
    Change the value of bottom in code line 2. The code positions the button relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.
  • Horizontal alignment
    Change the value of margin-left in code line 2. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right.
    To position the button relative to the left or right edge of browser window, replace the margin-left with left (as in left:10px;) or right (as in right:10px;) respectively.
  • Replacing and removing buttons
    You can replace existing buttons with your own. Each button is represented by this code:
<div class='sbutton'>
BUTTON CODE
</div>

[Note: All Credits To Greenlava @ Blogger Sentral]

6 comments :

  1. Thanks for this widget..

    ReplyDelete
  2. HI abc trick can i get the code of top fixed social buttons of your website. i like those plzzz :)

    ReplyDelete
  3. Hi Daniyal, we are using a customized version of Way2Blogging's widget. you can find about it in http://goo.gl/OS3Rs
    Thanks

    ReplyDelete
  4. I got this eror
    Error parsing XML, line 1621, column 3: The element type "div" must be terminated by the matching end-tag "".

    ReplyDelete
  5. I'm truly enjoying the design and layout of your site. It's a very easy on the eyes which makes it much more pleasant for me to come here and visit more often.

    ReplyDelete