Why we need to add <div id="fb-root"></div>

JavascriptFacebookSdk

Javascript Problem Overview


Why we need to add these pair of tags within our facebook application. What's the use of this pairs of tags. I created an application which use an apprequest, and it works good even if I didn't add these tags in front of my scripts. So I really wonder why we need to add them. Thank you.

Javascript Solutions


Solution 1 - Javascript

It's the place holder for the Facebook javascript script to attach elements to the DOM. Without this when the referenced Facebook script is ran it has nowhere to attach elements.

You can see fb-root gets appended to as part of the initialisation.

<script type="text/javascript">
	  window.fbAsyncInit = function() {
	    FB.init({appId: 'xxxxxx', status: true, cookie: true,
	             xfbml: true});
	  };

	  (function() {
	    var e = document.createElement('script'); e.async = true;
	    e.src = document.location.protocol +
	      '//connect.facebook.net/en_US/all.js';
	    document.getElementById('fb-root').appendChild(e);
	  }());
    </script>

Solution 2 - Javascript

UPDATE: Facebook no longer requires that you include <div id="fb-root"></div> in your HTML.

You can now remove it. The Facebook Javascript SDK creates it on its own, appending it to the BODY tag. No warnings are shown in the console either, as it did before.

The Facebook documentation has also been updated, no longer showing the <div id="fb-root"></div> requirement.

Old documentation for version 1.0 (shows <div id="fb-root"></div>): https://developers.facebook.com/docs/javascript/quickstart/v1.0

Current documentation for version 2.5 (no longer shows <div id="fb-root"></div>): https://developers.facebook.com/docs/javascript/quickstart/v2.5

Solution 3 - Javascript

It gets even more simple with Turbolinks 5. You just need to add data-turbolinks-permanent=true to the fb-root div and it will be persisted between requests. No need to fiddle with the javascript.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionTinggoView Question on Stackoverflow
Solution 1 - JavascriptSimon HuttonView Answer on Stackoverflow
Solution 2 - JavascriptDoug SView Answer on Stackoverflow
Solution 3 - JavascriptPierre Olivier MartelView Answer on Stackoverflow