FB.ui puzzle: inconsistent error code 191... (seems like FB.init is frequently not working)

Question

I'm using FB.ui() like so:

<script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '##########', // App ID
          channelUrl : '//www.xxxxxxxxxx.com/channel.php', // Channel File
          status     : true, // check login status
          cookie     : true, // enable cookies to allow the server to access the session
          xfbml      : true  // parse XFBML
        });
    
        // Additional initialization code here
      };
    
      // Load the SDK Asynchronously
      (function(d){
         var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement('script'); js.id = id; js.async = true;
         js.src = "//connect.facebook.net/en_US/all.js";
         ref.parentNode.insertBefore(js, ref);
       }(document));
    </script>

Then, here's the link to send the message:

<a href='#' onClick="
        FB.ui({
          method: 'send',
          name: 'Bla bla bla',
          link: 'http://www.xxxxxxxxxxx.com',
          to: ###########,
          //redirect_uri: 'http://www.xxxxxxxxxxx.com/fb/'
          });
        ">Send a message</a>

PROBLEM: This works like a charm for me and every computer/browser I've tested on. But my client gets the following error message very frequently:

API Error Code: 191
API Error Description: The specified URL is not owned by the application
Error Message: redirect_uri is not owned by the application

This has me totally stumped! Is anything wrong with my code? And if so, why can't I EVER reproduce this bug while my client consistently can on multiple computers/browsers?

PS: If you want to try yourself, the page is live here. You'll have to authorize the app, but I promise nothing creepy will happen.

EDIT: The error mentions the redirect_uri, which you'll notice is commented out in my code. The reason is because when I include that parameter, the dialogue doesn't close when I hit "close".

EDIT2: I was able to reproduce this bug on a friend's computer, and CBroe also confirmed it. So, (setting aside the mystery of why I still can't produce it myself), the thing that has me most stumped is why does this only happen half of the time?? If my code is incorrect it should never work, right??

Here's the url from the error message:

https://www.facebook.com/dialog/send?display=popup&link=http%3A%2F%2Fwww.streetofwalls.com&locale=en_US&name=Career%20Networking%20powered%20by%20Street%20of%20Walls&next=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D8%23cb%3Df2c657ef78%26origin%3Dhttp%253A%252F%252Fwww.streetofwalls.com%252Ff3575a615c%26domain%3Dwww.streetofwalls.com%26relation%3Dopener%26frame%3Df1ca46b43c%26result%3D%2522xxRESULTTOKENxx%2522&sdk=joey&show_error=true&to=573501273 

After url_decode() version:

https://www.facebook.com/dialog/send?display=popup&link=http://www.streetofwalls.com&locale=en_US&name=Career Networking powered by Street of Walls&next=http://static.ak.facebook.com/connect/xd_arbiter.php?version=8#cb=f2c657ef78&origin=http%3A%2F%2Fwww.streetofwalls.com%2Ff3575a615c&domain=www.streetofwalls.com&relation=opener&frame=f1ca46b43c&result=%22xxRESULTTOKENxx%22&sdk=joey&show_error=true&to=573501273

EDIT3: Part of this puzzle is solved. The times when the error occurs are the result of FB.init() not working. I've wrapped the FB.ui() in FB.getLoginStatus(function(response){ \\... } so now you can see a more useful error in the console. The open question is... WHY DOES FB.init() fail so often?

Answer 1

This is due to a configuration error between your redirect_uri and the settings that you have specified for your Facebook app. See the answer to this question.

The redirect_uri should be equal (or relative) to the Site URL that you set in your Facebook app's settings. So make sure your Site URL is set and that it points to a directory that is equal to or lower than your redirect_uri. Also, make sure you have set the app's domain correct in Facebook's settings.

For example:

App domain: streetofwalls.com

Site URL: / Secure Canvas URL: / Secure Page Tab URL: http://www.streetofwalls.com

Answer 2

First you load the following script in the head of your page:

<script type="text/javascript" src="http://www.streetofwalls.com/wp-content/themes/streetofwalls/js/main.js"></script>

Inside that script you try to load the FB JavaScript SDK asynchronously. The SDK requires the fb-root element in order to load properly as stated in the docs. But your fb-root element might not be rendered yet, so here is the problem I guess.

Put the window.fbAsyncInit = ... and the code for loading the SDK asynchronously inside jQuery(document).ready(function($) { ... }); and you should be fine.

For debugging you could also try to load the Facebook SDK synchronously.

Another thing I have noticed: You have two script tags inside the head of your site which load the FB JavaScript SDK. You should remove both.

Answer 3

So Nitzan deserves the credit for this for his insightful comment, but here's the solution.

The error message I was getting was a result of the fact that FB.init() wasn't loading, or at least it wasn't loading in the proper order with respect to the rest of the page. I copied the code from the Facebook Developer docs and it loads asynchronously... which turns out to be kind of a big pain in the ass...

So instead of what I had, I switched to loading it the old fashioned way:

FB.init({
      appId      : '##########', // App ID
      channelUrl : '//www.xxxxxxxxxx.com/channel.php', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

This, combined with some reordering of the other scripts, seems to have resolved my problem.