Facebook Like Button Popup doesn't load

This is my first question asked, so if I leave out details please be a little lenient. Thanks!

I am using the Facebook Like Button plugin on my site (tried both HTML5 version and xfbml version). I have included all necessary tags and scripts for xfbml and HTML5 support. I have followed the "spec" and done a thorough amount of searching here and elsewhere to the problem:

The like button functions correctly, except that the flyout/popup that is supposed to show after clicking the button doesn't load. I mean load, not show (and yes I already checked for overflow:hidden issues per the spec). The new <span> (which includes the <iframe>) are added to the DOM immediately after the like button <span>, and they load all of the code that is supposed to be there:

<span class=" fb_edge_comment_widget fb_iframe_widget " style="top: 19px; left: 0px; z-index: 10000;">
    <iframe id="fa02aa64d8da" class="fb_ltr" scrolling="no" name="fee6eb9f6f2768" style="border: medium none; overflow: hidden; height: 225px; width: 401px;" src="http://www.facebook.com/plugins/comment_widget_shell.php?api_key=233493930007947&locale=en_US&master_frame_name=fa12240bc73214&sdk=joey">
        <body onload="onPageLoad()">
            var onPageLoad = function() {
              document.domain = 'facebook.com';
              var loc = window.location.toString();
              var index = loc.indexOf('?');
              var qs = loc.substring(index + 1);
              var params = qs.split('&');
              var master_frame_name = '';
              for (var i in params) {
                var components = params[i].split('=');
                if (components[0] == 'master_frame_name') {
                  master_frame_name = components[1];
              try {
                var master_frame = parent.frames[master_frame_name];
              } catch (e) {}

Now after that <span> is loaded it is supposed to fire the script function onPageLoad which should load all of the data into the <iframe>. Instead I get a bunch of errors:

  1. There is the infamous Unsafe Javascript attempt to access frame with URL
  2. When you manually run the onPageLoad() function (in hopes of it loading the content into the iframe) in the console/Firebug, you get

(in Chrome 15)

    Error: SECURITY_ERR: DOM Exception 18
      code: 18
      message: "SECURITY_ERR: DOM Exception 18"
      name: "SECURITY_ERR"
      __proto__: DOMException

(in Firefox 7)

    Error: Illegal document.domain value
    document.domain = 'facebook.com';

I presume this has to do with cross-domain requests, but it seems like for other people, they just get the error but the popup still loads properly. Any ideas how to get this to work?


This is a known Facebook bug: http://developers.facebook.com/bugs/293075054049400

Basically, one gets this behavior if secure browsing is enabled on the Facebook user's account.

If you have secure browsing disabled (as it is default) here is another possible solution: You cannot use localhost in the og:url since Facebook cannot surf that page to get the data. So when developing, enter the live site URL in og:url, og:image, the like/share button url etc. Even that might not help, the click needs to be made on the live site, when I deployed it worked fine.

Anyone know a work around for this to make it easier when developing locally?

Need Your Help

Can I Force A ASP.Net Website to Show Time in A Specific Time Zone?

c# asp.net time timezone

I have a client request that all times be displayed in Pacific Time Zone, regardless of client settings. I'd like to avoid a scenario where I have to call a function for every time display and inst...

My blog doesn't display properly with Internet Explorer

internet-explorer cross-browser

I am sure this is easy stuff for all the readers of this website but this kind of problem is difficult for me.