I've developed a simple website using facebook connect, and it has been working fine for the last month or so. Underneath the fb:login-button code is a fb:facepile. It has worked as expected until today, when instead of showing friend's pictures it displays the facebook homepage. Here is a screenshot of the problem http://i.stack.imgur.com/nZsbq.png
Here is the relevant code. It worked at one time, so I'm really confused what happened to cause this weird error. Any help would be greatly appreciated.
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '<?php echo $appkey; ?>', status: true, cookie: true, xfbml: true});
/* All the events registered */
FB.Event.subscribe('auth.login', function(response) {
// do something with response
login();
});
FB.Event.subscribe('auth.logout', function(response) {
// do something with response
logout();
});
};
(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);
}());
function login(){
document.location.href = "<?php echo $base_url.'/facebook/'; ?>";
}
function logout(){
document.location.href = "<?php echo $base_url.'/logout/'; ?>";
}
</script>
I cannot copy the two XFBML tags that follow the javascript. They are fb:login-button and fb:facepile
It is a reported bug but it seems that nobody at Facebook care about it. Very strange and disapointing for such big web company.
http://forum.developers.facebook.net/viewtopic.php?id=90734
You can report this bug by upvoting at the follwoing webpage :
http://bugs.developers.facebook.net/show_bug.cgi?id=15490
It looks like <fb:facepile></fb:facepile> is finally working again. The bug was marked as resolved on the Facebook bugtracker and is currently working as expected on my development server.
Related
I am having a hybrid mobile application(should work in android and ios). In which I need to post on facebook wall from my application. Please note its a hybrib app, so I am not supposed to use any java or c code.
I tried the following method , its working in simulator , but not in actual device. Please help me.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ' my appID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(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>
<script type="text/javascript">
$(document).ready(function(){
$('#share_button').live('click', function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'HyperArts Blog',
link: 'http://hyperarts.com/blog',
picture: 'http://www.hyperarts.com/_img/TabPress-LOGO-Home.png',
caption: 'I love HyperArts tutorials',
description: 'The HyperArts Blog provides tutorials for all things Facebook',
message: ''
});
});
});
</script>
Thanks
I ran into this. your:
document.location.protocol
which is suppose to pull in the FB SDK is actually "file:///" and thats what gets fed into the url for that FB JS library.
Manually specify http:// or https://
This didnt work for me either on safari webView on IOS so i had to hit the endpoints manually using AJAX.
The code below has been used for several month successfully. But recently, it stopped working. The objective is to pull the latest feed from a facebook page. The response is now "An access token is required to request this resource." But reading the JS SDK docs never suggest anything more than an app ID for this method. What is the real error here?
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '<?php echo $this->appId; ?>', status: true, cookie: true, xfbml: true});
FB.api('/<?php echo $this->appId; ?>/feed', {'limit': <?php echo (int)$this->feedLimit; ?>}, function(response) {
if(response.data[0]) {
jQuery('.facebook .comment p a').append(response.data[0].message);
}
});
};
(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);
}());
Ah, that should work (if your app ID is indeed correct): did the app ID somehow change to a user ID in the recent past?
EDIT: ah, must be a recent change in the platform. I'm guessing accessing app feeds now need a token. See http://developers.facebook.com/blog/post/510/ for details.
I'm trying to fb:login-button work for mobile web, a la: http://developers.facebook.com/docs/guides/mobile/
However, I'm not sure where to add this code: &display=touch
My FBML is the standard:
<fb:login-button autologoutlink='true' perms='user_about_me,email'></fb:login-button>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({ appId: 'XXXXXXX', status: true, cookie: true, xfbml: true });
FB.Event.subscribe('auth.login', function() {
location.href = "....";
});
};
(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>
Any ideas?
I'm pretty certain you're not able to use the FBML tags for mobile web applications. At least, they won't accept the display=touch argument.
It means you'll need to use the slightly more complex OAuth implementation that they describe on http://developers.facebook.com/docs/guides/mobile/
It kinda makes sense if you think about it. The FBML tags generally rely on popups or overlays, which you can't really be certain will be compatible with all mobile browsers. The OAuth implementation takes you off to a FB page and returns you back to your host site for authentication and authorisation.
I recently upgraded to open graph and implemented some of the facebook social plugins on my website like fb:friendpile fb:like-box etc
Ever since I implemented these new features, I'm seeing some random behavior with these plugins.
Like on my home page, when you type in the URL and go for the first time, none of the facebook social plugins are rendered - no login button, no friendpile no like - nothing.
But when you hit CTRL F5 - they appear. First I thought it probably has somethin to do with my machine but yesterday two of my users reported the same issue.
I googled around and it seems to have something to do with where you place your connect code. Right now, I have this relevant portion of the script placed in my head tag - I even tried placing it right before the end of body tag - but it made no difference.
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '<?php echo Zend_Registry::getInstance()->configuration->facebook->appid;?>', status: true, cookie: true, xfbml: true});
/* All the events registered */
FB.Event.subscribe('auth.login', function(response) {
// do something with response
login();
});
FB.Event.subscribe('auth.logout', function(response) {
// do something with response
logout();
});
};
(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);
}());
function login(){
document.location.href = "<?php echo $this->baseUrl(); ?>/login/log";
}
function logout(){
FB.init({appId: '<?php echo Zend_Registry::getInstance()->configuration->facebook->appid;?>'});
FB.logout(function(response) {
// user is now logged out
});
document.location.href = "<?php echo $this->baseUrl(); ?>/login/logout";
return false;
}
</script>
Any insights in trouble shooting this will be appreciated
Thanks
Your logout logic seems problematic (you call FB.logout() in logout() -- but also call logout() on the 'auth.logout' event, which seems circular). You should also remove the FB.init() call inside your logout() function. The lack of xmlns:fb on the <html> tag is often the cause of XFBML not rendering in IE, so I'd double check that. You could also try replacing the async loading with sync loading using a normal script tag like:
<script src="http://connect.facebook.net/en_US/all.js"></script>
But a live repro case would be more helpful since your code looks fine for the most part.
EDIT: You can also checkout http://fbrell.com/xfbml/fb:login-button for examples.
I'm trying to use the new Facebook Graph API on my website. This is what I have:
Somewhere on the page:
<fb:login-button autologoutlink="true" perms="email,user_birthday,status_update,publish_stream"></fb:login-button>
Right after the tag:
<div id="fb-root">
</div>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({ appId: '<%= ConfigurationManager.AppSettings["FBAppId"] %>', status: true, cookie: true, xfbml: true });
/* All the events registered */
FB.Event.subscribe('auth.login', function (response) {
// do something with response
alert("login success");
});
FB.Event.subscribe('auth.logout', function (response) {
// do something with response
alert("logout success");
});
FB.getLoginStatus(function (response) {
if (response.session) {
// logged in and connected user, someone you know
alert("login success");
}
});
};
(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>
but when I click on the generated login button, nothing happens.
In addition, I'm getting
FB.getLoginStatus() called before calling FB.init().
in Firebug console.
Any ideas?
I can't believe it, I was referencing a non existing key in the Web.config hence FB.init was failing silently.
It works as expected now.
To be clearer I wasn't passing the appId to FB.init, once I did, it worked.
Had the same issue, here is the solution that worked for me. Just put the following in your head section or in other words, add the app_id to the source of the facebook js.
<script src="//connect.facebook.net/en_US/all.js&appId=xxxxxxxxxxxxxxx" type="text/javascript"></script>
In my case, the problem went away after I disabled the XFBML functionality (i.e. setting the xfbml key to false, removing the fb: namespace and the #xfbml=1 fragment in <script src="…">). Good that I didn’t need it anyway.
YMMV, there are several other valid reasons why this error message can appear.