I am using the Facebook Graph API (javascript one).
I am trying to get the canvas size using the function FB.Canvas.getPageInfo()["clientWidth"];
But it always bloody returns zero, why?
Maybe its when I call the function? Maybe its meant to be zero, but I dont think so because if it was I would not be able to see my HTML inside the canvas because the width is zero right?
My code:
<html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function()
{
FB.init( {appId: 'MYAPPID', status: true, cookie: true, xfbml: true} );
};
(function()
{
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
<script type="text/javascript">
<!--
alert( FB.Canvas.getPageInfo()["clientWidth"] ); // PS other SDK calls do work likelogin so I know my app id etc are correct
-->
</script>
</html>
the function assigned to
window.fbAsyncInit is run as soon as
the Facebook JS SDK is loaded. Any
code you want to run after the SDK is
loaded should be placed within this
function and after the call to
FB.init().
now try this.
<html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function()
{
FB.init( {appId: 'MYAPPID', status: true, cookie: true, xfbml: true} );
alert( FB.Canvas.getPageInfo()["clientWidth"] );
};
(function()
{
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
Related
I'm trying to login on my website with Facebook JS API from my iPhone. The login works fine on computer as well as iPad.
Here's the login screen:
On iPhone however, I get to a screen which looks like this:
When I close the Facebook screen with the "Back to previous page" message and reload the login page, I'm logged in successfully. It looks like the problem is, that iPhone is unable to close the login pop-up screen.
Here's my JavaScript code:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '', // the app id
status : true,
cookie : true,
xfbml : true
});
FB.getLoginStatus(function(response) {
if (response.status == "connected") {
// do something
}
});
FB.Event.subscribe("auth.login", function(response) {
if (response.status == "connected") {
// do something
}
});
};
function facebookRedirectLogin(redirect) {
// do something
}
function logout() {
FB.logout(function(response) {
// do something
});
}
(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" style="margin-bottom: 20px;">Forbind med Facebook</div>
How can I fix this problem?
Checkout this URL,
please do the settings as mentioned in the above URL, this code is working in mobile devices.
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<div id="login">
<p><button onClick="loginUser();">Login</button></p>
</div>
<div id="logout">
<p><button onClick="FB.logout();">Logout</button></p>
</div>
<script>
function loginUser() {
FB.login(function(response) { }, {scope:'email'});
}
</script>
<script>
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script>
window.fbAsyncInit = function() {
FB.init({ appId: 'xxxxxxxxxxxx',
status: true,
cookie: true,
xfbml: true,
oauth: true});
FB.Event.subscribe('auth.authResponseChange', handleResponseChange);
};
</script>
<script>
function handleReponseChange(response) {
document.body.className = response.authResponse ? 'connected' : 'not_connected';
if (response.authResponse) {
alert(response);
}
}
</script>
</body>
I have the exact same problem. This may (or may not) be an open Facebook bug: https://developers.facebook.com/bugs/280811108698311
Like Button: (successfully direct uesrs to specific Facebook pages)
Example:
[http://lifelearning.x10.mx/FB-test2.html][1]
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
<div id="fb-root"></div>
<fb:like href="http://www.facebook.com/pages/AEA-%E6%BE%B3%E6%B4%B2%E6%95%99%E8%82%B2%E5%8D%94%E6%9C%83/372744124562?bookmark_t=page" send="false" width="450" show_faces="false" font=""></fb:like>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '372744124562', status: true, cookie: true, xfbml: true});
FB.Canvas.setSize({ width: 520, height: 1500 });
FB.Event.subscribe('edge.create',
function(response) {
// put redirect code here eg
window.location = "http://www.facebook.com/pages/AEA-%E6%BE%B3%E6%B4%B2%E6%95%99%E8%82%B2%E5%8D%94%E6%9C%83/372744124562?bookmark_t=page";
}
);
};
//Load the SDK asynchronously
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
</html>
Like Box: (unsuccessful)
Example:
[http://lifelearning.x10.mx/FB-test3.html][2]
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
<div id="fb-root"></div>
<fb:like-box href="http://www.facebook.com/pages/AEA-%E6%BE%B3%E6%B4%B2%E6%95%99%E8%82%B2%E5%8D%94%E6%9C%83/372744124562?bookmark_t=page" width="292" show_faces="true" stream="true" header="true"></fb:like-box>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '372744124562', status: true, cookie: true, xfbml: true});
FB.Canvas.setSize({ width: 520, height: 1500 });
FB.Event.subscribe('edge.create',
function(response) {
// put redirect code here eg
window.location = "http://www.facebook.com/pages/AEA-%E6%BE%B3%E6%B4%B2%E6%95%99%E8%82%B2%E5%8D%94%E6%9C%83/372744124562?bookmark_t=page";
}
);
};
//Load the SDK asynchronously
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
</html>
People say this is a bug on Like Box. Some people demonstrate it does work:
http://www.fbrell.com/xfbml/fb%3alike-box
Could anyone who knows well about Facebook please help? I know JS a lot but just know nothing about the API of Facebook. Can anyone tell how to make Like Box work in the same way as Like Button does.
* These are all collected from the web. And the codes are mine.
The issue is that the edge.create event is not fired by the Like Box, so you will not be able to get that to work. I suggest you add your voice to the following bug report about this problem:
https://developers.facebook.com/bugs/310763168934515
I have a facebook tab with an iframe application and within that tab there is a facebook like button to have a second capability to like the facebook page. It is an ordinary facebook like button iframe.
Is there a possibility to redirect the user when it clicks the button? I tried it the following code:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '<my app id>', status: true, cookie: true, xfbml: true});
FB.Canvas.setSize({ width: 520, height: 1500 });
FB.Event.subscribe('edge.create',
function(response) {
alert('like!');
}
);
};
//Load the SDK asynchronously
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
But this doesn't work. Is there a way or am I doing something wrong?
I just tested the following code and it works as expected
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
<div id="fb-root"></div>
<fb:like href="http://yoururlto.like" send="false" width="450" show_faces="false" font=""></fb:like>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR_APP_ID', status: true, cookie: true, xfbml: true});
FB.Canvas.setSize({ width: 520, height: 1500 });
FB.Event.subscribe('edge.create',
function(response) {
alert('like!');
// put redirect code here eg
window.location = "http://www.mysite.com/redirected.html";
}
);
};
//Load the SDK asynchronously
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
</html>
How does it compare to your own page?
I am using the JavaScript SDK from facebook and I just did the what the example says to load it.This is the sample codes.
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '{{ facebook_app_id }}', status: true, cookie: true,
xfbml: true});
FB.Event.subscribe('{% if current_user %}auth.logout{% else %}auth.login{% endif %}', function(response) {
window.location.reload();
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="FetchPic.js"></script>
</body>
But the problem is the all.js from facebook can be loaded successfully but neither jquery nor FecthPic can be loaded, it just keep saying 404 not found. but both of them are in the same directory as the html file. I have no idea why. Thank you
Do this instead
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
where you have
<script type="text/javascript" src="jquery.js"></script>
or fix the path for your local jquery instance
Small expansion on hacknick's response:
Your script tags:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="FetchPic.js"></script>
are telling the browser to load the scripts from the same folder as the page (HTML or whatever) that's being displayed. I imagine that's not where they are located.
I have code like this.
$(document).ready(function() {
var highestCol = Math.max($('#main').children().height(),$('#main').children().height());
$('#main').children().height(highestCol);
});
But this doesn't work when I have Like box in some column. It seems this called before Facebook like box called.
How to fix this problem?
Basically I need to call this process after facebook loads Like box and Recommendations blocks (both).
To execute code after the facebook plugin has rendered, you can subscribe to xfbml.render. Here is my working code:
window.fbAsyncInit = function () {
FB.init({ status: true, cookie: true, xfbml: true });
FB.Event.subscribe("xfbml.render", function () {
fbexecute();
});
};
(function () {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
} ());
var fbexecute = function () {
//-- re-calculate heights here
}
I think you can just put the like-button in a fix-height container.
For example:
<div style="height: 62px;">
<fb:like-box href="http://www.facebook.com/platform" width="292" show_faces="false" stream="false" header="false"></fb:like-box>
</div>
Then you won't worried about exactly how height it will be.
Another possible solution.
I suppose that you using the method of load facebook javascrpt sdk asynchronously. Then you can execute your code after FB.init()
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
if (jQuery.isFunction(window.fbexecute)) {
window.fbexecute();
}
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
var fbexecute = function() {
var highestCol = Math.max($('#main').children().height(),$('#main').children().height());
$('#main').children().height(highestCol);
}
As per the FB.Event.subscribe, there is a loading event which will be triggered automatically when the page will finish rendering plugins
Step-1: In the HTML (put it where you want the social box to be shown):
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook">Facebook</blockquote></div></div>
Step-2: In the footer (just before ending the <body> tag):
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function(){
//FB.init({ status: false, cookie: true, xfbml: true });
FB.Event.subscribe("xfbml.render", function(){
columnHeightFixer();
});
};
(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/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function columnHeightFixer(){
//...Height Fixing Code...
}
</script>
$(document).ready(function()
{
var highestCol = Math.max($('#main').children().height(),$('#main').children().height());
$('#main').children().height(highestCol);
});