Fb.event.scrite no disparar para ciertos eventos

StackOverflow https://stackoverflow.com/questions/6817894

Pregunta

Así que estoy tratando de hacer un manejo de eventos cuando un usuario hace clic en el botón Me gusta.

Mi botón de Facebook se está creando asíncronamente a través de:

(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);
}());

Y eso funciona muy bien.

También tengo la siguiente función en ejecución:

window.fbAsyncInit = function() {
    FB.init({status: true, cookie: true, xfbml: true});
    FB.Event.subscribe("xfbml.render", function() {
        console.log('xfbml.render');
        FB.Event.subscribe("edge.create", function(targetUrl) {
            console.log('edge.create');
        });
        FB.Event.subscribe("edge.remove", function(targetUrl) {
            console.log('edge.remove');
        });
    });
};

Hasta ahora, cuando carga la página, obtengo 'XFBML.Render' en la consola. Luego hago clic en el botón Me gusta y no obtengo nada.

Me gustaría que escupiera el mensaje de la consola 'Edge.Create'.

¿Alguien tiene alguna idea de lo que podría causar esto?

He puesto esta página en un sitio de acceso público antes (actualmente está en mi plataforma de desarrollo) y todavía no funcionó. Puedo volver a solicitarme.

¿Fue útil?

Solución

Para usar XFBML en su página web, debe agregar un atributo de espacio de nombres XML al elemento raíz de su página. Sin esta declaración, las etiquetas XFBML no serán en Internet Explorer.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml">

A continuación, carga el SDK usando el elemento estándar y la llamada (fb.init ()). Debe especificar un elemento nombrado raíz de FB dentro del documento también.

<div id="fb-root"></div>

y luego asegúrese de agregar su ID de aplicación dentro de la función fb.init (),

FB.init({
    appId  : 'YOUR APP ID',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true  // parse XFBML
  });

Aquí hay un código de trabajo completo:

<!doctype html>
<html lang="en" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
  <meta charset="utf-8">
  <title>Facebook Like Button</title>
</head>
<body>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'YOUR_APP_ID', status: true, cookie: true,xfbml: true});
    FB.Event.subscribe("edge.create", function(targetUrl) {
      console.log('edge.create');
    });
    FB.Event.subscribe("edge.remove", function(targetUrl) {
      console.log('edge.remove');
    });
  };
  (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>
<fb:like></fb:like>
</body>
</html>

Otros consejos

Solo para referencia futura: pasé algún tiempo tratando de hacer eventos de fuego de botón de iframe, sin suerte, pero con XFBML FB.Event.subscribe("edge.create", f); funciona bien.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top