I have the following code:
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title></title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// 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));
</script>
<fb:login-button show-faces="true" width="370" max-rows="5" scope="email">Log In with Facebook</fb:login-button>
</body>
</html>
I log into the app using Facebook.
The page refreshes showing me that I'm logged in.
If I refresh or load the the page again then Facebook will load the plugin. After around 10 seconds, the page will reload.
Did I initialize wrong or is this simply how Facebook does things?
EDIT:
I sometimes get the following error:
1 XFBML tags failed to render in 30000ms.
Found a temporary fix from https://stackoverflow.com/a/4182542/968219
I don't know why this works but I'm glad it fixes it. Does anyone know a better fix?
try adding a channel file
FB.init({
appId : 'APP_ID', // App ID
status : true, // check login status
channelUrl : '//WWW.MY_DOMAIN.COM/channel.html', // Channel File
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
the channel file would only include:
<script src="//connect.facebook.net/en_US/all.js"></script>
reference:
http://developers.facebook.com/docs/reference/javascript/
It looks like the xfbml rendering is not working properly, try using the HTML version.
<div class="fb-login-button" show-faces="true" width="370" max-rows="5" scope="email">Login with Facebook</div>
or you can also just build your own login button and bind it to this:
FB.login(function(response) {
// handle the response
}, {scope: 'email'});
Related
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.
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>
New Facebook and Symfony 1.4 developer with a couple of issues.
First off, I am having an issue with getting the Add to Timeline button to appear on my page where I need it. My site seems to show a Facebook loading image, then after the apparent loading no button is displayed. I've looked around at many different sites (including the FB tutorial for Open Graph), all saying to place the scripts after the opening body tag. I have placed it in my layout.php file so that I do not have to put it in multiple places:
layout.php
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:fb="http://ogp.me/ns/fb#" xmlns:og="http://ogp.me/ns#">
....
<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, 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/all.js#xfbml=1&appId=APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="container">
I have already replaced APP_ID where appropriate and placed the Add to Timeline button in a view:
viewSuccess.php
<?php // Facebook Post-to-Timeline Button for this user's created recipe ?>
<?php if($recipe->getUserId() == sfUserTools::getConnectedUser()->getId()): ?>
<fb:add-to-timeline show-faces="false" mode="button"></fb:add-to-timeline>
<?php endif ?>
I'm not sure if its an issue with where the JSSDK script is placed, or if Symfony is not seeing something in the view page. Note, I do not yet have our app's actions and objects setup for Open Graph, posting to the timeline is not my concern at this time. Any ideas or advice for a newbie?
Did you try to pass the access_token or the perms on the FB.init ?
FB.init({
appId : "<?php echo sfConfig::get('app_facebook_api_key') ?>",
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : false, // parse XFBML
perms : 'read_stream, publish_stream',
access_token : "ACCESS_TOKEN_HERE",
frictionlessRequests : true
});
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.