Facebook App User Authentication using Java Script SDK: Given URL is not Allowed

StackOverflow https://stackoverflow.com/questions/8828200

Question

I'm trying to implement step two of the Recipe Box Facebook app tutorial. I have followed the instructions in step one to set up my app on Facebook and have uploaded the code pasted below to my server as per the instructions in step two of the tutorial. When I load the web page and click the add-to-timeline link I get a Facebook error stating:

Given URL is not allowed by the Application configuration.

Any insight would be greatly appreciated.

Code:

 <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
     xmlns:fb="https://www.facebook.com/2008/fbml"> 
 <head>
<head/> 
<body> 
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
    FB.init({ 
        appId:'328617653826422', cookie:true, 
        status:true, xfbml:true, oauth:true
    });
</script>

<fb:add-to-timeline></fb:add-to-timeline>

<h3>
    <font size="30" face="verdana" color="grey">
        Stuffed Cookies
    </font> 
</h3> 
<p>
    <img title="Stuffed Cookies" 
            src="http://example.com/cookie.jpg" 
            width="550"/>
</p>       
</body> 
</html>
Was it helpful?

Solution

In your app settings, be sure that domain you specify is the same domain as where this code lives. Also in the example code, their <head> tag looked like <head prefix="og: http://ogp.me/ns# og_recipebox: http://ogp.me/ns/apps/YOUR_NAMESPACEx#">. Also you appear to be missing the og: tags in your head section as well.

Here's the example code I just downloaded from their site, did I grab the wrong link? Or are you basing yours on old example code? 

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 

<head prefix="og: http://ogp.me/ns# og_recipebox: http://ogp.me/ns/apps/YOUR_NAMESPACEx#"> 
    <meta property="fb:app_id" content="YOUR_APP_ID" /> 
    <meta property="og:type" content="YOUR_NAMESPACE:recipe" /> 
    <meta property="og:title" content="Oreo Stuffed Cookies" /> 
    <meta property="og:image" content="http://YOUR_URL/cookie.jpg" /> 
    <meta property="og:description" content="The Turducken of Cookies" /> 
    <meta property="og:url" content="http://YOUR_URL/cookie.html"> 

    <script type="text/javascript">
    function postCook()
    {
        FB.api('/me/YOUR_NAMESPACE:cook&recipe=http://YOUR_URL/cookie.html','post',  function(response) {
            if (!response || response.error) {
                alert('Error occured');
              } else {
                alert('Post was successful! Action ID: ' + response.id);
              }
        });
    }
    </script>
</head> 

<body> 
    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
        FB.init({ 
            appId:'YOUR_APP_ID', cookie:true, 
                    status:true, xfbml:true, oauth:true
        });
        </script>
        <fb:add-to-timeline></fb:add-to-timeline>>
        <h3>
            <font size="30" face="verdana" color="grey">Stuffed Cookies
            </font> 
        </h3> 
        <p>
            <img title="Oreo Stuffed Cookies" src="http://YOUR_URL/cookie.jpg" width="550"/><br />
        </p>       

        <form>
            <input type="button" value="Cook" onclick="postCook()" />
        </form>

        <fb:activity actions="YOUR_NAMESPACE:cook"></fb:activity>
    </body> 
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top