1

I'm trying to use the 'edge.create' callback function of the Facebook javascript SDK to send an alert when a user clicks the like button on a page. Ultimately my goal is to have it regenerate styles on the page so that it can resize the facebook widget div dynamically when clicked. I cannot get the callback to work even for the alert though.

<html lang="en">
<head>
    <title></title>
    <script   src="http://connect.facebook.net/en_US/all.js#appId=216985861663967&amp;xfbml=1"></script>
    <script>
        FB.Event.subscribe('edge.create', function() {
            alert('Liked');
        });
    </script>
</head>
<body>
<div id="fb-root"></div>
<fb:like send="false" layout="button_count" show_faces="false" font=""></fb:like>

</body>
</html>

Any ideas why this isn't working? When the button is clicked it gives the error:

Unsafe JavaScript attempt to access frame with URL

and later says Domains, protocols and ports must match.

tks
  • 745
  • 9
  • 31

3 Answers3

2

From your description I'm guessing you're testing in Chrome/Safari on a local server?

Chrome/Safari

Try setting your Like Button URL to an existing Web address:

<fb:like href="http://google.com" ...

An important note is that the alert depends on the Like's success, which depends on the URL being reachable by Facebook. You won't be able to Like a URL that only exists on your local server (ex. http://localhost:3000/my-page.html). Obviously Liking Google is a test fix; you can instead push your code to a staging server for the same effect, but it takes more time and effort.

When I make this change the Like Button and alert work in Chrome 12 for Mac, but I still see the same error as you. I think Chrome is just sensitive with iframes; I doubt the error can be avoided.

Firefox

If I make the above change, it still doesn't work in Firefox 5 for Mac. I get the error e.root is undefined from Facebook's all.js and the Like Button doesn't even appear.

If I move the all.js and FB.Event.subscribe() scripts below the fb-root div, the Like Button shows up and the alert works with no errors.

Internet Explorer

According to Facebook's documentation you need to add Facebook's XML namespace to your <html> tag for the button to render in Internet Explorer:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
jhiro009
  • 576
  • 4
  • 13
0

You can't use alert() in a Facebook application, at least not in Chrome (if Firefox still allows it, they probably won't for much longer).

Use console.log() instead, and open the Javascript console to see the messages that are emitted.

Jonathon Hill
  • 3,445
  • 1
  • 33
  • 31
0

You have to indicate your application id. If you still not have any app, just create it in developer section of facebook.

Example:

<script>
    window.fbAsyncInit = function() {
        FB._https = true;
        FB.init({appId: 'YOURAPP', status: true, cookie: true, xfbml: true, channelURL : 'http://www.YOURSITE/channel.html'});
        FB.Event.subscribe('edge.create', function(response) {
            alert('Liked');
        });
    };
</script>

P.S. Inside http://www.YOURSITE/channel.html file, put next row - 

<script src="http://connect.facebook.net/en_US/all.js"></script>
Vitalii Plodistov
  • 125
  • 1
  • 10