How to Load Social Widgets Conditionally to Improve your Site's Performance

Social Sharing is now tightly integrated into all mobile OS platforms. That means if someone is viewing a web page on an Android phone, or inside the mobile Safari browser of an iPhone, they can share that web page on Twitter and Facebook using the system-wide sharing menu without having to rely on bookmarklets or those tiny social sharing widgets.

Facebook, Twitter Integration with iOS

These “tweet” and “like” buttons add several extra kilobytes to your web pages and if mobile users are less likely to use them, you may as well consider removing the social buttons completely when your website is accessed from a mobile phone. This reduces clutter and also improves the page speed score which is now a factor in Google search rankings.

Remove the Social Buttons on Mobile Devices

If you are sort-of convinced that social sharing widgets are less useful on your mobile site, here’s what you can do to prevent them from loading on the small screen. Remember, we aren’t just hiding the buttons but removing them completely so the associated JavaScript and CSS files won’t download on the user’s mobile device.

For a quick demo, open social-widgets.html in your desktop browser and then on a mobile device. The desktop view will load the social widgets but not the mobile device.

How to Load Social Widgets Conditionally

The technique is simple. We calculate the width of the user’s screen /browser and if the width exceeds a particular value (say 480 pixels), we load the associated social widgets.

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 to generate code for the Like button while will provides codes 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.

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.

I have implemented a variation of the above code on my site as well. There’s a Facebook Like box in the right sidebar but it won’t load if you open this site on a mobile device.

Also see: Making Google Ads Responsive

Amit Agarwal

Amit Agarwal

Google Developer Expert, Google Cloud Champion

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.

Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory


Awards & Titles

Digital Inspiration has won several awards since it's launch in 2004.

Google Developer Expert

Google Developer Expert

Google awarded us the Google Developer Expert award recogizing our work in Google Workspace.

ProductHunt Golden Kitty

ProductHunt Golden Kitty

Our Gmail tool won the Lifehack of the Year award at ProductHunt Golden Kitty Awards in 2017.

Microsoft MVP Alumni

Microsoft MVP Alumni

Microsoft awarded us the Most Valuable Professional (MVP) title for 5 years in a row.

Google Cloud Champion

Google Cloud Champion

Google awarded us the Champion Innovator title recognizing our technical skill and expertise.

Email Newsletter

Sign up for our email newsletter to stay up to date.

We will never send any spam emails. Promise.