Generally we use social sharing buttons on our site to share content of our site on various social networking platforms. These social sharing buttons adds few extra bytes size to your web pages. If someone is browsing that particular web page with slow internet connection then it will cause a clutter. To avoid this especially on Responsive Designs, you can load social sharing buttons conditionally and stop them to load on mobile devices to avoid clutters.
How to Load Social Widgets Conditionally:
Below is a simple technique using which we calculate the width of the browser and if the width exceeds a particular width say 480px only then the social sharing buttons will show up.
Here the best thing is that we are not hiding them using css but instead completely avoiding them to load which will save a lot of loading time when someone is browsing from mobile devices.
To implement conditional loading on your blog /website, first add all the necessary social widgets to your blog using the usual procedure. For instance, you can visit facebook.com to generate code for the Like button while dev.twitter.com will provides codes for the Tweet and Follow widgets of Twitter.
Remove the JavaScript from these generated codes – everything that’s between the <script> tags – and add everything else to your website template. Then copy-paste the following snippet before the closing </body> tag of your website template.
<script type="text/javascript">
(function(doc, script, minimum) {
// Calculate the width of the user's screen
var browserWidth = window.innerWidth
|| doc.documentElement.clientWidth
|| doc.body.clientWidth;
// Load JavaScript only if the site is being viewed on a wide (non-mobile) screen
if (browserWidth > minimum) {
var js, frag = doc.createDocumentFragment(),
// Credit : Stoyan Stefanov of phpied.com
js_queue = function(url, id) {
if ( ! doc.getElementById(id) ) {
js = doc.createElement(script);
js.src = url; js.id = id;
frag.appendChild(js);
}
};
// These are the most common social widgets, remove the ones you don't need
js_queue ("https://apis.google.com/js/plusone.js", "googleplus-js");
js_queue ("//platform.twitter.com/widgets.js", "twitter-wjs");
js_queue ("//connect.facebook.net/en_US/all.js#xfbml=1","facebook-jssdk");
js_queue ("//platform.linkedin.com/in.js", "linkedin-js");
js_queue ("//assets.pinterest.com/js/pinit.js", "pinterest-js");
var fjs = doc.getElementsByTagName(script)[0];
fjs.parentNode.insertBefore(frag, fjs);
}
// Set the minimum width here (default is 480 pixels)
} ( document, 'script', 480 ) );
</script>
The above JavaScript code asynchronously loads all the popular social widgets – Twitter, Facebook, LinkedIn, Google+ and Pinterest – but you may remove the js_queue calls for widgets that you do not plan to use on your website. Save the changes and you are done.
Thats it! You have slowly and successfully moved to the advanced strategies of blogging and SEO. This chapter will definitely help you to reduce the blog’s loading time which is one of the crucial aspects regarding On Page SEO.
