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.
Related
How can I set the hight for my page tab content that is from a google site? It works fine, I just want the vertical scroll bars not to be longer than the actual facebook page size.
The code I'm using now
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '576155032405795', // App ID from the app dashboard
});
FB.Canvas.setAutoGrow();
};
// Load the SDK asynchronously
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
You may want to look into the setAutoGrow() or setSize() functions of JavaScript SDK. Both may help you but you will have to judge which one to use, from the setAutoGrow()'s documentation
This function is useful if you know your content will change size, but you don't know when. There will be a slight delay, so if you know when your content changes size, you should call setSize yourself (and save your user's CPU cycles).
and from setSize()'s documentation
Call this whenever you need a resize. This usually means, once after pageload, and whenever your content size changes.
So you need to judge accordingly.
Edit
I would like you to use setAutoGrow() function in your code. You will need to put this code in the page that is been rendered within the Page Tab. And as you have mentioned that is your content is retrieved from page within your Google sites, then this is where you would be required to add the code.
You will have to insert the following code within your page just after the body opening tag
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the app dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
});
FB.Canvas.setAutoGrow();
};
// Load the SDK asynchronously
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Here the channel.html will contain just the following line of code
<script src="//connect.facebook.net/en_US/all.js"></script>
I feel completely silly for asking this question, especially after so many years of designing and building web sites. I have been researching for about a week on how to get Facebook Social Plugins working for my site and I am completely stuck. So, I have stripped away everything I can think of and just have a completely basic page here. I have done exactly what the Facebook Developer Tools have said to do and I am getting nothing. Here is my code below, any suggestions would be great!
Just to go ahead and get this out of the way, where it says 'APP_ID', I did put in my app id and I am still not getting anything coming through.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="scripts/JavaScript_v1_9_1.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<link href="fonts/OpenSans/stylesheet.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<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=APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://www.facebook.com/DippPicks" data-send="true" data-width="450" data-show-faces="true" data-font="segoe ui"></div>
</body>
</html>
I have successfully used the FB plugins using the code shown here, which is:
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the app dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Which slightly differs from the code shown in the FB plugins page when you click the "Get Code" button, by including that FB.init block beforehand and passing in the App Id in there instead of in the js.src property.
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'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...