Asynchronously load social media share buttons in WordPress

Asynchronously load social media share buttons in WordPress

Sharing your stuff via social networks is important. As well as page loading time! This quick tutorial will show you how you can asynchronously load social media share buttons in WordPress theme and improve your page speed.

What does “asynchronous loading” mean?

It means that social sharing buttons will be loaded and executed on your page at the same time as your page is rendered, which means that your website visitors will have to wait less to see your content.

Benefits:

  • It will improve your page speed (loading time).  Your website doesn’t need to wait for response from other (social network) servers.
  • Your website is completely independent, which means that if for example Facebook or Twitter are currently down or overloaded, your content will be always available to your visitors.
  • Your visitors don’t have to wait and they won’t run to some other website. Improves bounce rate and your SEO!
  • Your visitors will more likely share your articles if you keep them on your website. Improves number of shared articles, which means more visitors!

In this example we will explain you how can you implement this technique inside your WordPress theme. Tutorial covers asynchronous loading of Facebook, Twitter, LinkedIN, Pinterest and Google+ sharing buttons.

Step 1: Create JavaScript file

For example, we will name it share.js and put it in js folder inside theme root folder. Here’s the code:

Step 2: Enqueue share.js file inside your theme

This is a piece of code you have to add to functions.php file of your theme:

Step 3: Place HTML part of code inside your template(s)

There is just one more step. You will need to put “placeholders” inside your actual templates which will be filled with sharing buttons after the script executes. Please note that the best practise is to always use it within “the loop”. It can be located in your single.php, index.php, or anywhere you prefer.  Here’s a basic example:

And, that’s it! No more steps!

Live example?

You can see all this live in action on our Safarica WordPress Theme Demo website. Feel free to share your comments and thoughts!

Bojan Petrovic

Co-founder and WordPress developer at Meks. He has been involved in the business since 2009. creating themes, plugins and services on top of WordPress, continuously aiming to choose best approaches and work smarter, not harder.

18 comments

Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *