I think you should solve the main issue instead, which solution is provided by Facebook (Loading the SDK Asynchronously):
You should insert it directly after the opening tag on each page you want to load it:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.1'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
From the documentation:
The Facebook SDK for JavaScript doesn't have any standalone files that
need to be downloaded or installed, instead you simply need to include
a short piece of regular JavaScript in your HTML that will
asynchronously load the SDK into your pages. The async load means
that it does not block loading other elements of your page.
UPDATE: using the latest code from the documentation.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…