A great alternative to shareThis, or addthis is to add your own share buttons.

The Share Buttons

Share on Google+Share on Pinterest

Feel free to test them out 😉

Here’s a javascript snippet for sharing to Twitter, Facebook, Google+ and Pinterest

Step 1

The Javascript

var shares = document.querySelectorAll('.shareto');

for( i=0; i<shares.length; i++ )
{
 shares[i].addEventListener( 'click', triggerShare, false );
}

function triggerShare( e )
{
 e.preventDefault( );
 var shareto = e.target.getAttribute('data-share');
 
 var twitter = 'http://twitter.com/home?status=%title %url';
 var facebook = 'http://www.facebook.com/sharer.php?u=%url&amp;t=%title';
 var googleplus = 'https://plus.google.com/share?url=%url';
 var pinterest = 'http://pinterest.com/pin/create/button/?url=%url&description=%title&media=%media';
 
 if( shareto == 'facebook' )
 {
 var share=window.open( makeUrl( facebook ) ,'','width=667,height=352');
 }
 
 if( shareto == 'twitter' )
 {
 var share=window.open( makeUrl( twitter ) ,'','width=667,height=352');
 }
 
 if( shareto == 'googleplus' )
 {
 var share=window.open( makeUrl( googleplus ) ,'','width=667,height=352');
 }
 
 if( shareto == 'pinterest' )
 {
 var media = e.target.getAttribute('data-media');
 var share=window.open( makeUrl( pinterest ).replace('%media', media ) ,'','width=667,height=352');
 }
 
 share.focus();
}

function makeUrl( str )
{
 var _url = encodeURIComponent(document.URL); 
 var _title = escape(document.title);
 
 return str.replace('%title',_title).replace('%url',_url);
}

 Step 2

The HTML – These are the actual share buttons.

Take note of the Pinterest data attribute, we are referencing some media as Pinterest’s Share URL requires us to specify the media we want to share.

<a href="#" class="shareto twitter" data-share="twitter">Share on Twitter</a>
<a href="#" class="shareto facebook" data-share="facebook">Share on Facebook</a>
<a href="#" class="shareto googleplus" data-share="googleplus">Share on Google+</a>
<a href="#" class="shareto pinterest" data-share="pinterest" data-media="http://www.chubbyninja.co.uk/wp-content/themes/wilson/images/logo.png">Share on Pinterest</a>

Step 3

I sourced some free share buttons from iconfinder.com

I am using base64_encoded image’s for my share icons, so I have omitted them from the CSS below, add your own URL’s or data-uri’s in there.


.shareto {
 background-size:100% 100%;
 display:inline-block;
 width:50px;
 height:50px;
 text-indent:-9999px;
}
.pinterest {
    background-image:url(http://...);
}
.facebook {
    background-image:url(http://...);
}
.twitter {
    background-image:url(http://...);
}
.googleplus {
    background-image:url(http://...);
}