I've ran into a problem with a canvas app. If the code for the Like button is enabled, the FB.ui call 'apprequests' gives an error. If I comment out the Like button, its back to normal. Calls with 'stream.publish' work normally tho.
My Init code:
FB.init({
appId : '12345',
status : true,
cookie : true,
xfbml : true,
channelUrl : '/channel.html',
oauth : true
});
The code for the Like button, generated with the FB tool:
<div style="padding-left:177px">
<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/en_US/all.js#xfbml=1&appId=12345";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.facebook.com/apps/application.php?id=12345" data-send="false" data-width="450" data-show-faces="false" data-colorscheme="dark"></div>
</div>
The FB.ui call:
FB.ui(
{
method: "apprequests",
display: "iframe",
message: "You have to check this out!"
},
function(response) {
if (response && response.request_ids) {
$.post("response.php", { rid: response.request_ids, data: data }, function(result) {
});
}
}
);
The Error users get when the FB.ui is called:
API Error Code: 102
API Error Description: Session key invalid or no longer valid
Error Message: Iframe dialogs must be called with a session key
Any help is appreciated!
You have to pass a valid access_token when using the 'iframe' display method per: https://developers.facebook.com/docs/reference/dialogs/
just remove display: "iframe", worked for me. it will still show in an iframe, but without error. don´t ask my why, with 1:1 the same app settings it works WITH the display value in another app of mine...
Related
<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/en_US/all.js#xfbml=1&appId=223245147771570";
fjs.parentNode.insertBefore(js, fjs);}
(document, 'script', 'facebook-jssdk'));
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
});</script>
<h1>Lajknout stranku!</h1>
<div class="fb-like" data-href="https://www.facebook.com/Testra22" data-send="false" data-layout="button_count" data-width="10" data-show-faces="false" data-font="trebuchet ms"></div>
I use this code to create FB Like button and I would like to display alert when user click on it. But there is js error Uncaught ReferenceError: FB is not defined.
You start using Facebook JS SDK before it was loaded by browser.
Because you use asynchronous way to load the JS SDK you need to define window.fbAsyncInit (as described in documentation for JavaScript SDK) function and run code that depend on JS SDK from here...
window.fbAsyncInit = function() {
FB.Event.subscribe('edge.create', function(response) {
alert('You liked the URL: ' + response);
});
}
I am frustrated because I spent hours on this - there are also other threads on this here on SO but none of them solved my problem!
I simply want to implement the fb-like button on my website, www.posti.sh - I wonder why it doesn't work?
Here is the code I use, according to https://developers.facebook.com/docs/reference/plugins/like/ step by step tutorial:
<div id="fb-root"></div> (directly after the opening body tag)
and
<div class="fb-like" data-href="http://www.posti.sh" data-send="true" data-width="450" data-show-faces="true"></div>
where I would like it to be.
I have also added the according meta tags in the head.
Anyone any idea why it doesn't work?
Thank you!!
Dennis
UPDATE 1
I have used the fb debugging tool https://developers.facebook.com/tools/debug and it only says the og image is not big enough - I guess that shouldn't be a problem though?
It looks like Step 1 in the HTML5 Like Button code is missing the part that actually adds the Javascript SDK. The code should be:
<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
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>
Just now I resolved similar issue.
FB-like button was displayed but didn't work.
In my page <div id="fb-root"></div> was in a div with position: relative; css-attribute.
After removing position: relative; it works again.
I'm unable to get the page access token for some reason I only recieve the page id...
this is my code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
</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>
<div class="fb-login-button" data-scope="email,user_checkins,manage_pages">Login with Facebook</div>
<div class="result">Start</div>
<div class="result_app_installed">Start</div>
<script>
// Get access token
$.get('https://graph.facebook.com/102561956524622?fields=access_token', function(data) {
alert(data);
});
// Get data if user is application is installed on that page or not.
$.get("https://graph.facebook.com/102561956524622/tabs/255792581098802",
function(data) {
alert(data);
});
</script>
</body>
</html>
What I am trying to do is to get the page access token and then check if application in installed on that page..
What am I doing wrong?
Try something like:
FB.api('/me/accounts',function(response) {alert(response);})
The Page token is returned in data as access_token
You will need manage_pages permission.
https://graph.facebook.com/102561956524622?fields=access_token
won't work. In order to get an access_token for any fan page You need to do the steps explained here:
writing on the wall on behalf of my fanpage
Instead of using $.get it's better to use Facebook JavaScript SDK:
https://developers.facebook.com/docs/reference/javascript/
so for the second request it would be:
FB.api('/102561956524622/tabs/255792581098802',
function(response) {
alert(response);
});
Bear in mind that in order to make this FB.api call You need to authorize the app first
Actuelly its very easy
FB.api('/'+[PAGE_ID]+'?fields=id,likes,name,access_token', function(response) {
console.log(response.access_token);
});
Dont forget to check if user is logged in.
Our site pops up a modal javascript/jquery dialog, which requires the user to either close or "Like" on facebook to proceed. We are using the HTML5 version of the "Like" code.
The "Close" works fine, but how do I get the dialog to close when the user clicks on "Like"?
The actual "Like" button is provided by Facebook in an IFrame, and I haven't been able to get to it via JavaScript yet.
Any ideas?
Subscribe to the edge.create FB JS event (http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/) and close your popup once you receive that. However, you will run into issues because after a like, Facebook also likes to put up a dialog that allows the liker to post a link to their wall about it. So you might accidentally hide that one by closing your dialog too early.
First of all check that the following code implemented:
<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/en_GB/all.js#xfbml=1&appId=261463080590982";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Then just do the following:
<script>
FB.Event.subscribe('edge.create', function(response) {
close_function()
});
</script>
Where close_funciton() is the same function what you call in normal close.
More information about this feature: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
If you have more like button in same page with different "function", that's fun.
If you don't want to show it at all
you can use the CSS code below
.fb_edge_widget_with_comment{
position: absolute;
}
.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
display: none !important;
}
Hope it helps :)
I am having problem in getting response from facebook login button.
And will be very thankful for any instant help.
I am using following code:
<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/en_GB/all.js#xfbml=1&appId=MY_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-rows="1"></div>
<script type="text/javascript">
FB.Event.subscribe('auth.authResponseChange', function(response) {
if(response.status=="connected")
{
document.getElementById("fblogin").value=response.authResponse.userID;
}
});
</script>
... but I am getting the error in my javascript console : "FB is not fefined " and no alert message for auth responeId is recieved to me.
Please help its very important
Or if you want to still load the JS SDK async style, you can wire up your event handlers in the window.FbAsyncInit() like such:
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
xfbml : true // parse XFBML
});
// Additional initialization code here
FB.Event.subscribe('auth.authResponseChange', function(response) {
if(response.status=="connected")
{
document.getElementById("fblogin").value=response.authResponse.userID;
}
});
};
<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/en_GB/all.js#xfbml=1&appId=MY_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-rows="1">
</div>
<script type="text/javascript">
FB.Event.subscribe('auth.authResponseChange', function(response) {
if(response.status=="connected")
{
document.getElementById("fblogin").value=response.authResponse.userID;
}
});
</script>
You can see this style (which is Facebook's preferred style) documented here: https://developers.facebook.com/docs/reference/javascript/
You are loading facebook javascript sdk asynchronously through following code
<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/en_GB/all.js#xfbml=1&appId=MY_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
So, your FB is not defined until it gets loaded.
Try loading FB syncronously. Put following code and remove the above one,
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR_APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>