xfbml form does not render - facebook

I am trying to use javascript sdk for rendering a XFBML form on our site and i keep getting
Unable to load the registration form for . You may have previously blocked this app on Facebook. Go to your Facebook privacy settings to unblock this app. (Error: Invalid 'client_id'.)
my app is registered and with correct id.
the code looks like is:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '118446328234891', // App ID
channelUrl : '//www.sakshum.org/channel.html', // 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>
<script src="https://connect.facebook.net/en_US/all.js#appId=118446328234891&xfbml=1"></script>
<fb:registration fields="name,birthday,gender,location,email" redirect-uri="http%3A%2F%2Fwww.sakshum.org%2FFbValidation" width="530">
</fb:registration>
just to add on if i use non xfbml version using just iframe then all works fine.

Looks like the issue was using encoded redirect_uri. changing it to normal url fixed the issue.

The redirect-uri must match with the setting "Site URL" in your Facebook app.

Related

Mobile Safari Facebook Login Redirect Issue - Javascript SDK

The Javascript SDK is working for every browser on my desktop, but I'm having issues with Safari on an iPhone.
Here's what happens:
- I click Login
- Facebook Oauth opens in a new window, and I successfully login
- The Facebook Oauth Window closes, and the old window shows up
- Rather than refresh the login page (as desktop browsers do), nothing happens...
So I'm successfully logged in, but the old page shows up. The user thinks that they're not logged in. I've seen similar issue son stack overflow but no answers.
Has anyone seen this or know of a solution?
<html xmlns:fb="http://ogp.me/ns/fb#">
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : <%= FACEBOOK_CONFIG['app_id'] %>, // App ID
channelUrl : '//'+window.location.hostname+'/channel', // 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
// whenever the user logs in, we refresh the page
FB.Event.subscribe('auth.login', function() {
setTimeout('document.location.reload()', 10);
});
};
// 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>

Facebook authentication API

I'm new to facebook API and I have some questions related to facebook authentication.
I have created an application and have edited the domain and url.
Website Domain
giftme.web44.net
Site URL
http://www.giftme.web44.net/
I used the following on my site webpage:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '3347207XXXXXXXX', // App ID (I've replaced for security reasons)
channelUrl : 'http://giftme.web44.net/channel.html/', // 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>
And I've created the page 'channel.html' with only this:
<script src="//connect.facebook.net/en_US/all.js"></script>
Finally I used the login button:
<div class="fb-login-button" >Login with Facebook</div>
What i'm I doing wrong?
I keep getting this error:
API Error Code: 191
API Error Description: The specified URL is not owned by the application
Error Message: Invalid redirect_uri: A URL informada não é permitida pela configuração do aplicativo.
http://www.giftme.web44.net/ is not equal to http://giftme.web44.net/
The redirect_url must contain the Site URL or Canvas URL as defined in your App Properties.
An example would be:
https://api.facebook.com/method/admin.setAppProperties?
access_token=CURRENTTOKEN&
properties={'post_authorize_redirect_url':'http://giftme.web44.net/channel.html/'}
Error code 191
FB App Properties

facebook login js sdk redirect

am trying to use facebook login on my site and here is how i load the sdk
window.fbAsyncInit = function() {
FB.init({
appId : '362869753746986', // App ID
channelUrl : '//WWW.FESTIVEHUB.COM/channel.html', // 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));
and the login button
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="2"></div>
if i click the login button it shows a new facebook window for login and if i do it logs in the problem however are after the login the small new window remains and it blank but if i manually close it and refresh my page the login button is replaced with my FB profile picture so i need that login window to close automatically and i need a callback function so i can take action after the login. NB am working on localhost if its worth noting!
Your code looks OK, but your issue is probably your channelUrl file. The domain on the channel URL, your applications registered URL, and the URL you are trying to login from all have to match. The channel file also needs to have a single line
<script src="https://connect.facebook.net/en_US/all.js"></script>
to work.

Using facebook comments inside facebook app

I am trying to add a facebook comments box using the social plugin to an application which will be running inside facebook as a facebook app.
When I view the app via its url it works fine however when I view the app in the dev facebook app the comments plugin does not load. Does anyone know if this is possible or if there are any additional settings required.
I have tried setting the data-href to the url of where the app is served from and the url of the facebook app neither seem to work
<div class="fb-comments" data-href="[MYDOMAIN]” data-num-posts="30" data-width="470"></div>
The code is just the standard snippet from fb js sdk
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '[MYAPPID], // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Canvas.setAutoGrow();
// 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));
Try providing a channel file and channelUrl.
From the Facebook JavaScript SDK documentation:
"...pages that include code to communicate across frames may cause Social Plugins to show up as blank without a channelUrl..."
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});

FB.Canvas.setSize() not working on IE

How can I resolve the resize of facebook app on IE ?
the FB.Canvas.setSize() is not working.
Thanks!
Since there's very little to go on in your question. No example url, no code example. I can only guess. So here's where to start.
1) Be sure to include the Javascript SDK inside of script tags.
<script>
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
2) Be sure to include the fb-root div inside of the body
<body>
<div id="fb-root"></div>
...your html here...
</body>
3) Be sure to do the FB.init() and FB.Canvas.setSize() after the javascript SDK has had a chance to load. Meaning do it inside of your window.fbAsyncInit
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
4) Make sure you have specified your APP ID and also the correct location for a valid ChannelUrl