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&width=292&height=180&colorscheme=light&show_faces=true&border_color&stream=false&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 ?
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.