jrobinsonc
4/28/2014 - 9:39 PM

Share JS

Share JS

// You need jQuery:
// const $ = require('jquery');
// or
// const $ = jQuery;

$('.share-js a').on('click', (evt) => {
    evt.preventDefault();

    const $link = $(evt.currentTarget);
    const $container = $link.parent();
    let url = '';
    let windowSize = [550,350];

    switch ($link.attr('class')) {

        case 'facebook': {
            url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent($container.data('uri'))}`;
            break;
        }
    
        case 'twitter': {
            url = `https://twitter.com/intent/tweet?url=${encodeURIComponent($container.data('uri'))}&text=${encodeURIComponent($container.data('text'))}`;

            const twitterVia = $container.data('via') || '';
    
            if (twitterVia !== '') {
                url = `${url}&via=${encodeURIComponent(twitterVia)}`;
                url = `${url}&related=${encodeURIComponent(twitterVia)}`;
            }
            break;
        }
    
        case 'google-plus': {
            windowSize = [515, 490];
            
            url = `https://plus.google.com/share?url=${encodeURIComponent($container.data('uri'))}`;
            break;
        }
    
        default: {
            // do nothing
        }
    }

    if (url !== '') {
        window.open(url, 'sharejs', `width=${windowSize[0]},height=${windowSize[1]},menubar=no,toolbar=no,resizable=yes`);
    }

});
.share-js {
    span {
        display: block;      
        font-weight: bold;
        text-transform: uppercase;
    }
  
    a {
        display: inline-block;
        text-decoration: none;
        height: 32px;
        line-height: 32px;
        margin-right: 5px;
        padding: 0 10px;
        color: #fff;

        &.facebook {
            background: #3B5997;
        }

        &.twitter {
            background: #41B7D8;
        }

        &.google-plus {
            background: #D64937;
        }

        &.print {
            background: #A5A5A5;
        }
    }
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

    <div class="share-js" data-uri="http://joserobinson.com/" data-text="Software Developer" data-via="jrobinsonc">
        <span>Share</span>
        <a class="twitter" href="javascript:;" title="Share on Twitter">Twitter</a>
        <a class="facebook" href="javascript:;" title="Share on Facebook">Facebook</a>
        <a class="google-plus" href="javascript:;" title="Share on Google Plus">Google Plus</a>
        <a class="print" href="javascript:window.print();" title="Print this page">Print</a>
    </div>
    
</body>
</html>

Share-JS

Demo

https://codepen.io/jrobinsonc/pen/jYrxwb

Transpile

To transpile the JavaScript, can use:

https://babeljs.io/repl/

For Sass to CSS, can use:

https://www.sassmeister.com/