Question

Both the Tweet Button and Facebook Like widgets tell you to add something like this to your HTML:

<script>
!function(d,s,id){
    var js,fjs=d.getElementsByTagName(s)[0];
    if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;
        js.src="https://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js,fjs);
    }
}(document,"script","twitter-wjs");
</script>

which dynamically adds a <script> element to the DOM which then loads the actual widget JavaScript. Why is this done dynamically instead of directly loading the widget like this (which is simpler and cleaner):

<script src="https://platform.twitter.com/widgets.js"></script>

The only reason I can think of is that it defers the script load until the page has loaded, but this can just as easily be accomplished by placing the <script> just before the </body> close.

Answer 1

Because the people implementing this code can’t be guaranteed to be competent enough to place the script in the right place. Additionally, the script would ideally be universal enough that anyone using any system could easily implement it.

Some CMSs don’t allow fine-grained control of where scripts are added to a page. It’s in the best interest of social networks to provide code that more people can use with less confusion.