<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);
});
}
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 am trying to add facebook like to my mediawiki skin.
I have the code:
<html xmlns:fb="http://ogp.me/ns/fb#">
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "facebook-jssdk"));
</script>
<fb:like href=' . urlencode($wgTitle->getFullURL()) . ' send="true" width="450" show_faces="false"></fb:like>
On the pages where facebook like shows up I get the error FB.Type.createClass2 is not a function in firebugs and on other pages it simply doesn't show up and there is no error.
How do I get it to show up on every page?
Embed the Like button like this:
<div class="fb-like" data-href=" . urlencode($wgTitle->getFullURL()) . " data-send="true" data-width="450" data-show-faces="false"></div>
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.
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>
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...