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

Published in: Facebook - Twitter

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

📮  Subscribe to our Email Newsletter for Google tips and tutorials!
Published in: Facebook - Twitter

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
Amit Agarwal

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. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch

Google Add-ons

Do more with your Gmail and GSuite account

We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.

  1. Mail Merge with Attachments
    Send personalized email to your Google Contact with a Google Sheet and Gmail
  2. Save Emails and Attachments
    Download email messages and file attachments from Gmail to your Google Drive
  3. Google Forms Email Notifications
    Send email notifications to multiple people when a new Google Form is submitted
  4. Document Studio
    Create beautiful pixel perfect documents merging data from Google Sheets and Google Forms
  5. Creator Studio for Google Slides
    Turn your Google Slides presentations into animated GIFs and videos for uploading to YouTube