Close Menu
My SiteMy Site
  • Home
  • Reviews
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact
    • Advertise
    • About Us
Facebook X (Twitter) Instagram
My SiteMy Site
  • Home
  • Reviews
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact
    • Advertise
    • About Us
My SiteMy Site
Home»Social Media»Why You Should Load Social Widgets Conditionally
Social Media

Why You Should Load Social Widgets Conditionally

Oscar FrankBy Oscar Frank3 Mins Read
Share
Facebook Twitter LinkedIn WhatsApp Pinterest Email

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

loading social media widgets conditionally

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.

load speed Share Buttons Social Widgets

Related Posts

TikTok Faces Unexpected Ban in Senegal, Sparks Global Curiosity

August 11, 2023

Triller Takes on TikTok: Filing for Public Listing

August 4, 2023

Google’s YouTube Experiment: AI to Summaries Videos

August 2, 2023
View 4 Comments

4 Comments

  1. Ahsan on July 31, 2013 5:17 pm

    I agree with you. Its better to add social widget coding than to add social widget plugin. Because site loading has great effect in search engine

    Reply
    • Oscar Frank on July 31, 2013 6:23 pm

      You are right Ahsan, loading them conditionally is such a wonderful idea if you need to improve your page load speed and improve your search engine ranking.

      Reply
  2. Ashish Chandra on February 26, 2014 5:30 am

    I was searching for a script which would skip social icons whenever they take long time. I found this one. Though not exactly what I wanted but nice one.

    Reply
    • Oscar Frank on February 27, 2014 2:39 pm

      I’m glad you liked this post. BTW, could you explain what you needed so we can see if we can help you? 🙂

      Reply
Leave A Reply Cancel Reply

Recent Posts
  • 6 Sports Apps You Must Have On Your Phone
  • Valencia Travel Guide: All You Need to Know About This Spanish Gem
  • TikTok Faces Unexpected Ban in Senegal, Sparks Global Curiosity
  • The Apple GPT & Apple’s Chatbot Mysterious Debut
  • Triller Takes on TikTok: Filing for Public Listing
Get Exclusive Tech Insights!
My Site
Facebook X (Twitter) Instagram YouTube
© 2025 Oscarmini Co. Designed by illBytes.

Type above and press Enter to search. Press Esc to cancel.