I have several Facebook like buttons on myself that are being rendered via XFBML. After clicking on them, they appear to work in that they change from the standard like button into the "thumbs up" icon that says "You like this". However, after a second or two (I assume the time it takes to hit FB's servers and come back), it automatically unlikes itself, turning back into the original like button.
See a video of what I mean here.
My code is pretty standard:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" lang="en">
...
<fb:like href="http://www.example.com/valid/path" layout="button_count" ref="recipe_preview" />
...
<script type="text/javascript">
window.fbAsyncInitExt = function() {
FB.Event.subscribe('edge.create', function(response) {
alert('Facebook Like Button: ' + response);
});
};
</script>
...
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: 'XXXXXXXXXX', // my app ID is here
status: true,
cookie: true,
xfbml: true
});
if (typeof(fbAsyncInitExt) == 'function') {
fbAsyncInitExt();
}
};
(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>
Edit: For what it's worth, I also attempted to see if Facebook was sending any log info, but it didn't appear to be:
<script type="text/javascript">
window.fbAsyncInitExt = function() {
FB.Event.subscribe('edge.create', function(response) {
alert('Facebook Like Button: ' + response);
console.debug(response);
});
FB.Event.subscribe('fb.log', function(response) {
alert('LOG: ' + response);
console.debug(response);
});
};
</script>
After a lot of digging, I finally discovered the source of the error. It turns out the page referenced by the href value in my fb:like tag required at least one of the fb:app_id or fb:admins META tags in the HEAD. For reference: http://developers.facebook.com/docs/opengraph
After trying all of the solutions I could find, none work, but I tried using the "Live feed" app ID rather than the default "Live Stream" when you're getting your code from the facebook developers page, which worked for me.
Related
I googled for nearly 4 hours and am posting this.
I am trying to implement facebook login in my website.
The problem is login is working fine, after login it has to redirect to anther custom page,
its not redirecting but staying in the same page. Here is my code that am using.
<head>
<title>My Facebook Login Page</title>
<script src="//connect.facebook.net/en_US/all.js"></script>
</head>
<body>
<div id="fb-root"></div>
<fb:login-button perms="email"></fb:login-button>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXX',
status : true,
cookie : true,
xfbml : true
});
FB.Event.subscribe('auth.login', function() {
window.location = "about_us.html";
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<!-- <div class="fb-login-button" >Login with Facebook</div> -->
Kindly guide me where am wrong also if possible correct code
I had taken the code from below link.
Redirect after clicking on the Facebook login button, even if already logged in Facebook
Thanks in advance.
you can just add this somewhere
FB.login(function(response) {
if (response.authResponse) {
window.top.location = "http://www.foo.com";
}
});
When I put
window.top.location = "http://www.foo.com";
under
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
window.top.location = "";
});
it worked.
I am developing an app on facebook.
Since yesterday the resizing worked fine with the following snippets:
CSS:
body, html { overflow:hidden; width:810px;margin:0; padding:0; border:0; }
Right before the closing body tag:
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
FB.Canvas.setAutoGrow(true,100);
</script>
On Facebook I chose fixed for height and width, but that should not matter due to the autoGrow.
Since today it is just cut off, I tried the fluid settings but it did not change anything. I can remove the css rules for body and html, but then scrollbars are added.
So in short:
The resizing does not work anymore at all.
Important to know (maybe) the app resizes dynamically (via JS) without a page reload.
The code did not change at all, so I am worried Facebook might have changed something?
Besides I also tried this js snippet without any effect (but it does the same anyway):
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function () {
window.setTimeout(function () {
FB.Canvas.setAutoGrow()
}, 250)
};
(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>
UPDATE:
The question was answered correctly, but one more thing to notice:
Apply overflow:hidden just to the body, it worked after I removed html from the rule - worked with the old canvas, at least I used it before.
Also putting the code in the header did not change anything as well and is not the same as putting it at the beginning in the body area.
Try this
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID', //Your facebook APP here
cookie : true, // enable cookies to allow the server to access the session
});
}
window.onload = function() {
FB.Canvas.setAutoGrow(91);
}
</script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '197724456937488', status: true, cookie: true, xfbml: true});
// this will fire when any of the like widgets are "liked" by the user
FB.Event.subscribe('edge.create', function(response) {
document.getElementById('likepost').style.display = "";
document.getElementById('falsebox').style.display = "none";
document.getElementById('fb').style.display = "";
});
FB.Event.subscribe('edge.remove', function(response) {
console.log('This was UNliked from this page: ' + window.location);
});
};
(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>
<div id="fb" style="display:none">
<fb:like-box href="<?php echo $detail['Post_FB'] ;?>" width="292" height="100" show_faces="false" stream="false" header="false"></fb:like-box>
</div>
<div id="link" style="display:none">
<fb:like href="http://design-pro.co.cc/appleworld/post.php?id=<?php echo $id?>" send="false" width="450" show_faces="true" font=""></fb:like>
</div>
Use this as your starting point for reference: http://developers.facebook.com/docs/reference/javascript/FB.init/
First thing to notice is how FB.init() call is wrapped in:
window.fbAsyncInit = function() {
...
};
You are already setting 'status' to true in your init call, so you should be able to subscribe to an event which will return the status value, which tells you the user's login status.
Check out: http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
Your FB.Event.subscribe(...) call should also be inside the same window.fbAsyncInit() call.
Once you verify that user is logged in, you can check for fan status. You still have to use the old REST API, since Facebook hasn't ported this over to Graph API: http://developers.facebook.com/docs/reference/rest/pages.isFan/
Please note: We are in the process of
deprecating the REST API, and will be
adding equivalent support to the Graph
API for this method. You should
continue to use this method until we
announce support in the Graph API.
Hope this points you in the right direction.
This tutorial might also help: http://thinkdiff.net/facebook/graph-api-javascript-base-facebook-connect-tutorial/
I originally posted this question on the FB Developer forums, but received no response...so figured someone here might be able to help.
When using the FB Social Plugins I have seen several articles outlining the following code (this is just a general example as the fb:like attributes can vary of course):
Code:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '#############', //configure FB App ID
status: true,
cookie: true,
xfbml: true
});
};
(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 src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="www.domain.com" show_faces="false" width="450" font="arial"></fb:like>
I am wondering the following:
1) When using most of the social plugins (Ex: Like, Activity, Recommendations, etc) is there a need to include both the full SDK script and the second script tag?
In other words could one just include the following on their site:
Code:
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="www.domain.com" show_faces="false" width="450" font="arial"></fb:like>
2) Are there any advantages of including both?
3) If you do not include the full script is there any reason to register for an App ID?
Thanks for any clarification that you may be able to provide!
I am trying to have a connect button on my site. Once the user has clicked the facebook login button, the pop up will ask the user to enter the authentication detail and the parent window will either redirect or refresh the page and the login button became a logout button.
My problem is when a user clicked the connect button from the popup, the popup page will redirect to my canvas page rather than closed the popup instead.
Many people have posted this issue, if you have done everything else right, the reason for this is xd_receiver file was not read by the fb.
You need to make sure that where your fb connect button is, you specify the correct path to xd_receiver.html file somewhere on bottom of that page. Something like below:
<script type="text/javascript">
FB.init("your api key here", "xd_receiver.htm");
</script>
It is even better and easier to put the xd_receiver file on your site's root folder and specify it with full domain url like this:
<script type="text/javascript">
FB.init("your api key here", "http://www.yoursite.com/xd_receiver.htm");
</script>
Here's a sample of facebook connect, login and logout, works very well,
Also make sure you add your site url under your app settings -> Website - > Site URL:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Facebook Connect Sample</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
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
});
/* All the events registered */
FB.Event.subscribe('auth.login', function(response) {
// do something on login
login();
});
FB.Event.subscribe('auth.logout', function(response) {
// do something on logout
logout();
});
FB.getLoginStatus(function(response) {
if (response.session) {
// logged in and connected user, someone you know
login();
}
});
};
/* Loading the JS SDK Asynchronously - Refer: https://developers.facebook.com/docs/reference/javascript/ */
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
function login(){
window.location = "http://google.com"; // Redirect to Another Page.
/* Show User's Name
FB.api('/me', function(response) {
document.getElementById('login').style.display = "block";
document.getElementById('login').innerHTML = response.name + " succsessfully logged in!";
});
*/
}
function logout(){
document.getElementById('login').style.display = "none";
}
</script>
<p><fb:login-button autologoutlink="true"></fb:login-button></p>
<div id="login" style ="display:none"></div>
</body>
</html>