Is there a way to prevent the loading of the same JS / CSS file multiple times when I have multiple Like buttons on the page?

Question

I have a page with several Like buttons, each of which points to a different URL.

Unfortunately, each of the Like buttons asks for a JS and CSS script, and with many Like buttons on the page, the same scripts are loaded over and over for each of them.

For clarification, I use xfbml and load the JS-SDK asynchronously, and the file "connect.facebook.net/en_US/all.js" is only deleted once.

I am having problems with files:

• http://static.ak.fbcdn.net/rsrc.php/v1/yw/r/2RZcOthJlDD.js
• http://static.ak.fbcdn.net/rsrc.php/v1/yx/r/QAxExOsrrUv.css

I assume this is because every inserted <iframe> element requires these resources.

If you look at http://techcrunch.com/ , you will notice that they circumvented this by lazily inserting Facebook / Twitter elements, etc. However, if you click on some of them, you will notice that the same JS and CSS bits are still unknowingly loaded several times.

Does anyone have a solution that would limit each of these files to a single page request, regardless of how many Like buttons are on it?

Answer 1

I think if you use HTML5 code, this is no longer the case. You have the base code that you use only once per page:

 <div id="fb-root"></div> <script>(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_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> 

And some code for buttons, comments, ... like this, which you can use n-times on the page:

 <div class="fb-like" data-href="YOUR_URL" data-send="true" data-width="450"></div> 

It only needs to be loaded once.