Socialite.js – Async Social Media Buttons

Social media is very important these days, and having a Facebook like or Google+ button on your website makes it easier for your visitors to share your content with their friends and contacts. Socialite.js is a JavaScript library that helps you load social media buttons asynchronously.

This is obviously good for you and your website, but adding social media buttons can also increase the loading time of your website, adding frustration to your visitors. This can also be a negative factor for your SEO efforts, as page speed is an important factor for your rankings on Google and other search engines.

Using asynchronous loading buttons you can reduce the load time significantly, at least the feeling of load time.

The normal implementation of these buttons (the currently most predominant are Facebook, Twitter, Google+ and LinkedIn) would mean extra code and loading scripts from other domains while loading your website.

Socialite.js for the rescue!

Socialite.js is a JavaScript library that makes it easy to embed code that loads the social media buttons once the page itself has finished loading. This makes the loading seem faster.

Socialite.js currently has support for the following social media: Twitter, Google+, Facebook, LinkedIn, Pinterest and Spotify.

David Bushell has made it very easy to embed these like and share buttons and it is also cross-browser compatible.

How to use

Here is a simple example. First you need to go to Github and download a copy of the library and then embed it in to your WordPress site. In this example I embed the JavaScript library in the header.php file of the theme.

wp_enqueue_script('socialite', get_template_directory_uri."/js/socialite.min.js");

Not that difficult, is it? The single line enqueues the script, which is placed in the /js/ folder. Since we are looking for speed, I use the minified version of the script, “socialite.min.js”.

The library itself has examples on how to embed, but here is an example that works with internal WordPress functions:

<a class="socialite facebook-like" href="<?php echo get_permalink(); ?>&t=<?php echo urlencode(get_the_title()); ?>" target="_blank" rel="nofollow" data-href="<?php echo get_permalink(); ?>" data-send="false" data-layout="button_count" data-width="60" data-show-faces="false">
<span class="vhidden">Facebook</span>

Note: Loading social media buttons asynchronously can be beneficial to any website, not just WordPress websites.

Note: Although I prefer to embed Socialite.js manually, Tom Morton is developing a WordPress Plugin if you prefer.

Leave a Comment Newsletter

Articles about how to improve your WordPress website, how to get more traffic and most importantly more customers.


Something went wrong. Please check your entries and try again.