Facebook Like Button Popup doesn't load

Question

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;">
  <span>
    <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">
      <html>
        <head>
        <body onload="onPageLoad()">
          <script>
            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];
                  break;
                }
              }
              try {
                var master_frame = parent.frames[master_frame_name];
                master_frame.ExternalNodeConnectWidget.onCommentWidgetLoaded(document);
              } catch (e) {}
            };
          </script>
        </body>
      </html>
    </iframe>
  </span>
</span>

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:

There is the infamous Unsafe Javascript attempt to access frame with URL
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?

score 2 · Accepted Answer · answered Jan 06 '12 at 23:22

2

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.

answered Jan 06 '12 at 23:22

Chris Schults

113
8

Thanks! It looks like it was reported a couple weeks after I asked it here. – Devon Ray Williams Feb 01 '12 at 07:48

score 0 · Answer 2 · answered Apr 06 '12 at 14:35

0

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?

answered Apr 06 '12 at 14:35

Sire

4,086
4
39
74

1

Generally I get most of the Facebook functionality to work when developing locally by adding `http://localhost/` to the "mobile web URL" section of your FB developers app interface. This allows you to use a completely different domain from your normal domain and still have it function. – Devon Ray Williams May 10 '12 at 15:25

Facebook Like Button Popup doesn't load

2 Answers2