I would like to have a "go to top" link inside an iFrame tab page in the new Facebook timeline, have tried to use FB.Canvas.scrollTo as follows but not working. Any pointers greated appreciated!
<body style="overflow: hidden">
<div id="fb-root"></div>
<script>
// 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));
// Init the SDK upon load
window.fbAsyncInit = function() {
FB.init({
appId : 'myAppID',
channelUrl : 'my_channel.html',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
document.getElementById('go_to_top').addEventListener('click', function(){
FB.Canvas.scrollTo(0,0);
});
<div id="goToTop">
<img border=0 src ="aPicForClicking.jpg">
</div>
</body>
I was having the same problem. In the application settings set Canvas Height to Fixed.Then FB.Canvas.scrollTo(0,0) works fine;
Canvas do not throw an error but also do not function when the iframe is within the content of another iframe.
IE. nested iframes are not supported for API calls.
Related
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?
Im trying to add a like button to my web app that is currently in development on localhost.
Ive set the ref attribute for fb:like and whilst i can like my websites page and see it in on my test-users facebook wall, the link posted does not contain any params such as fb_ref etc. Even clicking the link and checking my servers logs shows no params were sent.
I dont know what im doing wrong. Due to extensive testing facebook requires me to "confirm" I want to like something each time I click on the like button (a measure to thrwart spammers I believe). Does that have anything to do with it? I also turned on sandbox mode.
here is the button
<fb:like href="localhost:3000" ref="atrackingcode" send="false" show_faces="false" width="450" class=" fb_edge_widget_with_comment fb_iframe_widget"></fb:like>
here is the sdk intialization
<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'SECRET-SO-BOO-HOO',
channelUrl : '//localhost:3000/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
});
};
(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>
Currently I'm testing a Facebook tab page. I am using the JavaScript SDK with the recommended async init method:
window.fbAsyncInit = function() {
FB.init({
appId : app_id,
status : true,
cookie : true,
oauth : true,
xfbml : true
});
FB.getLoginStatus( loginStatus );
FB.Canvas.setAutoGrow( );
FB.Canvas.setSize( {height: 1200 });
};
(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));
I am having issues in IE7/8 where the setAutoGrow and setSize are not responding. My tab page is NOT resizing to the full content at all. Instead in IE console I am getting this error whenever I call either setAutoGrow or setSize:
SCRIPT438: Object doesn't support this property or method all.js, line 15 character 3916
I tested this in Chrome/FF/IE9 PC/MAC and all works fine, only IE7/8 are giving me these issues. Anyone know if these are known bugs with FB's JS SDK or am I doing something wrong?
<script type="text/javascript">
FB.Canvas.setSize({ width: 520, height: 1400 });
window.fbAsyncInit = function () {
FB.Canvas.setAutoResize();
}
</script>
Use this and put it right before closing body tag.
also make sure you have this markup inside the body tags also:
<div id="fb-root"></div>
<script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>
I recently added the Facebook login button to my site and the integration seems to work fine. The only issue I'm having is that the "Login" button is not showing up when I'm logged out of Facebook. Has anyone else had this problem?
I using code straight out of the Javascript SDK docs (https://developers.facebook.com/docs/reference/javascript):
<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
});
// 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 have this element on my page:
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1">Login with Facebook</div>
Anyone see any issues with what I have here?
Testing this code with a completely trimmed down HTML page worked just fine for me. It showed the login button if you're not logged into Facebook, and shows your friends who are on the site with you if you are. Maybe some other part of your code is interfering? Can you try with the basic HTML as I have below?
<html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
var appId = 'YOUR_APP_ID';
var siteRoot = 'YOUR_HOST_NAME';
window.fbAsyncInit = function() {
FB.init({
appId : appId,
channelURL : '//'+siteRoot+'/channel.html', // Channel File
status : true,
cookie : true,
oauth : true,
xfbml : 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="true" data-width="200" data-max-rows="1">Login w/ Facebook</div>
</body>
</html>
Closely related -- if you want to display something different than the default in the case of the user being logged in, you can check login status with:
FB.getLoginStatus
Or if you wanted to do something after the user logs in you can bind to the login event with:
FB.Event.subscribe('auth.login', function () {
console.log('Hello world!');
});
It's been a while, but I suspect you were seeing this because your app was in "Sandbox" mode. Check your settings.
I want to create an application on Facebook, after doing like the tutorial from FB Developer site. I got the error at the step using Javascript SKD, I try to get this function, and it's really incorrect.
Let me show more about my application:
Here is my settings:
Summary
App ID/API Key App Secret
xxxxxxxxxxxxxx xxxxxxxxxxxxxxxx
Canvas Page Canvas URL
https://apps.facebook.com/ibattleship/ http://192.168.11.154:8091/
Secure Canvas URL Canvas FBML/iframe
https://192.168.11.154/ iframe
Contact Email Support Email
xxxxxxx#gmail.com xxxxxx#gmail.com
And index.php file:
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo APP_ID ?>', // App ID
channelURL : '//192.168.11.154:8091/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
});
};
// 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));
// Additional initialization code here
</script>
Hello, world.
</body>
</html>
And the channel.html file
<?php
$cache_expire = 60*60*24*365;
header("Pragma: public");
header("Cache-Control: maxage=".$cache_expire);
header('Expires: '.gmdate('D, d M Y H:i:s', time()+$cache_expire).' GMT');
?>
<script src="//connect.facebook.net/en_US/all.js"></script>
But, when I run this page, I got the above error. Did I miss something?
This is a bug from Facebook Javascript SDK.