Like most websites these days, my personal website has an array of widgets for social networks, such as “Like”, “Follow” and “Share” buttons etc.
In order to embed these widgets, I use the JavaScript code that is provided on the social networks’ developer sites, plus the HTML5 markup with the relevant data-* attributes for “hooks” for the buttons.
At present, these API “loader” functions are located in an external .js file which is triggered via a <SCRIPT> element located in the <HEAD> of the web page.
I notice that these “loader” functions call another file from the relevant social networks’ server. Using Facebook’s JavaScript loader function as an example:
(function(d,s,id) {
var js,fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = '//connect.facebook.net/en_GB/all.js#xfbml=1';
fjs.parentNode.insertBefore(js,fjs);
}
(document,'script','facebook-jssdk'));This function calls the Facebook's main API script:
connect.facebook.net/en_GB/all.js
I also have the Twitter and Google+ loader functions in the same external file.
However, although I am far from an expert in JavaScript and how it relates to caching, but I get the feeling that using an external script is such causing cache-related problems. These buttons seem to have a mind of their own, and whether they actually load or not seems to be a matter of pot-luck! I was wondering if it is anything to do with my Apache server automatically sending out a Last-Modified: HTTP header.
In short, the question that I want answered is this:
Which is the most efficient and bug-free method of triggering these API loaders: via an external or embedded script?
In other words: do you think that embedding the API loader functions will improve the buttons’ loading and performance – or does it rally matter whether the code is embedded or in an external file?
