Why we need to add

Question

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.

Simon Hutton · Accepted Answer · 2011-11-11T16:56:25.937

49

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>

edited Nov 11 '11 at 16:56

answered Nov 11 '11 at 16:46

Simon Hutton

1,354
1
14
17

2

This is an example of using unobtrusive javascript. – Teddy Nov 11 '11 at 17:57
hi anyone notice the
will cause your https:// to be unsecure?? When i directly point the browser to https://.../myfb_app/ the file isn't parse as secure if i have the
but when i remove it, the whole file does parse as secure. Any suggestions?? – alex Dec 14 '11 at 21:34
6

Couldn't they directly append to head? – Joyce Babu Oct 25 '12 at 18:27
4

Couldn't they just directly append to the first body tag? – fedmich Jan 13 '13 at 08:16
at least for the html5 version, the fb-root div should been taken off. – liuhongbo Feb 25 '13 at 16:34
6

This is not unobtrusive. Facebook should create an element to attach it's own elements to. – superluminary Jan 28 '14 at 14:32
5

The v2.1 SDK creates it for you (with a warning in the console) if not already present. – David Harkness Aug 19 '14 at 20:08
3

Update: The SDK no longer requires the `
` tag, and there is no longer any warning in the console if the tag is omitted. See [this answer](http://stackoverflow.com/a/33428040/1145177). – Doug S Nov 10 '15 at 19:44
Josh. No. See my reply to you on my answer. – Doug S Jun 05 '18 at 16:25

score 42 · Answer 2 · answered Oct 30 '15 at 03:10

42

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

answered Oct 30 '15 at 03:10

Doug S

9,265
2
34
40

Except then we seem to have problems like [this](http://stackoverflow.com/questions/24019877/fb-init-function-gives-wrong-version-error). – mgalgs Sep 01 '16 at 15:44
@mgalgs: Reading those comments, it doesn't appear that anyone found a fix for whatever was causing the OP's issue. So I wouldn't say adding the div tag is a fix for anything. If there was an issue, it's been 2 years and I'm sure it's been resolved by Facebook. The best option is to follow their code recommendations, which do not include that div tag. – Doug S Sep 02 '16 at 03:36
@JoshM. Any warning you're receiving isn't related to this topic. Just follow the current code that Facebook recommends. – Doug S Dec 07 '16 at 18:02
@DougS ?? It's completely related. v2.8 shows the warning if you don't include the `fb-root` div. – Josh M. Dec 07 '16 at 18:03
@JoshM. Copy-and-paste the warning here. I suspect the warning you're referring to is completely unrelated. The Facebook code has long since done away with the `div` tag. – Doug S Dec 07 '16 at 18:09
2

@DougS See here (I wish I could format it better): facebook-sdk-debug.js:2069 The "fb-root" div has not been created, auto-creating @ facebook-sdk-debug.js:2069append @ facebook-sdk-debug.js:3237appendHidden @ facebook-sdk-debug.js:3284(anonymous function) @ facebook-sdk-debug.js:7321flush @ facebook-sdk-debug.js:3164 – Josh M. Dec 13 '16 at 03:25
@JoshM. That's not a "warning". That's debug info simply stating that it's auto-creating the div tag. Again, just follow the setup instructions Facebook has provided, which has done away with hard-coding that div tag. – Doug S Sep 14 '17 at 08:24
1

Seems like FB reverted this change,
does show up in the code generated by Like Button Configurator on https://developers.facebook.com/docs/plugins/like-button/#, and the button doesn't show up without this div – Vivek Singh Apr 04 '20 at 17:48

score -2 · Answer 3 · answered Oct 31 '16 at 13:44

-2

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.

answered Oct 31 '16 at 13:44

Pierre Olivier Martel

3,014
4
23
30

Why we need to add

3 Answers3

Linked