Asynchronous JavaScript for Social Website Buttons

Every social website offers some-kind of JavaScript code to insert their button on webpages. Unfortunately, there’s no standard when it comes to the JavaScript code itself — some, like Google+’s +1 button are fairly sophisticated, with different ways to load and render the button, and others like LinkedIn, offer just a simple JavaScript URL to fetch. Here are Google+ and LinkedIn’s suggested buttons for comparison.

One of the main advantages to Google’s JavaScript code is that it loads asynchronously. Generally, when a webpage loads, the browser fetches content from top to bottom. In order for the webpage to render more quickly, JavaScript that isn’t essential for the layout is usually placed at the bottom of the webpage. JavaScript that is placed higher up might prevent the webpage from rendering quickly, as the browser must first fetch and then execute the JavaScript before continuing. The advantage to fetching content asynchronously is that the webpage can continue to render while the JavaScript is being retrieved, which improves the speed to load and render the complete webpage.

You might think that using Google+’s JavaScript as an example, LinkedIn’s code could be modified to retrieve it asynchronously as well — and indeed you can. Most JavaScript code for social websites can be modified and retrieved asynchronously, but some cannot. For example, Google+, Facebook, Twitter, LinkedIn, Pinterest, and StumbleUpon can all be retrieved asynchronously, but Tumblr cannot. The Tumblr JavaScript must be placed within the footer of your webpage, while all the others — when modified to use an asynchronous transfer — can be placed within the webpage header.

You could copy the Google+ code, modifying the URL for each social button’s JavaScript URL, but then you would be duplicating what is essentially the same JavaScript function. It would be much better to define the function once, and call it for each JavaScript URL. The Google+ JavaScript code basically creates a ‘script’ element (see createElement), fetches the JavaScript URL asynchronously, then inserts it (see insertBefore) before the current ‘script’ element (see getElementsByTagName). This works well, so long as the function isn’t called more than once for the same JavaScript URL — there’s no use in fetching it more than once. By assigning a unique ID for each URL to the ‘script’ element, we can test for it’s existence, and if it already exists, then exit the function early (see getElementById).

Here’s an example from the NextGEN Facebook OG plugin for WordPress I wrote.

The parameters are; the document, the element name (‘script’), a unique ID for that button, and the URL to retrieve. This function should be placed in the webpage header, and called for each social button’s JavaScript URL.

And then in the footer, you can include JavaScript that cannot be retrieved and executed asynchronously.

Update 2013-02-14 : I’ve fine-tuned the javascript a little more, to insert the code where the function is called from, and not top-most in the document, added language support (for Google+), and simplified the function’s argument list.

Did you find this post useful? Share it with your circles / friends, or leave a comment bellow.

Thank you,

js.

2 thoughts on “Asynchronous JavaScript for Social Website Buttons

  1. Hi,

    Your update from 2013-02-14 did not work so I checked it out. I think line 6 makes the problem as it should be
    var script_pos = document.getElementsByTagName(‘SCRIPT’)[0];

    I can not program in java, just compared your program with facebook’s and google plus’s script.
    Best regards: Attila

    • Thanks for your comment. The new function uses CSS IDs to insert the javascript files. Perhaps you forgot the ID? To call the function you must specify an ID for the “script” block and pass this name to the function. For example:

      Thanks,

      js.

Comments are closed.