Here's m code :
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '270423476xxxxx',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<fb:registration
fields="name,birthday,gender,location,email"
redirect-uri="http://booktrolley.in/beta"
width="530">
Now if you go to my page on : http://www.booktrolley.in/beta/fbreg.php
There's this "Loading" animation that continues to be there, even after the page loads.Why is that so ?
Thanks
You are loading the plugin in a frame but your page's HTML structure is not correct, here's a better approach:
<html xmlns:fb="http://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 src="jquery.js"></script>
<script>
$(document).ready(function() {
var wid=$(document).width()-20;
$("#fb").attr('width',wid);
});
FB.init({
appId : 'XXXXXXXXXXX',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<fb:registration redirect-uri="http://booktrolley.in/"
fields='[
{"name":"name"},
{"name":"foo","description":"Type foo","type":"text"},
{"name":"bar","description":"Type bar","type":"text"},
{"name":"facebooker","description":"Pick Paul","type":"select","options":
{"coder":"Paul","pm":"Austin","partners":"Cat"}},
{"name":"check","description":"Check this","type":"checkbox"},
{"name":"date","description":"Dec 16 2010","type":"date"},
{"name":"city","description":"Calgary","type":"typeahead","categories":
["city"]}]'
onvalidate="validate"></fb:registration>
<script>
function validate(form) {
errors = {};
if (form.foo !== "foo") {
errors.foo = "You didn't type foo";
}
if (form.bar !== "bar") {
errors.bar = "You didn't type bar";
}
if (form.facebooker !== "coder") {
errors.facebooker = "Pick the geeky one";
}
if (!form.check) {
errors.check = "Check the little box";
}
if (form.date !== '12/16/2010') {
errors.date = "That isn't the launch date";
}
if (form.city.id !== '111983945494775') {
errors.city = "That isn't Calgary, Alberta";
}
return errors;
}
</script>
</body>
</html>
This is what the ancient Egyptians called "a bug"
Related
Im trying to get the uid but is retrieving different number.
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert ("Your UID is " + response.authResponse.userID);
}
});
I use Graph API tool and put me?fields=id .
The result is 10000607333xxxx (CORRECT UID)
But when I use de js code at the bottom retrieve different uid 1493309240881506
I try with php $facebook->getUser() and is the same different number
What i am doing wrong ?
UPDATE
Someone tell me that is the scopeduserid but i need the global uid because with this number i have to verify if is a FAN of my page
SELECT uid FROM page_fan WHERE page_id = '23223322332xxx' and uid="+user_id;
This fql select only gave me results with the global uid.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento sin tÃtulo</title>
<script src="http://connect.facebook.net/en_US/all.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
FB.init(
{
appId : '52150228463xxxx',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert ("Your UID is " + response.authResponse.userID);
}
});
</script>
</body>
</html>
Although I am not new to programming or API's, I'm quite new to facebook API. This plugin uses some facebook code, and it's clearly not working.
I have following code on my registration page. However, the "register using facebook" is not clickable. This is what firebug shows: <fb:login-button scope="email,user_about_me,user_location"></fb:login-button>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo $ap_info['appId']; ?>',
status : true, // check login status
cookie : <?php echo $ap_info['cookie']; ?>, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true //enables OAuth 2.0
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
FB.Event.subscribe('auth.logout', function(response) {
window.location.reload();
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
All the variables like appId, cookie etc have proper values. I debugged through them.
Have you tried the "official" sample code which is provided here?
https://developers.facebook.com/docs/facebook-login/login-flow-for-web/#quickstart
I am trying to check if a user is logged in with my app, but I am getting a
FB.getLoginStatus() called before calling FB.init().
error in the console. The setSize appears to work (although not entirely 1,710 height but definitely around 1,500) so I cannot understand why the getLoginStatus() gives the error.
I also double checked with the appID (removed below) and that is definitely correct. The script is included via <script src="file.js" type="text/javascript"></script> right below my <body> and <div id="fb-root"></div> div.
window.fbAsyncInit = function() {
FB.init({
appId : 'APPID', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
FB.Canvas.setSize({width: 520, height: 1710});
FB.Canvas.setAutoResize(100);
FB.getLoginStatus(function(response) {
if (response.authResponse) {
// logged in and connected user, someone you know
alert("?");
} else {
// no user session available, someone you dont know
alert("asd");
}
});
};
You need to load the api asynchronously. Try removing your <script src="connect.facebook.net/en_US/all.js"></script> and updating your JS to:
<div id="fb-root"></div>
<script>
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
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
//
// All your canvas and getLogin stuff here
//
};
// 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>
Oh and check the documentation!
This error will also occur if you don't provide an appId to FB.init. Example:
FB.init({
appId: ''
, channelUrl: '//domain/channel.html'
, status: true
, cookie: true
});
Will result in:
FB.getLoginStatus() called before calling FB.init().
I am showing the facebook registration iframe in thick box (Iframe inside iframe).
(If user is not logged in, button will be shown to login or else registration form will be shown directly.)
Crom is caching data. Because of that after login to facebook it shows error like "invalid client_id" (It doesn't shows me registration form). If I reload the parent iframe ie. thickbox window registration form shows fine.
I want to reload the thickbox iframe after login to facebook. I can get this control some how?. Is there any JS code available for this ?
Here is my code
<div id="content">
<div class="reg-cont">
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo $this->facebookAppId; ?>',
status : true,
cookie : true,
xfbml : true
});
FB.getLoginStatus(function(response) {
if (response.status == "connected") {
window.location = "/facebook-login?facebook_uid=" + response.session.uid;
}
});
};
</script>
<fb:registration
fields="[
{'name':'name'},
{'name':'email'},
{'name':'church', 'description':'Home Church', 'type':'select', 'options':<?php echo str_replace('"', "'", $this->church); ?>, 'default':'none'},
{'name':'host', 'description':'Check this box if you are hosting your small group', 'type':'checkbox'}
]"
redirect-uri="http://<?php echo $_SERVER['SERVER_NAME']; ?>/User/index/create-facebook-account"
fb_only="true"
width="530">
</fb:registration>
</div>
</div>
Reload a targeted iframe on login. You will need to set the link, and frame name below
FB.Event.subscribe('auth.login', function(response) {
top.frames['YourFrameName'].location.href = 'http://example.com/';
});
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo $this->facebookAppId; ?>',
status : true,
cookie : true,
xfbml : true
});
FB.getLoginStatus(function(response) {
if (response.status == "connected") {
window.location = "/facebook-login?facebook_uid=" + response.session.uid;
}
});
FB.Event.subscribe('auth.login', function(response) {
top.frames['YourFrameName'].location.href = 'http://example.com/';
});
};
</script>
I have a really simple facebook IFrame app that checks whether the current user is logged into facebook. If they are not I wait 1 second then prompt them to login by opening the login dialog.
This all works perfectly when I run my app in Firefox & in Chrome. But when I run it in Internet Explorer, the Javascript function isLoggedIn() fails/breaks after I use the line
FB.getLoginStatus( function(response) {
Why do you think this happens & do you know how I can fix this? PS: I am using the Javascript SDK of the facebook Graph API.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>IFRame Test</title>
<script type="text/javascript">
function loginUser()
{
alert( "Running loginUser()" );
FB.login( function(response) {
if (response.session)
{
if (response.perms)
{
// user is logged in and granted some permissions.
// perms is a comma separated list of granted permissions
alert( "With perm" );
}
else
{
// user is logged in, but did not grant any permissions
alert( "logged in" );
}
}
else
{
// user is not logged in
alert( "Not logged in" );
}
}, {perms:'read_stream,publish_stream,offline_access'}); // these are the permissions we ask for
alert( "Ending loginUser()" );
}
function isLoggedIn()
{
alert("About to Run");
FB.getLoginStatus( function(response) {
alert( "Running isLoggedIn()" ); // ERROR HERE This line never executes in Internet Explorer
alert( response.status );
if ( response.status == "unknown" )
{
setTimeout( "loginUser()", 1000 );
}
else if ( response.status == "notConnected" )
{
// We dont have permissions but the user is logged in
setTimeout( "loginUser()", 1000 ); // ask for permsissions
}
else if ( response.status == "connected" )
{
// User is logged in & has given my app permissions
}
else { alert( "Weird case" ); }
});
}
</script>
</head>
<body>
<h1>IFRame Test</h1>
<p><fb:login-button autologoutlink="true"></fb:login-button></p>
<p><fb:like></fb:like></p>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '172889292760575', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
alert( "CONNECTING" );
</script>
<div>
<a href="javascript:isLoggedIn()">ABCD</p>
</div>
<script type="text/javascript">
alert( "javascriptInner" );
isLoggedIn();
</script>
</body>
</html>
Not sure if this will help, but try using:
<script src="http://connect.facebook.net/en_US/all.js"></script>
before
<div id="fb-root"></div>
Then:
FB.init({
appId : '172889292760575',
status : true,
cookie : true,
xfbml : true
});
instead of
window.fbAsyncInit = function() {
FB.init({appId: '172889292760575', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
Because FB might be undefined by the time you try to use it