How To Lazy Load Social Share Buttons Like TechCrunch Does

Social share buttons normally increase the website loading time and cause the document rendering to hang while waiting for the social share buttons to load. Almost 90% of websites and blog don’t really care about the extra loading time caused by these independent social share buttons. To get rid of this, Socialite.js – a 2KB or less (when minified and compressed) javascript adds various techniques to lazy load the social share buttons only when its needed.

A perfect example is how the way TechCrunch handles the social share buttons. If you’r looking for something like that, then here comes the method to achieve that.

How to Setup?

Step 1: Add socialite.js to header

Step 2: Socialite.js was programmed to easily customize and configure the script, with a little bit of CSS work you will get the desired output. However beginners are recommended to use the Socialite’s CSS to get a better understanding on how it works.

Socialite supports – Facebook, Twitter, Google Plus, Linked-in, Pinterest and Spotify. For an example lets take Twitter. Here “socialite” is the main class and “twitter” is to specify the social network. For Facebook simple replace “facebook” instead of “twitter”.

<a class="socialite twitter" href="http://twitter.com/share" data-url="http://www.yourdomainname.com">
    Share on Twitter
</a>

More details about the setup is available here https://github.com/dbushell/Socialite/blob/master/README.md

Some more concept demos:

• Hover Demo
• Scroll Demo

Socialite is also available as WordPress plugin. Check it out here