JSFiddle - React, Tailwind, and code Playground

by eddiemachado

HTML

<!-- facebook needs this at the top to work -->
<div id="fb-root"></div>

<!-- explanation -->
<p>Share buttons on mobile are largly ignored and the scripts take a while to load, so let's remove them for mobile devices.</p>

<!-- twitter will render as a text link w/out script -->
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>

<!-- google+ and facebook won't render w/out scripts -->
<g:plusone annotation="inline"></g:plusone> 
<div class="fb-like" data-send="false" data-layout="box_count" data-width="50" data-show-faces="false"></div>

CSS

body { padding: 40px; font-family: sans-serif; line-height: 1.5; text-align: center; }

/*
you can provide styles for the
scriptless text-links by
using a media query. Or you can 
display none if you like.

Google & Facebook buttons won't render.

*/

@media only screen and (max-width: 480px) {

    .twitter-share-button {
        display: block;
        background-color: #d5e6ef;
        border: 1px solid #a4cce5;
        /* you can display: none; to hide it */
    }

} /* end media query */

JavaScript

/* 
code originally from: https://gist.github.com/1025811
*/

// lets use Modernizr to load social scripts only if it's not mobile
if (matchMedia('screen and (min-width: 481px)').matches) {
    /*
    Code supplied from: https://gist.github.com/1025811
    */
    (function(doc, script) {
        var js, 
            fjs = doc.getElementsByTagName(script)[0],
            frag = doc.createDocumentFragment(),
            add = function(url, id) {
                if (doc.getElementById(id)) {return;}
                js = doc.createElement(script);
                js.src = url;
                id && (js.id = id);
                frag.appendChild( js );
            };
        
        // Google+ button
        add('https://apis.google.com/js/plusone.js');
        // Facebook SDK
        add('//connect.facebook.net/en_US/all.js#xfbml=1&appId=1234567890', 'facebook-jssdk');
        // Twitter SDK
        add('//platform.twitter.com/widgets.js');
    
        fjs.parentNode.insertBefore(frag, fjs);
    }(document, 'script'));
    
} /* end Modernizr polyfill */