CODEWITHSUNDEEP
facebookpluginscross-domainfacebook-like
Devon Ray Williams
Devon Ray Williams

Reputation: 63

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;">
  <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:

  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?

Upvotes: 1

Views: 1315

Answers (2)

Sire
Sire

Reputation: 4358

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?

Upvotes: 0

Chris Schults
Chris Schults

Reputation: 113

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.

Upvotes: 2

Related Questions