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
});
Related
I've embedded the Facebook send button. It works, so I can send messages and a link through it.
However, the message.send event isn't firing.
I tried again but now with a new page, that has nothing in it, except the code which I copy-pasted from here and here and the FB.Event.subscribe documentation.
I don't get any errors in the console.
Any help will be greatly appreciated.
My code:
<!doctype html>
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'XXXXXXXXXXXXXXXXXXXXX', // App ID from the app dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
cookie : true, // enable cookies to allow the server to access the session
status : true, // Check Facebook Login status
xfbml : true, // Look for social plugins on the page
oauth : true
});
FB.Event.subscribe('message.send',
function(response) {
alert('You sent the URL: ' + response);
}
);
};
(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/debug.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:send href="http://www.google.com"></fb:send>
Test test
</body>
</html>
Same here too. I created a bug report at https://developers.facebook.com/x/bugs/1425315047692224/ please subscribe.
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'});
<body>
<script>
// Facebook Init
window.fbAsyncInit = function() {
FB.init({
appId : '...MYID...', // App ID
channelUrl : '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
});
// Additional initialization code here
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
}
);
};
</script>
<div id="fb-root"></div>
<script>(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/de_DE/all.js#xfbml=1&appId=...MYID...";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="player"></div>
<div id="main">
<div id="facebook" style="height:30px;">
<div class="fb-like" data-href="http://www.MYURL.com/about" data-send="true" data-width="450" data-show-faces="true"></div>
</div>
Can somebody help? I am php programmer myself and just stuck with JS... I also considered the Php api, but actually it used to work, now it hangs all of sudden.. not sure what I did :(
Thanks!
Please see the Facebook developer site. It would be a good place to track as this is possibly not you. I'm having the same issue and I'm using FBML tags and not iFrame or HTML5.
https://developers.facebook.com/bugs/347759798609016
Something else to try is to try logging in, kill that window, then refresh the page. For me at least the "Like" button works after the refresh. So the login is successful, but the response from Facebook isn't.
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>
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.