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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | /* Script for asynchronus load of sharing buttons */ (function(w, d, s) { function go(){ var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) { if (d.getElementById(id)) {return;} js = d.createElement(s); js.src = url; js.id = id; fjs.parentNode.insertBefore(js, fjs); }; //Facebook load('//connect.facebook.net/en_US/all.js#xfbml=1', 'fbjssdk'); //Google+ load('https://apis.google.com/js/plusone.js', 'gplus1js'); //Twitter load('//platform.twitter.com/widgets.js', 'tweetjs'); //LinedIN load('//platform.linkedin.com/in.js', 'lnkdjs'); //Pinterest load('//assets.pinterest.com/js/pinit.js', 'pinitjs'); } if (w.addEventListener) { w.addEventListener("load", go, false); } else if (w.attachEvent) { w.attachEvent("onload",go); } }(window, document, 'script')); |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /* Enqueueing the script inside your theme functions.php */ function meks_load_scripts(){ /* This will load js file only for your single posts, if you want to use same thing for pages use "is_singular()" check instead. Or, if you want to use it on archive pages as well, remove "if" statement completely. */ if(is_single()){ wp_enqueue_script( 'meks_async_share', trailingslashit(get_template_directory_uri()).'/js/share.js', array( 'jquery' )); } } add_action('wp_enqueue_scripts', 'meks_load_scripts'); |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <?php if( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php the_title(); ?> <?php the_content(); ?> <ul class="meks_share"> <!-- twitter --> <li><a class="twitter-share-button" data-count="vertical" data-via="mekshq" data-url="<?php the_permalink() ?>"></a></li> <!-- LinkedIN --> <li><script type="IN/Share" data-counter="top" data-url="<?php the_permalink() ?>"></script></li> <!-- facebook like --> <li><div class="fb-like" data-send="false" data-layout="box_count" data-width="50" data-show-faces="false" data-href="<?php the_permalink() ?>"></div></li> <!-- g+ --> <li><g:plusone size="tall" data-href="<?php the_permalink() ?>"></g:plusone></li> <!-- pinterest --> <li><a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink() ?>&media=<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>&description=<?php echo urlencode(get_the_title()); ?>" class="pin-it-button" count-layout="vertical"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></li> </ul> <?php endwhile; ?> <?php endif; ?> |
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!