JSFiddle - React, Tailwind, and code Playground

by Salvador Dali

HTML

<div id="margin"></div>
<div id="share">
    <img alt='f' src="http://www.lijit.com/res/images/iconResources/socialMediaIcons/iconDockSet/facebook_16x16.png"/>
    <img alt='t' src="http://tmappsevents.esri.com/website/unrest_libya/images/map/twitter-legend-icon-16x16.png"/>
    <img alt='g' src="https://www.authorstream.com/images/nlwebinar/icon_google.png"/>
    <!-- http://files.softicons.com/download/social-media-icons/simple-icons-by-dan-leech/png/16x16/google-plus.png -->
</div>

CSS

#margin{margin-top: 40px;}
#share img{
    margin: 2px 5px 2px 5px;
    cursor: pointer;
}

JavaScript

$('#share > img').on('click', function(){
    var url = encodeURIComponent(document.location.href);
    var title = encodeURIComponent(document.title);
    switch($(this).attr('alt')){
        case 'f':
            var windowURL = 'https://www.facebook.com/sharer/sharer.php?u='+ url +'&t='+ title;
            alert(windowURL);
            break;
        case 't':
            var windowURL = 'https://twitter.com/share?url='+ url +'&via=StopDoublethink&text='+ title;
            break;
        case 'g':
            var windowURL = 'https://plus.google.com/share?url='+ url;
            break;
    }
    
    window.open(
        windowURL,
        '',
        'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'
    );
})