The facebook dynamic iFrame I have been working on which works fine in Chrome and Safari has an issue in internet explorer and Firefox where the iframe is displayed but displays again once the back button has been pressed.
The code below for the facebook iframe does not include the appId and redirect_uri which I left out.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="https://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<div id='fb-root'></div>
<script>
$(document).ready(function () {
$('#initanchor').click(function(){
window.fbAsyncInit = function() {
FB.init({
appId: '',
cookie: true,
xfbml: true,
oauth:true,
status: true });
FB.getLoginStatus(function (response) {
if (response.authResponse) {
FB.ui ( {
method: 'send',
access_token: response.authResponse.accessToken,
redirect_uri:'',
display: 'iframe',
show_error: 'true',
to: ''
});
}
});
};
(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>
Related
I am using the following code for facebook authentication.
<html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '498085136....',
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>
I dont know what's wrong with that code. When i check my error console, it shows FB is not defined..
Thanks in advance.
Make your html tag like this
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
I'll do the same thing twice with two different results!!!
I set up a store here and it works fine
link to app: https://www.facebook.com/stlocarina/app_365351356883221
And the code to loose scroll bars:
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '365351356xxxxxx', //Your facebook APP here
cookie : true // enable cookies to allow the server to access the session
});
}
window.onload = function() {
FB.Canvas.setAutoGrow(91);
}
</script>
After trying the same code here, I have scroll bars.
link to app in FB: https://www.facebook.com/AshevilleAleTrail/app_420678397982002
Here's the code I'm using (thats not quite working) to try and auto resize:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '420678397xxxxxx', // App ID
channelUrl : '//www.publicityresultshosting.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
});
};
// 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>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '420678397xxxxxx', status: true, cookie: true, xfbml: true});
FB_RequireFeatures(["CanvasUtil"], function(){ FB.XdComm.Server.init("xd_receiver.htm");
FB.CanvasClient.startTimerToSizeToContent(); });
FB.Canvas.setAutoResize(true,500);
};
(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>
Any ideas on how to address this?
You have to set the size, and after page load you can run the setAutoGrow() inside the callback.
FB.Canvas.setSize({ width: 810, height: 950 });
FB.Canvas.setDoneLoading( function(response) {
FB.Canvas.setAutoGrow();
});
I have added facebook login button for my website. Code is given bellow,
<html>
<head>
<title>My Great Web page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY_APP_ID',
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));
</script>
<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-rows="1" scope="user_about_me,user_activities,user_birthday,email" on-login="top.location = 'http://localhost/index.php/';">Login with Facebook</div>
</body>
</html>
When the user click 'login with facebook' button, authentication window is displayed with extended permission. When the user allow to access the details, user is directed to index.php file using
on-login="top.location = 'http://localhost/index.php/';"
Now I want to print all access allowed details such as user name,birthday,etc. in the index.php file
Can anyone please tell me how to do that?
I don't know where you got this on-login attribute for the login button (I couldn't find it), but here's an example of how you can do what you want.
It's not tested, I just created this for you to get the point.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'MY_APP_ID',
status: true,
cookie: true,
xfbml: true,
oauth: true,
});
};
FB.Event.subscribe("auth.login", function (response) {
if (response.status == "connected") {
var userid = response.authResponse.userID;
var signedRequest = response.authResponse.signedRequest;
var expiresIn = response.authResponse.expiresIn;
var accessToken = response.authResponse.accessToken;
// do something with the data.
window.location = "index.php";
}
});
(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>
<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-rows="1" scope="user_about_me,user_activities,user_birthday,email">Login with Facebook</div>
You can read more about subscribing to events here: FB.Event.subscribe, and this thread you might find useful: Get user basic information using facebook Login button plugin?
Beeing new with the facebook thing. How do you get the user information after the log in?
Here is the code:
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
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));
</script>
<p><fb:login-button autologoutlink="true"></fb:login-button></p>
</body>
I red that I have to subscribe to the auth.login event and then use the FB.api... great but how do you do that?
I tried the following:
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
FB.auth.login{
FB.api('/me', function(response) {
alert(response.name);
});
}
};
(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>
<p><fb:login-button autologoutlink="true"></fb:login-button></p>
</body>
Thanks for the help. And sorry if I look stupid...
Once you initialize the facebook sdk (using FB.init) you can start using it for requests, events, etc.
The documentation talks about 5 Auth Methods. Which one you need depends on what you want to do and if the user already authorized your application and the permissions you are about to use.
If the user is not logged in to your application you need to use login method:
FB.login(function(response) {
if (response.authResponse) {
// logged in
}
else {
// not logged in
}
});
If he is already logged in, or you don't know what his status use getLoginStatus:
FB.getLoginStatus(function(response) {
if (response.status === "connected") {
// the user is logged in and has authenticated your app
FB.api("/me", function(apiresponse) {
console.log("api result: ", apiresponse);
});
}
else if (response.status === "not_authorized") {
// the user is logged in to Facebook, but has not authenticated your app
}
else {
// the user isn't logged in to Facebook.
}
});
To make api requests use the api method as in the example I gave you.
For the very beginners: I had to put the piece of code Nizan gave me and add it after the FB.init call as following:
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.getLoginStatus(function(response) {
if (response.status === "connected") {
// the user is logged in and has authenticated your app
alert("You are logged in");
}
else if (response.status === "not_authorized") {
// the user is logged in to Facebook, but has not authenticated your app
}
else {
alert("You are not logged");
}
});
};
(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>
<p><fb:login-button autologoutlink="true"></fb:login-button></p>
</body>
</html>
When the user is not already logged into Facebook or the page already has a comment, the code executes correctly; however when the user is already logged in and is adding the first comment, comment.create and comment.remove usually don't fire:
<div id="fb-root"></div>
<script type="text/javascript">
<!--
window.fbAsyncInit = function() {
FB.init({appId: 'FACBOOKAPPID', oauth: true, status: true, cookie: true, xfbml: true});
FB.Event.subscribe('comment.create', function(response) {
alert(response.commentID);
});
FB.Event.subscribe('comment.remove', function(response) {
alert(response.commentID);
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
//-->
</script>
<fb:comments href="URL" num_posts="1" width="500"></fb:comments>
Suggestions?
<script>
//INCLUDE THE SCRIPT FIRST
(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/it_IT/all.js#xfbml=1&appId=APP ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//INITIALIZE THE OBJECTS
window.fbAsyncInit = function() {
FB.init({
appId: 'APP ID',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
//AND THOSE WILL FIRE THE EVENTS :)
FB.Event.subscribe('comment.create',
function (response) {
console.log('create', response);
});
FB.Event.subscribe('comment.remove',
function (response) {
console.log('remove', response);
});
};
</script>
<fb:comments class="fb-comments" href="URL" data-num-posts="2" data-width="630" notify="true" migrated="1"></fb:comments>