Why You Should Load Social Widgets Conditionally

Every blogger would love to have their content shared on various social networks in order to gain a wider audience or exposure and therefore they add the social media buttons and widgets to their blogs. But have you ever wondered what effect the social share buttons have on your mobile traffic.

• Must Read: Promoting Your Blog On Social Networks

In case you do not know, social buttons are usually called up using javascripts and according to research conducted at zurb.com, a total of 19 requests of different small social media sharing icons would load up an extra 246.7K and thus would eat more of your bandwidth. If you do not get it, here is what I mean. Since the social media buttons are usually useless to your mobile traffic, infact they tend to block important part of articles on mobile browsers, won’t it be ideal to load these social widgets for PC users and disable it from loading when your blog is accessed using a mobile browser?

That’s where this topic comes in. The simple reason why you need to load social widgets conditional is in order to save your mobile traffic the usage of their data and also from inconveniencing their experience on your blog. Heavy pages tend to scare mobile users away (they increase load time and tend to be heavy for mobile browsers), and secondly loading your social media widgets conditionally would help you save that outrageous 246.7K on every requesrt made by browsers of your blog or website visitor.

How To Load Social Widgets Conditionally To Improve Site Performance

Now you have known the reason why you should load your social icons conditionally, let me guide you through achieving this on your blog.

Why are going to use a simple javascript created by Amit Agarwal . This javascript would calculate the screen size of browsers people visit your blog with. if it is higher than 480 pixels, then the social buttons would load, else  they do not get a social widget to display.

• Must Read: How To Add A Vertical Floating  Social Sharing Widgets to WordPress
• How To Add A Vertical Floating  Social Sharing Widgets to WordPress

Step 1: Strip your social widgets javascript off the <script> and </script> tag and then add the other codes to your website or blog.

Step 2: Copy the below code and add it before the </body> tag of your website or blog.

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

Then save your Theme or template.

This simple javascript would help improve your blog load time on mobile devices and would load you social media widgets conditionally based on the screen size we used.