06 August 2011

ShareBar Widget Floating Bar Script

How to Add ShareBar Plugin to your Blog/Website
Originally for WordPress Plugin
SHAREBAR - DEVGROW
Learn about how to add Sharebar into your blog/website. It is Easy, Fast, and No Code Knowledge required. Just put the script and edit CSS. And you can get the same plugin/script with those professional websites like Mashable.

What is Sharebar?

Sharebar is a Floating Bar that has social network buttons, and it floats on the left side vertically -  if you scroll down your page, it will follow floating left except when you are at the top. Sharebar is a simple, professional look and customizable script that adds sharing buttons like TweetMeme, Facebook, Google Buzz, Google +1 Etc. (you can add other buttons here) Sharebar was originally made for WordPress and made by DevGrow. A Plugin that lets the users fully customize it fast and easy in the Plugin Settings Menu. 

When I saw this in Mashable, I was amazed by the effects and thinking to have a copy of it.Then I began to search for this script - yes I got what I want, but it I in WordPress. All I wanted only is to put it on my blog or in a plain HTML(not using CMS). 

Though ShareBar is for WordPress (for all the script even tried this is a simple one), So, I began studying and editing this text. Why not make my script? Nah, i won't have time to review then go like this. Rather making it, i just do editing instead. 

Here I have tested and put it to my blogger.

if you are using WordPress CMS try this:

Wordpress Plugin:
http://downloads.wordpress.org/plugin/sharebar.zip

View Demo:
 http://devgrow.com/plugins/sharebar/ (you can see on the left side of this blog, though)


HOW TO ADD SHAREBAR?

First, you need to put all the scripts between in the section
If you put it in the blogger: go to Design Tab-& it; then clicks Edit Html. (you may check Expand Widgets Templates)

Put these scripts between in the <head> section
Jquery Library Version 1.6.2
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
DevGrow ShareBar JS Function
<script src='http://devgrow.com/wp-content/plugins/sharebar/js/sharebar.js?ver=3.0' type='text/javascript'/>
ShareBar Trigger Function

<script type='text/javascript'>jQuery(document).ready(function($){$(&#39;.sharebar&#39;).sharebar({horizontal:&#39;true&#39;,swidth:&#39;65&#39;,minwidth:1000,position:&#39;left&#39;,leftOffset:20,rightOffset:10});});</script>

CSS CONFIGURATION



<style>
body ul#sharebar {display: block; position: absolute; width: 65px; float: left; top:80px; padding: 0; text-align: center; border: 1px solid #ccc; list-style: none; margin: 0; z-index: 99; }
#pageshare {margin-left:-600px;position:absolute;top:10px; 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>



You can edit some values here

TOP:
body ul#sharebar {display: block; position: absolute; width: 65px; float: left; top:80px; padding: 0; text-align: center; border: 1px solid #ccc; list-style: none; margin: 0; z-index: 99; }

LEFT MARGIN:
CURVE CORNERS
#pageshare {margin-left:-600px;position:absolute;top:10px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}

Those are the codes in the head 

Click Add a Gadget -&gt; choose HTML/JAVASCRIPT
Put your Buttons here



<ul id="sharebar">
<div id='pageshare'>
<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='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'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall"></g:plusone>
<!-- Place this tag after the last plusone tag -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
</div>
</ul>

you may put in anywhere in the Body Section.

For More Information about this script:
http://devgrow.com/sharebar-wordpress-plugin/
Thanks to DevGrow :)

Tested on
  • Mozilla Firefox 4 / has a margin-left space issue, Jquery Animation Issue.
  • Opera 11 / same effect on Chrome
  • Google Chrome 12+/ I configured CSS here.
  • Internet Explorer 7 - has no curve corner. Margin-Left issue.
SOURCES:
http://devgrow.com/sharebar-wordpress-plugin/ (JS SCRIPT)
http://www.bloggersentral.com ( CSS Styles + Buttons)
I added Google+1 here.
=================================================
Head Section:

<!-- BLOGGERIZED BY MABZICLE -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/><script src='http://devgrow.com/wp-content/plugins/sharebar/js/sharebar.js?ver=3.0' type='text/javascript'/>
<script type='text/javascript'>jQuery(document).ready(function($){$(&#39;.sharebar&#39;).sharebar({horizontal:&#39;true&#39;,swidth:&#39;65&#39;,minwidth:1000,position:&#39;left&#39;,leftOffset:20,rightOffset:10});});</script><style>body ul#sharebar {display: block; position: absolute; width: 65px; float: left; top:80px; padding: 0; text-align: center; border: 1px solid #ccc; list-style: none; margin: 0; z-index: 99; }#pageshare {margin-left:-600px;position:absolute;top:10px; 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>
<!-- BLOGGERIZED BY MABZICLE -->
Body Section:
<ul id="sharebar">
<div id='pageshare'>
<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='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'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall"></g:plusone>
<!-- Place this tag after the last plusone tag -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
</div>
</ul>
Advertisement


Featured Offers:
Advertisement