Search code examples
javascriptperformancesocial-networkinghtml

The purpose of loading External Javascript of social media into webpages


When adding social media resources in webpage, the traditional method results in loading much external JS from other domains, just to load an iframe or an anchor with a brand image background. Probably the below are the most transferred files over the web (after the http://www.google-analytics.com/ga.js 36.35KB, which is somehow inevitable for many)

http://connect.facebook.net/en_US/all.js 181.30KB (59.06KB gzipped)
https://platform.twitter.com/widgets.js 75.19KB (24.42KB gzipped)
https://apis.google.com/js/plusone.js 16.71KB
http://assets.pinterest.com/js/pinit.js (well this is small, but still unneeded connection)

For example, http://connect.facebook.net/en_US/all.js does only one thing: adding an iFrame <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Flavishdream&amp;width=292&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:180px;" allowtransparency="true"></iframe>

Twitter and Google Plus scripts does very similar tasks, only adding small HTML chunks into the page.

Why not only writing those iFrames, images and anchors HTML ?


Solution

  • Most of those scripts you've mentioned are also tracking the users behavior in the background. Also, when loading a JS file the provider (e.g. Google) could change the functionality that comes with such a script. This wouldn't be that easy when you just add a static file or write the desired HTML yourself.