Facebook Send UI renders empty window - facebook

I was just about to test something so I made 2 buttons with 2 links:
1.) using the facebook sharer.php functionality which works fine
2.) triggering the send ui using the URL redirect I took from the FB developers homepage:
http://www.facebook.com/dialog/send?app_id=123050457758183&link=http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html&redirect_uri=https://www.bancsabadell.com/cs/Satellite/SabAtl/
I replaced the app id and both links with my own. My app is set up so it point to the links, since I know I had it running once before, where that was the problem.
Now as said the share button works perfectly fine but when I click one the other button I just see a white screen. The URL is in the address bar. Firebug shows no console errors and an empty head and body tag.
Any suggestions?
Thanks,
Gerd
UPDATE: I also implemented the regular javascript ui.send method. The window popsup. I am connected with facebook as the ssl seal shows but again nothing but white.

As far as the URL is concerned the URL is fine it is just a matter of time until Facebook allows to share a URL it has not indexed before. When I changed the link to my main domain instead of subfolder it worked.
As far as the JS SDK is concerned I forgot to check whether the user is logged in or not so this is how it works:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YourId',
xfbml : true,
version : 'v2.0'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<button onclick="sendFb()">Recommend JS</button>
<script type="text/javascript">
function sendFb(){
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
FB.ui({
method: 'send',
link: 'yourlink.com',
});
}
else {
FB.login(function(response) {
if (response.authResponse) {
FB.ui({
method: 'send',
link: 'yourlink.com',
});
}
else
alert('Not Authenticated!');
});
}
});
}
</script>
</body>
</html>

Related

When I try facebook login in localhost, it is worked but real server doesn't work

When I try facebook login in localhost, it is worked but real server doesn't work.
When I try facebook login in localhost, it is worked but real server doesn't work.
When I try facebook login in localhost, it is worked but real server doesn't work.
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '1530295003876175',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.1' // use version 2.1
});
// Now that we've initialized the JavaScript SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3. Not logged into Facebook and can't tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// Load the SDK asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' +'<br/>'+ response.name +'<br/>'+ response.email + '!';
});
}
</script>
<!--
Below we include the Login Button social plugin. This button uses
the JavaScript SDK to present a graphical Login button that triggers
the FB.login() function when clicked.
-->
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
<div id="status">
</div>
</body>
</html>
<b>This is only for server </b>
1) Go to http://developers.facebook.com
2) MyApps click
3) Create Apps
4) Add Platform (web/mobile/etc)
5) Quick Start for Website : ente`enter code here`r your site name or website url
[generate bleow api id and code its copy and user page then ]
example:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '6417187378599749',
xfbml : true,
version : 'v2.2'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
6) Tell us about your website: Write/enter your website url/ domain name
7) Next button click
8) choose loging box/like box/etc
9) chosse up code demo and use
I had same issue. Facebook login works at local server but real server it return 0 as user id. The solution for this was, in the url use www.test.com instead of test.com, where test.com is your domain. It will solve your issue.
Thanks

FB.init is called twice but I only have a like button from Facebook

I'm currently trying to allow user to connect to my site with their Facebook account but I have some issues.
First of all, you have to know that I already added a Like button with this code:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=myappid";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">
var urlfb = document.location.href;
$(document).ready(function(){
$('fb\\:like').attr('href', urlfb);
});
</script>
So I saw the post of Facebook on how to add Facebook Login to his website but each time I launch the page where I pasted the FB code, there is this famous error message: FB.init has already been called - this could indicate a problem.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'myappid', // App ID
channelUrl : '', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
What do I have to do to remove this error ? I tried to remove my Like button and no more error but I want to keep this like button, so what do I have to delete to make it works ?
Any ideas ?
Thanks
Adding #xfbml=1&appId=myappid to the end of the SDK URL makes it automatically initialze itself – so just remove that part, change
js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=myappid";
into
js.src = "//connect.facebook.net/fr_FR/all.js";

getLoginStatus always returns not_authorized

I am new to developing websites with Facebook SDK. So please bear with me.
Below is my simple code for verifying that I am logged into Facebook.
For some reason I always get the 'not_autherized' response, even though I am the only developer of my app. The app number I provide is correct.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'censored app id', // App ID from the app dashboard
status : true, // Check Facebook Login status
cookies : true,
xfbml : true // Look for social plugins on the page
});
FB.getLoginStatus(checkLoginStatus);
function checkLoginStatus(response) {
if (response && response == 'connected') {
alert('User is authorized!');
} else {
alert('User not authorized!!!');
}
};
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(d, s, id) {
if (d.getElementById(id)) return;
var js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
var fjs = d.getElementsByTagName(s)[0];
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
Is there anything I have overlooked?
Much appreciated :)
A friend helped me with this. He very helpfully pointed out something that Facebook has neglected to document.
When you create a new facebook application, then it is NOT automatically authorized by the admin and developers. An authorized application is one that exists in the "Account Settings->Apps" list. If it is not in this list, then it is not authorized.
This means that you need to call FB.login() at some point in your code in order to popup the user authorization window.
Mind you, this should be called from a button. Otherwise, the popup could be blocked.
Hope this helps someone else but me.
Cheers :)

Simple Facebook login script not working

I am trying to have the user login to facebook and then display their user id in an alert.
Yet, I get nothing returned by this code. What am I doing wrong?
<html>
<head>
<title>Login to Facebook</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP ID',
channelUrl : 'http://www.mydomain.net/zoozTest/channel.html',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
(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));
//LOGIN FUNCTION
function login() {
FB.login(function(response) {
if (response.authResponse) {
alert('Success!');
}else{
alert('Login Failed!');
}
}, {scope: 'email'});
}
</script>
<div onclick="login();">Login with Facebook</div>
</body>
</html>
Your code, copied verbatim, works fine for me. Three things:
1: Stupid question, but you've replaced 'APP ID' with your actual app id, right? Otherwise that'll be an error
2: Check your app settings. Have you specified your app domain and 'website with facebook login' URL correctly?
3: Technically you have a race condition. If you click the 'Login with Facebook' div and attempt to run your login() function before the FB JS SDK has initialised (it loads asynchronously), you'll get an error as the global FB object won't be defined. I'd stick a console.log at the bottom of the window.fbasyncinit function to make sure FB is being defined (for testing, for production you'll likely want to either block the login from showing before Facebook is inited, or build some sort of queue that checks to see if the global FB object is defined before attempting to use it, and if not adds to a queue).
Do you have any errors in the javascript console?

fb:login-button not show , no code changed

today somebody reports me that the "Facebook login button" suddenly disappear, on his website that i made , actually yesterday was working ok, and i did not change any code at all for weeks , i have activated the July, August Changes since i made the website, in order to avoid this problems
this is my code
<div id="fb-root"></div>
<div class="fb-login-button" onlogin="Facebook_login()" autologoutlink="true">Login with Facebook</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'FB APP ID',
status : false,
cookie : true,
xfbml : true,
oauth : true
});
};
(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));
function Facebook_login () {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
window.location = "THE URL TO PROCESS THE LOGIN";
}
});
}
</script>
We experienced the same issue on our website. Looks like Facebook has changed the implementation of the login button, it is now created within an iframe. It also no longer supports the 'onlogin' attribute (no longer in the docs).
We fixed by adding our own button, using the FB SDK FB.login method.
For you it would look something similar to (assuming you use jQuery for the click event)
<div id="fb-root"></div>
<button class="fb_login">Login with Facebook</button>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'FB APP ID',
status : false,
cookie : true,
xfbml : true,
oauth : true
});
$(".fb_login").click(function() {
FB.login(Facebook_login);
});
};
(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));
function Facebook_login () {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
window.location = "THE URL TO PROCESS THE LOGIN";
}
});
}
</script>
Hi you are not the only one experiencing trouble since today.
My website isn't displaing correctly the button and the login is broken, too.
This seems to be a bug on Facebook side, introduced with today's update, see here:
http://developers.facebook.com/bugs/386085844776949 and here
http://developers.facebook.com/bugs/250500218391321
Try subscribing to the bugs to have FB look at them.
Sometimes, it happens due to not re-initializing the Fb.init function. I solved this problem by parsing Fb.XFBML and i added FB.XFBML.parse(); in script tag just before fb-login button as :
<script>FB.XFBML.parse();</script>[enter image description here][1] <fb:login-button scope="public_profile,email" onlogin="checkLoginState();"> </fb:login-button>
You can see a sample of code here:
[1]: https://i.stack.imgur.com/YM7QM.png