Add Lazy Loading Social Sharing Buttons to your WordPress Blog

One of the most common and important parts of every blog is a collection of social media buttons i.e. Facebook's Like button, Twitter's tweet button, Google's +1 button etc. Each social platform adds a JavaScript file with its buttons, this means when a blog page loads it has to wait for the 300kb of social media. This hangs the rendering of the page which results in increased page load time. To resolve this issue some of the really big blogs have devised certain techniques through which the social media buttons can be loaded asynchronously. In this tutorial you will learn how to add this "lazy loading" social sharing buttons to your WordPress blog.

Introduction:

These icons will be using a JavaScript library made by David Bushell. .Net magazine published the Big question: should we drop social media buttons? with opinions and anecdotes from various professionals. This inspired him to reply to them with a nice handy code snippet.

Social widgets are massive. They’re effectively additional websites sand-boxed within tiny iframes and most are poorly optimized. Facebook’s “like” button is appalling. This problem cannot be understated and I developed Socialite.js for exactly that reason. Socialite defers loading and works extremely well. It doesn't reduce the amount of bytes being shipped, but it does let your website load first before the stream is saturated with social extras.
- David

Some Words About Socialite

Socialite provides a very easy way to implement and activate a plethora of social sharing buttons — any time you wish. On document load, on article hover, on any event!

If you're selling your soul, you may as well do it asynchronously.
- David

Features and Benefits

No dependencies to use.
Loads external resources only when needed.
Less than 5kb when minified and compressed.
More accessible and styleable defaults/fallbacks.
Support for Twitter, Google+, Facebook, LinkedIn, Pinterest, and Spotify.
Extensible with other social networks.
Mimics native implementation when activated.
Supported in all browsers (providing the buttons are).

Step 1 Uploading the JavaScript

Let's roll. First step is to upload the socialite.min.js file, which I recommend you load in your footer. Download the package from socialitejs.com, open it, and upload the socialite.min.js file to your wp-content/themes/your-theme-folder/js/ folder (if the js folder doesn't exist, create it first).

Step 2 Adding the Script to the Footer

Add Socialite

After uploading the JS file to your theme's folder, add the following code into your theme's functions.php file.

function wptuts_load_socialite() {

	// Register Socialite
	wp_register_script( 'socialite', get_template_directory_uri() . '/js/socialite.min.js', array(), '', true );

	// Now enqueue Socialite
	wp_enqueue_script( 'socialite' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_load_socialite' );

Initialize Socialite

Now create a new JS file in your wp-content/themes/your-theme-folder/js/ folder called wptuts-social.js and put the following code in it.

jQuery(document).ready(function($) {
	$('.social-buttons').one('mouseenter', function() {
		Socialite.load($(this)[0]);
	});
});

Now we have a second JS file, we need to amend the PHP code we added to our functions.php file, so it should now look like the following.

function wptuts_load_socialite() {

	// Register Socialite
	wp_register_script( 'socialite', get_template_directory_uri() . '/js/socialite.min.js', array(), '', true );
	// Register social initialiser script
	wp_register_script( 'wptuts-social', get_template_directory_uri() . '/js/wptuts-social.js', array('jquery', 'socialite'), '', true );

	// Now enqueue Socialite
	wp_enqueue_script( 'wptuts-social' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_load_socialite' );

What Is This Code?

In the first step you uploaded socialite.min.js to your theme's folder, after that in the second step you included that script in your theme's footer. Then you added a little code to trigger the social button on the mouseenter property for a specific class i.e. the class of our social buttons is social-buttons, when the mouse enters into that class or you could say when someone hovers the mouse over the social-buttons class, the social sharing buttons will load right at that moment.

In the code above this line is responsible for triggering the social buttons, you can change its class (i.e. social-buttons) to any other you want.

	$('.social-buttons').one('mouseenter', function() {

Step 3 Adding the CSS

We will discuss where to add the HTML later, let's add the CSS first. So, we are about to add the CSS which will hide the button's text and will show an image in place of them when they are not loaded. You are free to modify the CSS to suit your theme, that way it will make you stand out from others. David has coded the following CSS.

Create a new CSS file called wptuts-social.css in your wp-content/themes/your-theme-folder/css/ folder (if the css folder doesn't exist, create it first).

Then add the following code into the file.

/*
 * Socialite Look-a-like defaults
 */

.social-buttons { display: block; list-style: none; padding: 0; margin: 20px; }
.social-buttons > li { display: block; margin: 0; padding: 10px; float: left; }
.social-buttons .socialite { display: block; position: relative; background: url('https://cdn.tutsplus.com/wp/authors/legacy/AhmadAwais/2012/08/29/social-sprite.png" data-original-url="https://tuts-authors.s3.amazonaws.com/wp.tutsplus.com/AhmadAwais/2012/08/29/social-sprite.png') 0 0 no-repeat; }
.social-buttons .socialite-loaded { background: none !important; }

.social-buttons .twitter-share { width: 55px; height: 65px; background-position: 0 0; }
.social-buttons .googleplus-one { width: 50px; height: 65px; background-position: -75px 0; }
.social-buttons .facebook-like { width: 50px; height: 65px; background-position: -145px 0; }
.social-buttons .linkedin-share { width: 60px; height: 65px; background-position: -215px 0; }

.vhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

Now let's go back and modify the PHP code we put into our functions.php file again to load the new CSS file, as follows.

function wptuts_load_socialite() {

	// Register Socialite
	wp_register_script( 'socialite', get_template_directory_uri() . '/js/socialite.min.js', array(), '', true );
	// Register social initialiser script
	wp_register_script( 'wptuts-social', get_template_directory_uri() . '/js/wptuts-social.js', array('jquery', 'socialite'), '', true );

	// Now enqueue Socialite
	wp_enqueue_script( 'wptuts-social' );

	// Register social CSS
	wp_register_style( 'wptuts-social', get_template_directory_uri() . '/css/wptuts-social.css');

	// Now enqueue social
	wp_enqueue_style( 'wptuts-social' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_load_socialite' );

Point to Ponder

Make sure you change the sprite image path to your own server. You can download the image below and upload it to your blog and then swap its location at line #7 in the above CSS code.

Step 4 HTML Markup

Let's see the HTML code for these buttons

<ul class="social-buttons cf">
	<li><a class="socialite twitter-share" href="http://twitter.com/share" rel="nofollow" target="_blank" data-text="<?php the_title() ?>" data-url="<?php the_permalink() ?>" data-count="vertical" data-via="twitter-username-here"><span class="vhidden">Share on Twitter</span></a></li>
	<li><a class="socialite googleplus-one" href="https://plus.google.com/share?url=http://socialitejs.com" rel="nofollow" target="_blank" data-size="tall" data-href="<?php the_permalink() ?>"><span class="vhidden">Share on Google+</span></a></li>
	<li><a class="socialite facebook-like" href="https://www.facebook.com/sharer.php?u=https://www.socialitejs.com&t=Socialite.js" rel="nofollow" target="_blank" data-href="<?php the_permalink() ?>" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false"><span class="vhidden">Share on Facebook</span></a></li>
	<li><a class="socialite linkedin-share" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink() ?>&title=<?php the_title() ?>" rel="nofollow" target="_blank" data-url="<?php the_permalink() ?>" data-counter="top"><span class="vhidden">Share on LinkedIn</span></a></li>
</ul>

Things to do here:

Change twitter-username-here with your own Twitter username in the code above.

Where to Add This Code?

This code can be added to a lot of places by a lot of methods. Let me give you some examples

You can add this code:

Below the post meta in your single.php
Below the content in your single.php
In your index.php inside the loop etc.

Step 5 Adding HTML to WordPress

Manual Method

Go to your wp-content/themes/your-theme-folder/ folder, and open your single.php file. Then find the_content, and you will find some code like this <?php the_content() ?>. Add the HTML code shown next below it or above it.

Adding Before a Post

Go to your wp-content/themes/your-theme-folder/ folder, and open your functions.php file. Add the below code at its end:

function social_before_the_content( $content ) {
	$custom_content = '
<ul class="social-buttons cf">
	<li><a class="socialite twitter-share" href="http://twitter.com/share" rel="nofollow" target="_blank" data-text="<?php the_title() ?>" data-url="<?php the_permalink() ?>" data-count="vertical" data-via="twitter-username-here"><span class="vhidden">Share on Twitter</span></a></li>
	<li><a class="socialite googleplus-one" href="https://plus.google.com/share?url=http://socialitejs.com" rel="nofollow" target="_blank" data-size="tall" data-href="<?php the_permalink() ?>"><span class="vhidden">Share on Google+</span></a></li>
	<li><a class="socialite facebook-like" href="https://www.facebook.com/sharer.php?u=https://www.socialitejs.com&t=Socialite.js" rel="nofollow" target="_blank" data-href="<?php the_permalink() ?>" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false"><span class="vhidden">Share on Facebook</span></a></li>
	<li><a class="socialite linkedin-share" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink() ?>&title=<?php the_title() ?>" rel="nofollow" target="_blank" data-url="<?php the_permalink() ?>" data-counter="top"><span class="vhidden">Share on LinkedIn</span></a></li>
</ul>
';
	$custom_content .= $content;
	return $custom_content;
}
add_filter( 'the_content', 'social_before_the_content' );

Adding After a Post

Again Go to your wp-content/themes/your-theme-folder/ folder, and open your functions.php file. Add the below code at its end:

function social_after_the_content( $content ) {
	$custom_content .= $content;
	$custom_content .= '
<ul class="social-buttons cf">
	<li><a class="socialite twitter-share" href="http://twitter.com/share" rel="nofollow" target="_blank" data-text="<?php the_title() ?>" data-url="<?php the_permalink() ?>" data-count="vertical" data-via="twitter-username-here"><span class="vhidden">Share on Twitter</span></a></li>
	<li><a class="socialite googleplus-one" href="https://plus.google.com/share?url=http://socialitejs.com" rel="nofollow" target="_blank" data-size="tall" data-href="<?php the_permalink() ?>"><span class="vhidden">Share on Google+</span></a></li>
	<li><a class="socialite facebook-like" href="https://www.facebook.com/sharer.php?u=https://www.socialitejs.com&t=Socialite.js" rel="nofollow" target="_blank" data-href="<?php the_permalink() ?>" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false"><span class="vhidden">Share on Facebook</span></a></li>
	<li><a class="socialite linkedin-share" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink() ?>&title=<?php the_title() ?>" rel="nofollow" target="_blank" data-url="<?php the_permalink() ?>" data-counter="top"><span class="vhidden">Share on LinkedIn</span></a></li>
</ul>
';

	return $custom_content;
}
add_filter( 'the_content', 'social_after_the_content' );

Screenshots

Let's take a look at these lazy loading social sharing buttons:

Before Hover

This is how the social icons look when the page first loads

After Hover

When you hover over them, the buttons load their files to become like shown below

Final Words

Tip: Be creative, don't just copy / paste the code above and put it on your blog, try to give it a new look. Let the creative juices flow!

Some Examples

How Do I Use Them?

You can see the image below from my blog, how I use them. (Inspired by Mashable) (Live View)

Freakify.com | Learn How to Blog Like a Pro

HIGHLIGHTS OF THE DAY