Where is the best place for <div id="fb-root" and the JS?

Question

so, the div and call to the fb js: Fb says to put it right after the (body) tag. Any wp plugin that uses it will put it in the footer (wp_footer(), because, well, there is no wp_just_after_body()). I have had a situation once where fb functionality that i needed would only work when this stuff was after the body tag. I dont know js enough to know what the difference is and whether body or footer is the best place for this.

Solution

Just after the opening body tag on each page you want to load it.

More from facebook SDK docs:

The fb-root element must not be hidden using display: none or visibility: hidden, or some parts of the SDK will not work properly in Internet Explorer.

The SDK inserts elements into fb-root which expect to be positioned relative to the body or relative to an element close to the top of the page. It is best if the fb-root element is not inside of an element with position: absolute or position: relative. If you must place the fb-root element inside of a positioned element, then you should also give it a position close to the top of the body or some parts of the SDK may not work properly.

Comments

[Doug Cassidy]

Not exactly the answer i was looking for @Shawn E Carter , but thank you. I found this today: "The SDK inserts elements into fb-root which expect to be positioned relative to the body or relative to an element close to the top of the page. It is best if the fb-root element is not inside of an element with position: absolute or position: relative. If you must place the fb-root element inside of a positioned element, then you should also give it a position close to the top of the body or some parts of the SDK may not work properly." developers.facebook.com/docs/reference/javascript

[ShawnDaGeek]

sorry Doug, I run the SDK in an app just above </body> Asynch. The reason it works is because i write all the social plugin from a function with in the Async, then use xfbml.Parse to render. Hope this helps. Recommendation for placement is for timing purposes. You do not want to make calls if the sdk has not downloaded and init.

[Doug Cassidy]

Ah, so, I think what youre saying is, because youre running everything within the window.fbAsyncInit, it doesnt really matter when you do that block of js. If there are things that happen before the fb js, it wont work. And if i have fb's doc right, being relative to the body ensures the js load first? Do the elements of html load in order of hierarchy, that is, body,container div, div within container, div withinthat, etc?

[ShawnDaGeek]

what i am saying is, i wrap all my calls in functions and call them from within async, so they are not called until after the sdk has been initialized. Timing is everything. if you are using Synchronous Loading it will not work. The function assigned to window.fbAsyncInit is run as soon as the SDK is loaded. Any code that you want to run after the SDK is loaded should be placed within this function and after the call to FB.init. For example, this is where you would test the logged in status of the user or subscribe to any Facebook events in which your application is interested.

[ShawnDaGeek]

In my case the html loads in order but i am loading Facebook last. After that i write to DOM.

[Doug Cassidy]

Right, but, for example, a button with onclick="FB.logout()", would need to load either after the js or would malfunction until the js was finally loaded?

[ShawnDaGeek]

you are correct that is why i wrap the calls in functions, example the login button. . function loginbutton(){ var loginb=document.getElementById('loginbutton'); loginb.innerHTML='<div class="fb-login-button" data-autologoutlink="true" data-show-faces="false" data-width="200" data-max-rows="1" data-scope="read_stream,user_likes"></div>'; FB.XFBML.parse(loginb); };

[ShawnDaGeek]

in the FB.logout() case i would render that button with innerHTML from a function after js sdk loaded