Given URL is not permitted by the application configuration

Question

I have used this in my html page...

<script> 
window.fbAsyncInit = function() {
 // init the FB JS SDK
 FB.init({
 appId : 'xxxxxxxxxxxxxx', // App ID from the App Dashboard
 status : true, // check the login status upon init?
 cookie : true, // set sessions cookies to allow your server to access the session?
 xfbml : true // parse XFBML tags on this page?
 });
 // Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK's source Asynchronously
// Note that the debug version is being actively developed and might 
// contain some type checks that are overly strict. 
// Please report such bugs using the bugs tool.
(function(d, debug){
 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" + (debug ? "/debug" : "") + ".js";
 ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));
 function shareOnFb(action, msg){
 FB.ui({ 
 method: action, 
 message: msg
 });
 }
</script>

when every I try to call any FB method it says this in my console

Given URL is not permitted by the application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the Apps domains.

this is my fb app setting.. do i need to change something here, m running my website locally for time being, so i tried adding

localhost/OfferDrive/ to app domain on this page but it says error that it is not a valid domain

fb app settings

• Alexei Levenkov: possible duplicate of how can i use localhost while developing facebook graph website?
• 1Mayur: @AlexeiLevenkov thnx, but i didnt even knew m using graph API :P thnx for letting me know.. i can search my queries better now :D
• Bhavik Ambani: I am getting message - URLs is not permitted by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.

Answer 1

You need to fill the value for Website with Facebook Login with the value http://localhost/OfferDrive/ to allow Facebook to authenticate that the requests from JavaScript SDK are coming from right place

• 1Mayur: I guess it did the trick, at least m getting some syntax error now ;) will solve that and let you know
• Anvesh Saxena: Do post if you get any other trouble
• 1Mayur: how to post images while publishing to wall.. i get an error "FBCDN image is not allowed in stream"
• Andrade: same here: Top-level domains are not allowed
• Taylor D. Edmiston: I received the top level domain error as well. Creating a separate Facebook app for development purposes and setting its "Site URL" (not "App Domains") after clicking "Add Platform" --> "Website" worked for me.

Answer 2

Update to Anvesh Saxena's answer(correct but outdated as FB App interface has changed):

In your FB App configuration you need to add a Website platform with your website's URL set. Then you can add App Domains which I set to our website's base domain (e.g. for a URL like http://www.mycoolwebsite.com, just use mycoolwebsite.com).

New FB Settings Screenshot

IMPORTANT: In order for this to work you'll need to be using a subdomain of your app's URL for your local development. You can do this easily by modifying your hosts file on your development computer to use a non-existent subdomain of your website such as local.mycoolwebsite.com. Just google 'edit hosts file' for your platform (e.g. mac / windows) if you're not familiar with how to do this.

• Taylor D. Edmiston: Another possible solution, as mentioned by Heroku, is to create a separate Facebook app for development (see devcenter.heroku.com/articles/…). Note that using 127.0.0.1:5000 as shown returned on error on Facebook for me, but localhost:5000 worked fine.
• Bhavik Ambani: I am getting message - URLs is not permitted by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
• Seth: I had all of these, but was incorrectly using ...heroku.com instead of ...herokuapp.com. When I fixed these and updated everything to use https://, it started working great.

Answer 3

Settings -> Advanced, add url to "Valid OAuth redirect URIs". This works for me.

• George Kagan: Thanks! Worked for me, I added both localhost & localhost:8100 (doing Ionic development)
• Madeline Trotter: Thank you!! I tried all kinds of combinations on the "Basic" page and didn't even notice the OAuth field on "Advanced".
• tvanfosson: We changed domains for our app, moving it to a subdomain. This was required even though the subdomain was authorized.
• Enrico Giurin: Thanks a lot. I added localhost:3000 (Node.JS) and it works! Thanks again

Answer 4

• Go to Facebook for developers dashboard
• Click My Apps and select your App from the dropdown.
  (If you haven't already created any app select "Add a New App" to create a new app).
• Go to App Setting > Basic Tab and then click "Add Platform" at bottom section.
• Select "Website" and the add the website to log in as the Site URL(e.g. mywebsite.com)
• If you are testing in local, you can even just give the localhost URL of your app.
  eg. http://localhost:8080/myfbsampleapp
• Save changes and you can now access Facebook information from http://localhost:8080/myfbsampleapp

• Bhavik Ambani: Getting message - URLs is not permitted by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
• Lucky: @BhavikAmbani Did you try my answer?
• Bhavik Ambani: @Lucky yes, still facing same prob
• Lucky: @BhavikAmbani At which step are you getting the message? Please verify the Website URL properly that you entered in the page..
• Bhavik Ambani: @Lucky I have verified the same and also getting the same message.

Answer 5

An update to munsellj's update..

I got this working in development just by adding localhost:3000 to the 'Website URL' option and leaving the App Domains box blank. As munsellj mentioned, make sure you've added a website platform.

Answer 6

1. From the menu item of your app name which is located on the top left corner, create a test app.
2. In the settings section of the new test app: add 'http://localhost:3000' to the Website url and add 'localhost' to App domains.
3. Update your app with the new Facebook APP Id
4. Use Facebook sdk v2.2 or whatever the latest in your app.

Answer 7

Note, the localhost is a special string that FB allows here. If you didn't configure your debugging environment under localhost, you'll have to push it underneath that name as far as I can tell.

Answer 8

Sometimes this error occurs for old javascript sdk. If you save locally javascript file. Update it. I prefer to load it form the facebook server all the time.

• Neil: I followed all the suggestions above and none worked, it wasn't until I pointed my app directly at the Facebook CDN that it finally worked (was using an older version locally)

Answer 9

Missing from the other answers is how to allow localhost(or 0.0.0.0 or whatever) as an oauth callback url. Here is the explanation. How can I add localhost:3000 to Facebook App for development

Answer 10

Another reason this can happen is if you send the wrong appId. This can happen in early development if you have a development app and a production app. If you hard-code the appId for dev and push to prod, this will show up.

• Henry: Fixed my problem! Forgot to change the appid and was starting to get worried.