Managing Social Buttons on a Responsive Site

Social Sharing buttons can be brutal on load time (Facebook I’m looking at you) and with speed being a crucial factor in building a mobile version of your site, it can be a pain to try and maintain all those scripts without slowing down the site in the process. Loading Facebook, Twitter, Google’s +1 button, and other sharing buttons for a mobile site isn’t ideal. Nine times out of ten, those buttons won’t be used by people on a phone and just Facebook alone can tend to really slow your loading time and on a weak connection, every second counts. I think the following is a pretty elegant way to handle these buttons and scripts in a Mobile-First responsive design.

Recently, @necolas tweeted a gist based off @stoyanstefanov‘s work. It was a way to optimise the loading of common scripts: Facebook, Twitter, and Google (Analytics & +1 Button).

/*
 * Updated to use the function-based method described in http://www.phpied.com/social-button-bffs/
 * but retaining the use of a document fragment to minimise the number of times objects are 
 * written to the DOM. Also, better handling of scripts without supplied ids.
 *
 * N.B. Be sure to include Google Analytics's _gaq and Facebook's fbAsyncInit prior to this function.
 */

(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 Analytics
    add(('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js', 'ga');
    
    // Google+ button
    add('https://apis.google.com/js/plusone.js');
    
    // Facebook SDK
    add('//connect.facebook.net/en_US/all.js', 'facebook-jssdk');
    
    // Twitter SDK
    add('//platform.twitter.com/widgets.js');

    fjs.parentNode.insertBefore(frag, fjs);

}(document, 'script'));

Great, this helps organize all our scripts into one neat function. You can add others and have it all called together in a clean and organized way.

Wait, this gives me an idea

Since all of our social scripts are being called in a nice neat function, we can use the power of Modernizr to exclude them from the mobile version of our site.

// lets use Modernizr to load social scripts only if it's not mobile
if (matchMedia('screen and (min-width: 481px)').matches) {
    
    /* drop the above function in here */

} 

Nice! Now if the user loads the site on a screen smaller than 481px, they won’t get the scripts. Which is fantastic because that will cut down load time tremendously.

Now let’s go a bit further

The first thing you’ll notice is that mobile sites won’t get Google Analytics. This is easily resolved by pulling that script out of there and calling it normally. The other problem is that the markup (text link in Twitter’s case) for these social buttons won’t get styled and Google & Facebook won’t render anything without the script. If you want to have a link to your social profiles, then you can use this work around:

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

    <!-- this is a fallback for mobile -->    
    <a href="http://plus.google.com/url">Join Me on Google+</a>
    <!-- end fallback (it will dissapear if the script loads -->
    
    <!-- this is the facebook fallback since it won't work inside the facebook div -->
    <a href="http://facebook.com/pagename">Like Me on Facebook</a>
    <!-- end fallback (it will dissapear if the script loads -->

</g:plusone> 

<div class="fb-like" data-send="false" data-layout="box_count" data-width="50" data-show-faces="false"></div>

As you can see we’re dropping some links inside the markup for the Google +1 button. The link shows up when the script isn’t loaded and when the script is loaded, the links aren’t displayed and are replaced with the +1 button. We put the Facebook link in there too because if you put anything inside those Facebook divs, they break.

Styling the Text Links on Mobile

Now, we don’t want to add styles for those text links that would override or cause issues with the default styles that are loaded with the scripts, so we’re going to use a max-width media query to style them right up to the point where the scripts are called.

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

    .twitter-share-button {
        /* styles go here or you can display: none; to hide it */
    }

} /* end media query */

Now you can customize the links on mobile and once the scripts are called in, those styles are discarded and the default styles are loaded. Perfect! Now you maintain links to your social profiles on Mobile without having to load a ton of resources and on a larger screen, you get the buttons’ full sharing functionality.

You can check out the complete code here. You’ll need to edit the Facebook SDK line to include your App ID. Replace the 1234567890 with your App ID.

View Complete Code on jsFiddle. View Original gist by @necolas.