Mashable like Share Buttons using Socialite and Sharrre

Mashable share buttons
Mashable-like Share Buttons Widget. This widget mimics the design and functionality of the social media buttons of Mashable.com . It uses Sharrre jQuery plugin for getting the counts for various social Networks and Socialite for asynchronously loading the buttons. The Sharrre plugin has been modified a bit to return values inside a data- attribute . Also unlike Mashable , a single hover event triggers all the buttons to be loaded so that the user doesn't have to hover over each button to make them load.



Download Demo


HTML
<ul class="social" >
        <li>
            <a class="social-stub twitter socialite twitter-share" data-shares="..." data-via="YourHandle" data-text="Google" data-url="http://www.google.com"    data-count="horizontal" rel="nofollow" target="_blank">&nbsp;&nbsp;Tweet</a>
        </li>
        <li>
            <a class="social-stub googlepluss socialite googleplus-one" data-size="medium" data-href="http://www.google.com/" data-url="http://www.google.com/" data-shares="..."  rel="nofollow" target="_blank">+1</a>
        </li>
        <li>
            <a class="social-stub facebook socialite facebook-like" data-shares="..." data-href="http://www.google.com/" data-url="http://www.google.com/" data-send="false" data-layout="button_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank">Like</a>
        </li>
        <li>
            <a class="social-stub linkedin socialite linkedin-share" data-shares="..."  data-url="http://www.google.com/" data-counter="right" rel="nofollow" target="_blank">&nbsp;&nbsp;Share</a>
        </li>
     
    </ul><br/>

A bit overcrowded with classes but required for both plugins to work. Also the data-url attribute would be required for Google+ and Facebook for them to load the buttons for specific page. Also &nbsp; is used to separate the Text in the button from the background. data-shares attribute is where the value of count is returned.

CSS
.social { display: block; list-style: none; padding: 0;  }
.social > li { display: block; margin: 0; padding: 10px; float: left; }
.social .socialite-loaded { background: none !important; }
.social-stub.googlepluss {
background: white url('http://2.bp.blogspot.com/-AK-r9xVSKkg/UDUSxcYWX3I/AAAAAAAAHRY/BFC9-uzWRsU/s1600/white_googleplus.png') 0 bottom no-repeat;
background: url('http://2.bp.blogspot.com/-AK-r9xVSKkg/UDUSxcYWX3I/AAAAAAAAHRY/BFC9-uzWRsU/s1600/white_googleplus.png') 0 bottom no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#fff),color-stop(100%,#f0f0f0));
color: #db583b;
text-shadow: white -1px 1px;
border-color: #e3e3e3;
font-family: arial,sans-serif;
font-weight: bold;
font-size: 13px;
}
.social-stub.linkedin {
color: #666;
text-shadow: white -1px 1px;
background: #fefefe url('http://3.bp.blogspot.com/-lrtvd9XTno8/UDWukOcXjPI/AAAAAAAAHSM/-KQWSFF5ZRI/s1600/linkedinss.png') 0 -1px no-repeat;
background: url('http://3.bp.blogspot.com/-lrtvd9XTno8/UDWukOcXjPI/AAAAAAAAHSM/-KQWSFF5ZRI/s1600/linkedinss.png') 0 -1px no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#fefefe),color-stop(100%,#ededec));
border-color: #dbe3ef;
} 
.social-stub.twitter {
color: #3e8399!important;
text-shadow: white -1px 1px;
background: #f6fafd url('http://1.bp.blogspot.com/-8FY8zm2A7DM/UDUSwgIwZFI/AAAAAAAAHRQ/A8WaC4m8BYE/s1600/blue_twitter_bird.png') -2px center no-repeat;
background: url('http://1.bp.blogspot.com/-8FY8zm2A7DM/UDUSwgIwZFI/AAAAAAAAHRQ/A8WaC4m8BYE/s1600/blue_twitter_bird.png') -2px center no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#f6fafd),color-stop(100%,#dbecf2));
border-color: #c8e2eb;
}
.social-stub.facebook {
background: #edf1f7 url('http://2.bp.blogspot.com/-FidAw97vfNE/UDUSwKCMzpI/AAAAAAAAHRM/R7uUq2uogPk/s1600/blue_facebook.png') -4px center no-repeat;
color: #4a68a2;
background: url('http://2.bp.blogspot.com/-FidAw97vfNE/UDUSwKCMzpI/AAAAAAAAHRM/R7uUq2uogPk/s1600/blue_facebook.png') -4px center no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#edf1f7),color-stop(100%,#dbe3ef));
border-color: #cad6e7;
}
ul.social li:nth-child(n+2) > a {margin-left: 47px;}
.social-stub {
width: 61px;
height: 23px;
display: inline-block;
border: 1px solid black;
position: relative;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
text-decoration: none!important;
transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-webkit-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
background-position: left center;
background-repeat: no-repeat;
font-size: 11px;
font-family: Tahoma,Geneva,sans-serif;
line-height: 24px;
text-align: center;
} 
.social-stub::before {
top: -2px;
bottom: auto;
height: 20px;
width: 34px;
left: 100%;
margin-left: 6px;
line-height: 20px;
content: attr(data-shares);
display: inline;
padding:1px 5px;
border: 1px solid #E2E3E4;
position: absolute;
top: -1px;
left: 61px;
height:19px;
width: auto;
white-space: nowrap;
color: #777;
z-index: 10;
-moz-border-radius-bottomleft: 2px;
-webkit-border-bottom-left-radius: 2px;
-ms-border-bottom-left-radius: 2px;
-o-border-bottom-left-radius: 2px;
border-bottom-left-radius: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-bottom-right-radius: 2px;
-ms-border-bottom-right-radius: 2px;
-o-border-bottom-right-radius: 2px;
border-bottom-right-radius: 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
font-family: arial,sans-serif;
font-size: 12px!important;
text-align: center;
text-indent: 0;
}
.social-stub::after {
content: "";
width: 5px;
height: 9px;
background: url(http://1.bp.blogspot.com/-TJOtb5GjrAk/UDUU0I99zbI/AAAAAAAAHRw/Oyf9lOfPDlM/s1600/bubble-pip.png) left center no-repeat;
position: absolute;
top: 5px;
left: 100%;
margin-left: 2px;
z-index: 15;
}

JavaScript
<script   src="socialite.js" ></script>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script  src="sharrre.js" ></script>
<script>
$(document).ready(function()
 {

  $('.social').one('mouseenter', function()
  {
   Socialite.load($(this)[0]);
  });

 });

$('.twitter').sharrre({
  share: {
    twitter: true
  },
  enableHover: false,
  enableTracking: true,
  buttons: { twitter: {via: '_JulienH'}},
  click: function(api, options){
    api.simulateClick();
    api.openPopup('twitter');
  }
});
$('.facebook').sharrre({
  share: {
    facebook: true
  },
  enableHover: false,
  enableTracking: true,
  click: function(api, options){
    api.simulateClick();
    api.openPopup('facebook');
  }
});
$('.googlepluss').sharrre({
  share: {
    googlePlus: true
  },
  enableHover: false,
  enableTracking: true,
  click: function(api, options){
    api.simulateClick();
    api.openPopup('googlePlus');
  }
});
$('.linkedin').sharrre({
  share: {
    linkedin: true
  },
  enableHover: false,
  enableTracking: true,
  click: function(api, options){
    api.simulateClick();
    api.openPopup('Linkedin');
  }
});

</script>

The initial JavaScript (Line 4 onwards) loads the buttons on a Mouse Hover event. The rest is configuration for Sharrre plugin. Here one thing to note is that currently as there is no Public API for Google+ so it is not possible to get the +1 count using JavaScript alone. For that Sharrre plugin requires that you put the sharrre.php file in the root of your website. In case you have no server , then no way to get +1 count till the API is released.

For Blogger users

Video Tutorial

Step by Step Guide

1. In the Blogger Dashboard , go to Template > Edit HTML and tick the Expand Widget preview

2. Now search for <div class='post-header-line-1'/> and add the following HTML after it

<ul class="social" >
        <li>
            <a class="social-stub twitter socialite twitter-share" data-shares="..." data-via="YourTwitterHandle" expr:data-text='data:post.title' expr:data-url='data:post.url' data-count="horizontal"  target="_blank" >&amp;nbsp;&amp;nbsp;Tweet</a>
        </li>
        <li>
            <a class="social-stub googlepluss socialite googleplus-one" data-shares="..." data-size="medium" expr:data-href='data:post.url' expr:data-url='data:post.url' target="_blank">+1</a>
        </li>
        <li>
            <a  class="social-stub facebook socialite facebook-like" data-shares="..."  expr:data-href='data:post.url' expr:data-url='data:post.url' data-send="false" data-layout="button_count" data-width="60" data-show-faces="false" target="_blank">Like</a>
        </li>
        <li>
            <a class="social-stub linkedin socialite linkedin-share"  data-shares="..."  expr:data-url='data:post.url' data-counter="right" target="_blank">&amp;nbsp;&amp;nbsp;Share</a>
        </li>
    </ul>


Note: Insert two <br/> after this code

3. Now search for ]]></b:skin> tag and add the following CSS just before it

.social { display: block; list-style: none; padding: 0;  }
.social > li { display: block; margin: 0; padding: 10px; float: left; }
.social .socialite-loaded { background: none !important; }
.social-stub.googlepluss {
background: white url('http://2.bp.blogspot.com/-AK-r9xVSKkg/UDUSxcYWX3I/AAAAAAAAHRY/BFC9-uzWRsU/s1600/white_googleplus.png') 0 bottom no-repeat;
background: url('http://2.bp.blogspot.com/-AK-r9xVSKkg/UDUSxcYWX3I/AAAAAAAAHRY/BFC9-uzWRsU/s1600/white_googleplus.png') 0 bottom no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#fff),color-stop(100%,#f0f0f0));
color: #db583b;
text-shadow: white -1px 1px;
border-color: #e3e3e3;
font-family: arial,sans-serif;
font-weight: bold;
font-size: 13px;
}
.social-stub.linkedin {
color: #666;
text-shadow: white -1px 1px;
background: #fefefe url('http://3.bp.blogspot.com/-lrtvd9XTno8/UDWukOcXjPI/AAAAAAAAHSM/-KQWSFF5ZRI/s1600/linkedinss.png') 0 -1px no-repeat;
background: url('http://3.bp.blogspot.com/-lrtvd9XTno8/UDWukOcXjPI/AAAAAAAAHSM/-KQWSFF5ZRI/s1600/linkedinss.png') 0 -1px no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#fefefe),color-stop(100%,#ededec));
border-color: #dbe3ef;
} 
.social-stub.twitter {
color: #3e8399!important;
text-shadow: white -1px 1px;
background: #f6fafd url('http://1.bp.blogspot.com/-8FY8zm2A7DM/UDUSwgIwZFI/AAAAAAAAHRQ/A8WaC4m8BYE/s1600/blue_twitter_bird.png') -2px center no-repeat;
background: url('http://1.bp.blogspot.com/-8FY8zm2A7DM/UDUSwgIwZFI/AAAAAAAAHRQ/A8WaC4m8BYE/s1600/blue_twitter_bird.png') -2px center no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#f6fafd),color-stop(100%,#dbecf2));
border-color: #c8e2eb;
}
.social-stub.facebook {
background: #edf1f7 url('http://2.bp.blogspot.com/-FidAw97vfNE/UDUSwKCMzpI/AAAAAAAAHRM/R7uUq2uogPk/s1600/blue_facebook.png') -4px center no-repeat;
color: #4a68a2;
background: url('http://2.bp.blogspot.com/-FidAw97vfNE/UDUSwKCMzpI/AAAAAAAAHRM/R7uUq2uogPk/s1600/blue_facebook.png') -4px center no-repeat,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#edf1f7),color-stop(100%,#dbe3ef));
border-color: #cad6e7;
}
ul.social li:nth-child(n+2) > a {margin-left: 47px;}
.social-stub {
width: 61px;
height: 23px;
display: inline-block;
border: 1px solid black;
position: relative;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
text-decoration: none!important;
transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-webkit-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
background-position: left center;
background-repeat: no-repeat;
font-size: 11px;
font-family: Tahoma,Geneva,sans-serif;
line-height: 24px;
text-align: center;
} 
.social-stub::before {
top: -2px;
bottom: auto;
height: 20px;
width: 34px;
left: 100%;
margin-left: 6px;
line-height: 20px;
content: attr(data-shares);
display: inline;
padding:1px 5px;
border: 1px solid #E2E3E4;
position: absolute;
top: -1px;
left: 61px;
height:19px;
width: auto;
white-space: nowrap;
color: #777;
z-index: 10;
-moz-border-radius-bottomleft: 2px;
-webkit-border-bottom-left-radius: 2px;
-ms-border-bottom-left-radius: 2px;
-o-border-bottom-left-radius: 2px;
border-bottom-left-radius: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-bottom-right-radius: 2px;
-ms-border-bottom-right-radius: 2px;
-o-border-bottom-right-radius: 2px;
border-bottom-right-radius: 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
font-family: arial,sans-serif;
font-size: 12px!important;
text-align: center;
text-indent: 0;
}
.social-stub::after {
content: "";
width: 5px;
height: 9px;
background: url(http://1.bp.blogspot.com/-TJOtb5GjrAk/UDUU0I99zbI/AAAAAAAAHRw/Oyf9lOfPDlM/s1600/bubble-pip.png) left center no-repeat;
position: absolute;
top: 5px;
left: 100%;
margin-left: 2px;
z-index: 15;
}


4. Lastly Search for </body> and paste the following code just before it.

<script src="https://stylifyyourblog1.googlecode.com/svn/trunk/socialite.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}(';(4($,g,h,i){l j=\'28\',2d={2R:\'28\',Q:{K:D,C:D,x:D,G:D,p:D,H:D,I:D,A:D},26:0,1e:\'\',19:\'\',3:h.2N.1k,w:h.19,1u:\'28.2Y\',z:{},1p:0,1s:r,2Z:r,30:r,23:D,22:4(){},34:4(){},1P:4(){},2o:4(){},8:{K:{3:\'\',17:D,1l:\'35\',11:\'38-3y\',2c:\'\'},C:{3:\'\',17:D,T:\'1E\',Z:\'3V\',F:\'\',1y:\'D\',2u:\'D\',2q:\'\',1A:\'\',11:\'3D\'},x:{3:\'\',17:D,z:\'39\',2f:\'\',15:\'\',1I:\'\',11:\'38\'},G:{3:\'\',17:D,O:\'41\'},p:{3:\'\',17:D,1l:\'35\'},H:{3:\'\',17:D,Z:\'1\'},I:{3:\'\',17:D,24:\'\'},A:{3:\'\',1B:\'\',1r:\'\',Z:\'39\'}}},1o={K:"",C:"P://4B.C.o/?1W={3}&1z=?",x:"P://3W.3Z.x.o/1/40/z.3e?3={3}&1z=?",G:"P://46.G.o/2.0/4a.4c?4e={3}&O=1c&1z=?",p:\'P://4V.p.o/51/3e/3q/m?3={3}&1z=?\',H:"",I:"P://1g.I.o/3E/z/Q?3N=3O&3={3}&1z=?",A:""},3a={K:4(b){l c=b.6.8.K;$(b.q).W(\'.8\').Y(\'<n L="S 4i"><n L="g-1D" m-1l="\'+c.1l+\'" m-1k="\'+(c.3!==\'\'?c.3:b.6.3)+\'" m-2c="\'+c.2c+\'"></n></n>\');g.4T={11:b.6.8.K.11};l d=0;9(y 36===\'E\'&&d==0){d=1;(4(){l a=h.1b(\'N\');a.O=\'w/1c\';a.1m=r;a.16=\'//3Y.32.o/X/1D.X\';l s=h.1d(\'N\')[0];s.1a.18(a,s)})()}J{36.1D.4d()}},C:4(c){l e=c.6.8.C;$(c.q).W(\'.8\').Y(\'<n 1W="1L-4m"></n><n L="S C"><n L="1L-1E" m-1k="\'+(e.3!==\'\'?e.3:c.6.3)+\'" m-1y="\'+e.1y+\'" m-Z="\'+e.Z+\'" m-F="\'+e.F+\'" m-4n-2u="\'+e.2u+\'" m-T="\'+e.T+\'" m-2q="\'+e.2q+\'" m-1A="\'+e.1A+\'" m-15="\'+e.15+\'"></n></n>\');l f=0;9(y 1f===\'E\'&&f==0){f=1;(4(d,s,a){l b,2g=d.1d(s)[0];9(d.4Y(a)){1w}b=d.1b(s);b.1W=a;b.16=\'//55.C.5d/\'+e.11+\'/3g.X#3l=1\';2g.1a.18(b,2g)}(h,\'N\',\'C-3m\'))}J{1f.3n.3o()}},x:4(b){l c=b.6.8.x;$(b.q).W(\'.8\').Y(\'<n L="S x"><a 1k="1C://x.o/Q" L="x-Q-S" m-3="\'+(c.3!==\'\'?c.3:b.6.3)+\'" m-z="\'+c.z+\'" m-w="\'+b.6.w+\'" m-15="\'+c.15+\'" m-2f="\'+c.2f+\'" m-1I="\'+c.1I+\'" m-11="\'+c.11+\'">3u</a></n>\');l d=0;9(y 2n===\'E\'&&d==0){d=1;(4(){l a=h.1b(\'N\');a.O=\'w/1c\';a.1m=r;a.16=\'//1R.x.o/1V.X\';l s=h.1d(\'N\')[0];s.1a.18(a,s)})()}J{$.3F({3:\'//1R.x.o/1V.X\',3G:\'N\',3I:r})}},G:4(a){l b=a.6.8.G;$(a.q).W(\'.8\').Y(\'<n L="S G"><a L="3J \'+b.O+\'" 3K="3L 3M" 1k="P://G.o/2X?3=\'+U((b.3!==\'\'?b.3:a.6.3))+\'"></a></n>\');l c=0;9(y 3P===\'E\'&&c==0){c=1;(4(){l s=h.1b(\'2W\'),1Z=h.1d(\'2W\')[0];s.O=\'w/1c\';s.1m=r;s.16=\'//1V.G.o/8.X\';1Z.1a.18(s,1Z)})()}},p:4(a){9(a.6.8.p.1l==\'3X\'){l b=\'F:20;\',21=\'B:2S;F:20;1A-1l:42;1q-B:2S;\',25=\'B:2P;1q-B:2P;27-5n:1K;\'}J{l b=\'F:4h;\',21=\'2a:4j;2b:0 1K;B:1x;F:4u;1q-B:1x;\',25=\'2a:4v;B:1x;1q-B:1x;\'}l c=a.1s(a.6.z.p);9(y c==="E"){c=0}$(a.q).W(\'.8\').Y(\'<n L="S p"><n 1M="\'+b+\'1A:4C 4G,4I,4J-4L;4N:4P;1N:#4U;2K:4X-3f;2a:2J;B:1x;1q-B:52;27:0;2b:0;w-53:0;54-2h:57;">\'+\'<n 1M="\'+21+\'2I-1N:#2G;27-3h:3i;3j:3k;w-2h:2F;1S:2C 2B #3p;1S-2A:1K;">\'+c+\'</n>\'+\'<n 1M="\'+25+\'2K:3f;2b:0;w-2h:2F;w-3r:2J;F:20;2I-1N:#3s;1S:2C 2B #3t;1S-2A:1K;1N:#2G;">\'+\'<2y 16="P://1g.p.o/3v/2y/p.3w.3x" B="10" F="10" 3z="3A" /> 3B</n></n></n>\');$(a.q).W(\'.p\').3C(\'1P\',4(){a.2x(\'p\')})},H:4(b){l c=b.6.8.H;$(b.q).W(\'.8\').Y(\'<n L="S H"><2T:2t Z="\'+c.Z+\'" 2N="\'+(c.3!==\'\'?c.3:b.6.3)+\'"></2T:2t></n>\');l d=0;9(y 1Q===\'E\'&&d==0){d=1;(4(){l a=h.1b(\'N\');a.O=\'w/1c\';a.1m=r;a.16=\'//1R.H.o/1/1V.X\';l s=h.1d(\'N\')[0];s.1a.18(a,s)})();s=g.3H(4(){9(y 1Q!==\'E\'){1Q.2w();2s(s)}},2r)}J{1Q.2w()}},I:4(b){l c=b.6.8.I;$(b.q).W(\'.8\').Y(\'<n L="S I"><n O="2p/Q" m-3="\'+(c.3!==\'\'?c.3:b.6.3)+\'" m-24="\'+c.24+\'"></N></n>\');l d=0;9(y g.2z===\'E\'&&d==0){d=1;(4(){l a=h.1b(\'N\');a.O=\'w/1c\';a.1m=r;a.16=\'//1R.I.o/2p.X\';l s=h.1d(\'N\')[0];s.1a.18(a,s)})()}J{g.2z.1U()}},A:4(b){l c=b.6.8.A;$(b.q).W(\'.8\').Y(\'<n L="S A"><a 1k="P://A.o/1T/2m/S/?3=\'+(c.3!==\'\'?c.3:b.6.3)+\'&1B=\'+c.1B+\'&1r=\'+c.1r+\'" L="1T-3Q-S" z-Z="\'+c.Z+\'">3R 3S</a></n>\');(4(){l a=h.1b(\'N\');a.O=\'w/1c\';a.1m=r;a.16=\'//3T.A.o/X/3U.X\';l s=h.1d(\'N\')[0];s.1a.18(a,s)})()}},2D={K:4(){},C:4(){1L=g.2E(4(){9(y 1f!==\'E\'){1f.2k.2j(\'2H.2m\',4(a){1h.1i([\'1j\',\'C\',\'1E\',a])});1f.2k.2j(\'2H.43\',4(a){1h.1i([\'1j\',\'C\',\'44\',a])});1f.2k.2j(\'45.1y\',4(a){1h.1i([\'1j\',\'C\',\'1y\',a])});2s(1L)}},2L)},x:4(){2M=g.2E(4(){9(y 2n!==\'E\'){2n.48.49(\'1J\',4(a){9(a){1h.1i([\'1j\',\'x\',\'1J\'])}});2s(2M)}},2L)},G:4(){},p:4(){},H:4(){},I:4(){4 4b(){1h.1i([\'1j\',\'I\',\'Q\'])}},A:4(){}},2O={K:4(a){g.14("1C://1D.32.o/2Q/+1/4f?4g="+a.8.K.11+"&3="+U((a.8.K.3!==\'\'?a.8.K.3:a.3)),"","13=0, 1H=0, F=2v, B=2r")},C:4(a){g.14("P://1g.C.o/4k.2Y?u="+U((a.8.C.3!==\'\'?a.8.C.3:a.3))+"&t="+a.w+"","","13=0, 1H=0, F=2v, B=2r")},x:4(a){g.14("1C://x.o/4l/1J?w="+U(a.w)+"&3="+U((a.8.x.3!==\'\'?a.8.x.3:a.3))+(a.8.x.15!==\'\'?\'&15=\'+a.8.x.15:\'\'),"","13=0, 1H=0, F=2U, B=2V")},G:4(a){g.14("P://G.o/4o/4p/2X?3="+U((a.8.G.3!==\'\'?a.8.G.3:a.3))+"&19="+a.w+"&1I=r&1M=r","","13=0, 1H=0, F=2U, B=2V")},p:4(a){g.14(\'P://1g.p.o/4q?v=5&4r&4s=4t&3=\'+U((a.8.p.3!==\'\'?a.8.p.3:a.3))+\'&19=\'+a.w,\'p\',\'13=1F,F=1n,B=1n\')},H:4(a){g.14(\'P://1g.H.o/2t/?3=\'+U((a.8.p.3!==\'\'?a.8.p.3:a.3)),\'H\',\'13=1F,F=1n,B=1n\')},I:4(a){g.14(\'1C://1g.I.o/4w/Q?3=\'+U((a.8.p.3!==\'\'?a.8.p.3:a.3))+\'&4x=&4y=r\',\'I\',\'13=1F,F=1n,B=1n\')},A:4(a){g.14(\'P://A.o/1T/2m/S/?3=\'+U((a.8.A.3!==\'\'?a.8.A.3:a.3))+\'&1B=\'+U(a.8.A.1B)+\'&1r=\'+a.8.A.1r,\'A\',\'13=1F,F=4z,B=4A\')}};4 R(a,b){7.q=a;7.6=$.4D(r,{},2d,b);7.6.Q=b.Q;7.4E=2d;7.4F=j;7.1U()};R.V.1U=4(){l c=7;9(7.6.1u!==\'\'){1o.K=7.6.1u+\'?3={3}&O=K\';1o.H=7.6.1u+\'?3={3}&O=H\';1o.A=7.6.1u+\'?3={3}&O=A\'}$(7.q).4H(7.6.2R);9(y $(7.q).m(\'19\')!==\'E\'){7.6.19=$(7.q).31(\'m-19\')}9(y $(7.q).m(\'3\')!==\'E\'){7.6.3=$(7.q).m(\'3\')}9(y $(7.q).m(\'w\')!==\'E\'){7.6.w=$(7.q).m(\'w\')}$.1t(7.6.Q,4(a,b){9(b===r){c.6.26++}});9(c.6.30===r){$.1t(7.6.Q,4(a,b){9(b===r){4K{c.33(a)}4M(e){}}})}J{7.1X();7.6.2o(7,7.6)}$(7.q).22(4(){9($(7).W(\'.8\').4O===0&&c.6.2Z===r){c.1X()}c.6.22(c,c.6)},4(){c.6.34(c,c.6)});$(7.q).1P(4(){c.6.1P(c,c.6);1w D})};R.V.1X=4(){l c=7;$(7.q).Y(\'<n L="8"></n>\');$.1t(c.6.Q,4(a,b){9(b==r){3a[a](c);9(c.6.23===r){2D[a]()}}})};R.V.33=4(c){l d=7,z=0,3=1o[c].1v(\'{3}\',U(7.6.3));9(7.6.8[c].17===r&&7.6.8[c].3!==\'\'){3=1o[c].1v(\'{3}\',7.6.8[c].3)}9(3!=\'\'){$.4Q(3,4(a){9(y a.z!=="E"){l b=a.z+\'\';b=b.1v(\'\\4R\\4S\',\'\');z+=1G(b,10)}J 9(y a.37!=="E"){z+=1G(a.37,10)}J 9(y a.2e!=="E"){z+=1G(a.2e,10)}J 9(y a[0]!=="E"){z+=1G(a[0].4W,10)}J 9(y a[0]!=="E"){}d.6.z[c]=z;d.6.1p+=z;d.2i();d.1O()}).4Z(4(){d.6.z[c]=0;d.1O()})}J{d.2i();d.6.z[c]=0;d.1O()}};R.V.1O=4(){l a=0;50(e 2p 7.6.z){a++}9(a===7.6.26){7.6.2o(7,7.6)}};R.V.2i=4(){l a=7.6.1p,1e=7.6.1e;9(7.6.1s===r){a=7.1s(a)}9(1e!==\'\'){1e=1e.1v(\'{1p}\',a);$(7.q).29(1e)}J{$(7.q).31(\'m-2e\',a)}};R.V.1s=4(a){9(a>=3b){a=(a/3b).3c(2)+"M"}J 9(a>=3d){a=(a/3d).3c(1)+"k"}1w a};R.V.2x=4(a){2O[a](7.6);9(7.6.23===r){l b={K:{12:\'56\',T:\'+1\'},C:{12:\'C\',T:\'1E\'},x:{12:\'x\',T:\'1J\'},G:{12:\'G\',T:\'1Y\'},p:{12:\'p\',T:\'1Y\'},H:{12:\'H\',T:\'1Y\'},I:{12:\'I\',T:\'Q\'},A:{12:\'A\',T:\'1T\'}};1h.1i([\'1j\',b[a].12,b[a].T])}};R.V.58=4(){l a=$(7.q).29();$(7.q).29(a.1v(7.6.1p,7.6.1p+1))};R.V.59=4(a,b){9(a!==\'\'){7.6.3=a}9(b!==\'\'){7.6.w=b}};$.5a[j]=4(b){l c=5b;9(b===i||y b===\'5c\'){1w 7.1t(4(){9(!$.m(7,\'2l\'+j)){$.m(7,\'2l\'+j,5e R(7,b))}})}J 9(y b===\'5f\'&&b[0]!==\'2Q\'&&b!==\'1U\'){1w 7.1t(4(){l a=$.m(7,\'2l\'+j);9(a 5g R&&y a[b]===\'4\'){a[b].5h(a,5i.V.5j.5k(c,1))}})}}})(5l,5m,47);',62,334,'|||url|function||options|this|buttons|if||||||||||||var|data|div|com|delicious|element|true|||||text|twitter|typeof|count|pinterest|height|facebook|false|undefined|width|digg|stumbleupon|linkedin|else|googlePlus|class||script|type|http|share|Plugin|button|action|encodeURIComponent|prototype|find|js|append|layout||lang|site|toolbar|open|via|src|urlCount|insertBefore|title|parentNode|createElement|javascript|getElementsByTagName|template|FB|www|_gaq|push|_trackSocial|href|size|async|550|urlJson|total|line|description|shorterTotal|each|urlCurl|replace|return|20px|send|callback|font|media|https|plusone|like|no|parseInt|status|related|tweet|3px|fb|style|color|rendererPerso|click|STMBLPN|platform|border|pin|init|widgets|id|loadButtons|add|s1|50px|cssCount|hover|enableTracking|counter|cssShare|shareTotal|margin|sharrre|html|float|padding|annotation|defaults|shares|hashtags|fjs|align|renderer|subscribe|Event|plugin_|create|twttr|render|in|colorscheme|500|clearInterval|badge|faces|900|processWidgets|openPopup|img|IN|radius|solid|1px|tracking|setInterval|center|fff|edge|background|none|display|1000|tw|location|popup|18px|_|className|35px|su|650|360|SCRIPT|submit|php|enableHover|enableCounter|attr|google|getSocialJson|hide|medium|gapi|likes|en|horizontal|loadButton|1e6|toFixed|1e3|json|block|all|bottom|5px|overflow|hidden|xfbml|jssdk|XFBML|parse|ccc|urlinfo|decoration|7EACEE|40679C|Tweet|static|small|gif|US|alt|Delicious|Add|on|en_US|countserv|ajax|dataType|setTimeout|cache|DiggThisButton|rel|nofollow|external|format|jsonp|__DBW|it|Pin|It|assets|pinit|button_count|cdn|tall|apis|api|urls|DiggCompact|15px|remove|unlike|message|services|document|events|bind|story|LinkedInShare|getInfo|go|links|confirm|hl|93px|googleplus|right|sharer|intent|root|show|tools|diggthis|save|noui|jump|close|26px|left|cws|token|isFramed|700|300|graph|12px|extend|_defaults|_name|Arial|addClass|Helvetica|sans|try|serif|catch|cursor|length|pointer|getJSON|u00c2|u00a0|___gcfg|666666|feeds|total_posts|inline|getElementById|error|for|v2|normal|indent|vertical|connect|Google|baseline|simulateClick|update|fn|arguments|object|net|new|string|instanceof|apply|Array|slice|call|jQuery|window|top'.split('|'),0,{}))
//]]>
</script>
<script type="text/javascript">
//<![CDATA[

$(document).ready(function()
 {

  $('.social').one('mouseenter', function()
  {
   Socialite.load($(this)[0]);
  });

 });

$('.twitter').sharrre({
  share: {
    twitter: true
  },
  enableHover: false,
  enableTracking: true,
  buttons: { twitter: {via: '_YourTwitterHandle'}},
  click: function(api, options){
    api.simulateClick();
    api.openPopup('twitter');
  }
});
$('.facebook').sharrre({
  share: {
    facebook: true
  },
  enableHover: false,
  enableTracking: true,
  click: function(api, options){
    api.simulateClick();
    api.openPopup('facebook');
  }
});
$('.googlepluss').sharrre({
  share: {
    googlePlus: true
  },
  enableHover: false,
  enableTracking: true,
  click: function(api, options){
    api.simulateClick();
    api.openPopup('googlePlus');
  }
});
$('.linkedin').sharrre({
  share: {
    linkedin: true
  },
  enableHover: false,
  enableTracking: true,
  click: function(api, options){
    api.simulateClick();
    api.openPopup('Linkedin');
  }
});
//]]>
</script>


5. Check the Preview for errors and Save your template

Note: As I mentioned before it is currently not possible to display the +1 count with JavaScript alone. Whenever a Public API will be released for Google+ , I will update this tutorial. Feel free to share your suggestions for improving this widget.

Download Demo

Related Articles

Written by Prayag Verma

A self proclaimed Blogger Evangelist. He has been blogging for the past 3 years and likes to help people having problems with Blogger . Get more from Prayag on and Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment
Rounak Baral said...

Great post... :)

Admin said...

How I will get scripts of this two corresponding URL's?
/socialite.js
/sharrre.js

BG said...

DUDE What to do for Wp?

SSBCrack said...

Thanks Prayag :)

Mahesh Verma said...

Nice sharing button thanks for sharing this :)

Great tutor Prayang :D

Just my simple post :)
Social Bookmarking Widget for Blogger

Hey Prayag Verma Your blog is having lot of Good blogger tricks and widget.And this post si awesome.

Add me on Google Plus
My Blog

Very use full post for Blogger users. Thanks Prayag :)

Niyas said...

Nice sharing Thanks prayag :)

techgod8 said...

Excellent Work Brother Keep it up

CSS : Twitter Style Blue Button Hover

Thanks for sharing prayag

thank you for sharing the article

Leukemia said...

thank you for sharing the article,,may be usefull

Rani said...

impressive :)

Great tutorial.. i will try in my site...

Thanks for such great CSS code. The post is very nicely written and i used one the code and it helped me.

Hari said...

Hi Prayag, can we put these on the home page of our blog under the post, like mashable style? I'm using the auto-read more hack, so I want to display these buttons under each post on my homepage. Please tell me how to. Thanks.

if just like that, you can not get count of number people share, because that cod just button share... and number people share just see if you mouse over.. cek in your demo.. in article number 2 you have 2 people share but not see in your button and just see 2 if mouse over... :)

Thanks man!

Nice Dear

AKTECHz said...

Can you please tell me how to add my image to the search results like you have done.. Pls tell me..
Thanks
Latest technology, softwares, gadgets, tricks and much more

Main Uddin said...

Prayag Verma @ your tutorial very useful to newbie as well as experienced bloggers and webmasters too.As your designing and expressing method is excellent.Creation a video of any tutorial is a bonus point of blogging.

The Google +1 Button is Missing Sometimes

Anonymous said...

Hi there

Great code! I just applied to my blog. I have probably missed something because it is working on single posts but on category pages not. Social buttons count for the category page and not for each post in the list seperately. Any ideas why this is happening?
Thank you in advance

woooww great..

thanks for information

nice article

thanks for article..

WOW!!!

Cool widget, and it's so light and wonderful

I never thought that have a lazy load widget like this.

Best, Danial :)

Don't forget to check out my new blog :D
Art Of Blogger

Stranger said...

But why is the count not displaying

kawsar said...

this dosnt work anymore google user and passsword request

Anonymous said...

Gracias

Really a nice stuffs in this post. I really Like the simple widget method to publicize the social network for any blog.

schutzpakete said...

really good article but needs an update some of this stuff is not working anymore.