javascript - net - Por qué necesitamos agregar<div id="fb-root"></ div>

facebook js sdk login

Question

Por qué necesitamos agregar este par de etiquetas dentro de nuestra aplicación de Facebook. ¿De qué sirve este par de etiquetas? Creé una aplicación que utiliza una solicitud de aplicación, y funciona bien incluso si no agregué estas etiquetas al frente de mis scripts. Entonces realmente me pregunto por qué necesitamos agregarlos. Gracias.

Answer 1

ACTUALIZACIÓN: Facebook ya no requiere que incluya <div id="fb-root"></div> en su HTML.

Ahora puedes eliminarlo. El Javascript SDK de Facebook lo crea por sí mismo, anexándolo a la etiqueta BODY . No se muestran advertencias en la consola tampoco, como lo hizo antes.

La documentación de Facebook también se ha actualizado y ya no muestra el requisito <div id="fb-root"></div> .

Documentación antigua para la versión 1.0 (muestra <div id="fb-root"></div> ): https://developers.facebook.com/docs/javascript/quickstart/v1.0

La documentación actual para la versión 2.5 (ya no muestra <div id="fb-root"></div> ): https://developers.facebook.com/docs/javascript/quickstart/v2.5

Answer 2

Es aún más simple con Turbolinks 5. Solo necesita agregar data-turbolinks-permanent=true al div fb-root y se mantendrá entre las solicitudes. No hay necesidad de jugar con el javascript.

Answer 3

Es el marcador de posición para el script de JavaScript de Facebook para adjuntar elementos al DOM. Sin esto, cuando se ejecuta el script de Facebook referenciado, no tiene lugar para adjuntar elementos.

Puede ver que fb-root se agrega como parte de la inicialización.

<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>