I have a facebook tab with multiple page. Everything work fine on the first page, the iframe is resized perfectly, but on the second page where the content is less than on the first page the iframe won't move it stay the same height as the first page. At first it was alse staying at the bottom of the page but FB.Canvas.scrollTo(0,0); fixed that. I tryed calling setSize with a specific size and nothing work. Also tryed most of the solution on here but nothing work.
Here is the code that I'm calling on every page before I close the body
<script type="text/javascript">
window.fbAsyncInit = function() {
<cfif structKeyExists(cgi,'https') AND cgi.https IS 'ON'>
FB._https = true;
</cfif>
FB.init({
appId : '<cfoutput>#appId#</cfoutput>',
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // OAuth 2.0
status : true, // check login status
xfbml : true // parse XFBML
});
FB.getLoginStatus(function(response) {
// user is connected but we don't have access to his province
if(typeof response.status == 'string' && response.status == 'connected') {
$('#erreurProvinceFB').css('display', 'block');
$('.fb_iframe_widget').css('display', 'none');
$('.sepOU').html(' ');
}
});
FB.Event.subscribe('auth.login', function(response) {
<!--- met en post le nouveau signedRequest car l'ancien qui est en session n'est plus valide et que
facbook ne renvoie pas un nouveau acces token si le tab est juste rafraichie et non reloader au complet. --->
$('#signed_request').val(response['authResponse']['signedRequest']);
$('#loginSignedRequest').submit();
});
FB.Canvas.setSize({ width: 520, height: 500 });
//FB.Canvas.setSize();
FB.Canvas.setAutoGrow();
FB.Canvas.scrollTo(0,0);
$("body").css("overflow", "hidden");
};
(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);
}());
This combination has worked well for me up to this point:
<body style="overflow: hidden;">
...
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '*ID*', // App ID
channelUrl : '/channel.php', // Channel File
status : false, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
if ( window.location.protocol == 'https:' ) {
FB._https = true;
}
FB.Canvas.setAutoGrow();
};
</script>
Ensure your FB App ID is correct.
Related
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 planning on installing the Facebook Comments module/plugin on a web page, let's say:
http://www.example.com/
Is it possible to re-direct users to another landing page within the site? Let's say I want to send them here after clicking to post the comment:
http://www.example.com/landing-page/
Is this possible with either Facebook API or another script?
You can subscribe to the comment.create event which fires when a user adds a comment like this:
Init
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'sensored-app-id',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
/* All the events registered */
FB.Event.subscribe('comment.create', function (response) {
// Redirect to http://www.example.com/landing-page/
window.location = "http://www.example.com/landing-page/";
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/fi_FI/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
And in your fb comment you must set notify="true" like so
<fb:comments numposts="10" notify="true"></fb:comments>
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().
So I've set up a basic login/authentication flow on the home page of my site. After the authentication dialog, I want to redirect them to another page on my site. I've tried several variations of the existing code, changing the site url under basic settings in the developer app, trying different oauth flows, and still, it simply redirects to the same homepage they logged in on. I know this sounds tremendously easy but there are so many different authentication flows and implementations that it's a bit confusing.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXX', // App ID
channelURL : '//localhost/dataweavr/channel.php', // 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
});
// Additional initialization code 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>
And then some more fun...
<div id="fb-root"></div>
<div id="user-info"></div>
<button id="fb-auth">Login</button>
<script>
window.fbAsyncInit = function() {
FB.init({ appId: 'XXXXXXXXXXXXXXXXXXXXXX',
status: true,
cookie: true,
xfbml: true,
oauth: true});
function updateButton(response) {
var button = document.getElementById('fb-auth');
if (response.authResponse) {
//user is already logged in and connected
var userInfo = document.getElementById('user-info');
FB.api('/me', function(response) {
userInfo.innerHTML = '<img src="https://graph.facebook.com/'
+ response.id + '/picture">' + response.name;
button.innerHTML = 'Logout';
});
button.onclick = function() {
FB.logout(function(response) {
var userInfo = document.getElementById('user-info');
userInfo.innerHTML="";
});
};
} else {
//user is not connected to your app or logged out
button.innerHTML = 'Login';
button.onclick = function() {
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
var userInfo = document.getElementById('user-info');
userInfo.innerHTML =
'<img src="https://graph.facebook.com/'
+ response.id + '/picture" style="margin-right:5px"/>'
+ response.name;
});
} else {
//user cancelled login or did not grant authorization
}
}, {scope:'email,user_birthday'});
}
}
}
// run once with current status and whenever the status changes
FB.getLoginStatus(updateButton);
FB.Event.subscribe('auth.statusChange', updateButton);
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol
+ '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
And another unrelated issue. Why do I only have a normal button popup? How can I get the SDK to render a Facebook login button rather than just a simple login button?
You should be able to redirect the user after the login response. Under these lines:
FB.login(function(response) {
if (response.authResponse) {
Add something like this:
window.top.location = "http://page_to_redirect";
The button thing, hmm... well, you are writing a simple login button in the html, if you want a login button, change this:
Login
To this:
<fb:login-button></fb:login-button>
Hope it helps.
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>