FB.Event.subscribe not firing for certain events

Asked 25/7, 2011 at 14:45 Answered 8/12, 2011 at 14:10

Solved facebook facebook-like facebook-javascript-sdk xfbml

So I'm trying to do some event handling when a user clicks the like button.

My Facebook button is being created asynchronously via:

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

And that works great.

I have the following function running as well:

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

So far, when I load the page, I get 'xfbml.render' in the console. Then I click the like button & I get nothing.

I'd like for it to spit out the console message 'edge.create'.

Does anyone have any idea what could cause this?

I've put this page on a publicly accessible site before (It's currently on my dev rig) & it still didn't work. I can again if requested.

Pincer answered 25/7, 2011 at 14:45 Comment(0)

In order to use XFBML on your webpage, you must add an XML namespace attribute to the root element of your page. Without this declaration, XFBML tags will not render in Internet Explorer.

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

Next, You load the SDK using the standard element and calling (FB.init()). You must specify a element named fb-root within the document as well.

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

and then make sure you add your app id inside FB.init() function,

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

Here's a full working code:

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

Promotive answered 25/7, 2011 at 19:11 Comment(2)

Turns out, it was the AppId portion of it. I was hoping to avoid using it because our websites are dynamically generated per client & we aren't able to set up appIds for all of them. But this certainly answers my question. Thank you! – Pincer 26/7, 2011 at 16:8

JS SDK will not work if you don't add app ID, anyway glad it answered your question, thanks – Promotive 29/7, 2011 at 16:14

Just for future reference: spent some time trying to make iframe button fire events — no luck, but with xfbml FB.Event.subscribe("edge.create", f); works fine.

Norenenorfleet answered 8/12, 2011 at 14:10 Comment(0)

Recommended topics

Hot tags