JSFiddle - React, Tailwind, and code Playground

by Danny Hearnah

HTML

<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>

CSS

.pinterest {
   ...

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);
}