It became really annoying when discovered new bugs today.
Basicly what i'm trying to do is; showing a Facebook dialog box and getting needed permissions to app and run callback js function. But can not achieve this simple and the most important part of the app.
First, lets initialize it:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function()
{
FB.init({appId: '135814169854494', status: true, cookie: true, xfbml: true, oauth: true });
FB.ui({method: "permissions.request", "perms": 'publish_stream,user_about_me,email,user_birthday,user_likes'} , function(response) { console.log(response); });
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/<?=$__FBLocal?>/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Now Javascript popup displays but if you click Okay, Go to App button, it does not grant permissions or even popup does not go away. Nothing changes! weird
If you disable Enhanced Auth Dialog from Advanced Application Settings in Facebook Developers section,
PopUp Style changes:
When you click Allow button, a javascript error throws: FB.Auth.setSession incompatible with OAuth2.
It is really common bug. There are some tips to not to get this bug i could find but all of them is not working. ( Such as; remove any extensions to all.js url -which i don't have- or change oauth parameter in FB.init -does not solve anything anymore- )
So , the only workaround is -unfortunately- embeding the permissions dialog in to page by redirecting. If someone can achieve JS SDK permission dialog , please let me know. Really stuck with lack of documentation in Graph API pages.
First I would suggest creating another facebook application to get a new facebook ID and test with it. If it works, then something was corrupt within facebook's storagea of the original facebook application's data. If it doesn't work, then you have a reproducible bug which you can report to facebook via their bug tracking tool.
I'm pretty sure permissions.request is deprecated. Can you try using method: oauth instead of permissions.request? Also, the perms param needs to change to scope. See https://developers.facebook.com/docs/reference/dialogs/oauth/
Related
I am using the latest fb js sdk with the default initialization:
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo $config->app_id; ?>',
xfbml : true,
status : true,
version : 'v2.3'
});
};
On the first page of my facebook page tab the fb.ui function works fine, but if I go to a subpage and try to share I get the following error: "An error occurred. Please try later"
But the rest of the fb js calls work fine, like if I want to retrive the fb id, I don't get any error.
Any thoughts?
After searching and trying 1 million things, I found the problem by myself:
You have to add your domain name in facebook developers, under "App Domains".
Put www.domain.com or without www, depending on what URL you are using the the secur page tab, canvas or website.
That fixed the problem for me.
Really struggling with facebook at the moment
I am trying to auth a user using openfb and facebook on an ios app being built with cordova (ionic). I have tried all the solutions I could find online.
My configuration is standard, and an almost copy and past of the openfb example. Without a callback url and with the following callback urls () I am getting the image you see on this facebook Security Warning while user has enabled secure login - iPhone
When I specify the callback url of http://localhost/oauthcallback.html. I get a Facebook mobile looking page with title, Error and message "Given URL is not permitted by the application configuration.: One of more of the given URLs is not allowed by the App's settings. It must watch the Website URL or canvas URL, or the domain must be a subdomain of one of the App's domains.
Note: works perfectly on web!
Can someone eplse point me in the direction to set this up once and for all on both Facebook and in openfb?
Please help!!!! :)
user1132726,
I struggled with that for days as well, looked over lots of forums, tried everything. Then I turned away to Javascript only.
We must have the right Javascript libraries in the right order. Some you can download, some you won't find easily.
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="js/cdv-plugin-fb-connect.js"></script>
<script src="js/openfb.js"></script>
Then you use regular Javascript logic to select your elements and use openfb API like:
openFB.login(
function(response) {
if (response.status === 'connected') {
alert('Facebook login succeeded, got access token: ' + response.authResponse.token);
// DO YOUR LOGIC HERE, I use perception: $.FacebookPerception.submit(response.authResponse.token);
} else {
alert('Facebook login failed: ' + response.error);
}
}, { scope:'email,public_profile,user_likes,user_friends'});
You must as well register your application at Facebook using Developers Console: http://developers.facebook.com . I used the website configuration with my main url: http://www.texugo.com.br/
I don't think you need other configurations. I tested only on Android. I don't know if you need to configure your App for Android at Facebook Console. I think it is not really used but haven't tested yet.
IMPORTANT: you need version 0.4 for openfb.js
Then you run Apache Cordova and deploy it to your mobile.
Further steps:
When you call Facebook it opens on a popop that Cordova applies
InAppBrowser, but I want to hide that ugly header that looks weird.
Integrate with Google+, LinkedIn and Twitter
Create OpenSocialAuth plugin
OBSERVATION: this is only working with Android, it does not work in web browsers. Gotta check it as well.
Hope it helps. Anything question me. I'm pretty sure I missed something.
See you.
I created social feeds functions(sending msg to friends and posting on own wall) using javascript SDK and graph API in Facebook 2-3 months ago for my apps. It was working perfectly when I created but now, when I visit my app and try to use them again, it no longer works. It's so strange since I never touched that code after I implemented them. I even tried to copy and pasting exact sample javascript code given in Facebook document and it didn't work either. Even after I re-write my code, it still doesn't work either. I have no idea what is wrong. Anyone face similar problem with javascript SDK? Thanks in advance.
Hi,
The code is here: Sorry for late reply.
<script src='http://connect.facebook.net/en_US/all.js'></script>
<script>
FB.init({
appId : 'id',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<script>
function share_wall() {
// calling the API ...
var obj = {
method: 'feed',
link: 'https://apps.facebook.com/id/',
name: 'test',
description: 'blalala'
};
FB.ui(obj);
}
</script>
I realized I actually have the same problem as you =\ Go to your app settings and make the additional configuration under Basic Settings.
If your domain is http://inspiration.nyp.edu.sg
If you are working on localhost
"Symptoms"
Previously, your JavaScript SDK functions were working fine. Now, executing your JavaScript SDK functions prompts you either an API Error Code 191 or an error.
Your PHP SDK functions are working fine.
Your JavaScript SDK functions work fine when you run your application as App on Facebook, but does not when you run your application as a Page Tab.
(For my case, the last date I checked was 7 August 2012 and my JavaScript SDK functions were working fine. It was until 3 September 2012 when I checked them again, then I encountered the errors mentioned above.)
I highly recommend everyone to check their Page Tab application's JavaScript SDK functions such as feed dialog, apprequests and etc.
Does anyone know when the ChannelUrl parameter, passed to FB.init, is actually used by the fb js sdk? I can see it getting hit in our nginx log files and it appears to be from IE8 users, but I cant seem to manually recreate it. I have a Fan Page iframe app, with like buttons and the comment plugins.
you can see this post. it is well explained.
https://developers.facebook.com/blog/post/2011/08/02/how-to--optimize-social-plugin-performance/
this post link may update in future. so I'm copy-paste-ing the whole post from the FB developer blog with giving the full credit to the author.
How-To: Optimize Social Plugin Performance
by Ankur Pansari - August 3, 2011 at 12:00am
Millions of websites use XFBML to render social plugins. We wanted to share some best practices that can improve the performance of these on your websites. Specifically, we offer custom channelUrl and asynchronous loading which, when used, will improve load times and reduce other issues such as double-counting of referral traffic from Facebook.
The custom channel URL is an optional parameter in the FB.init function called channelUrl. When you initialize the JavaScript library, add the channelUrl parameter in the FB.init function:
<div id="fb-root"></div>
<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 server to access session,
xfbml: true, // enable XFBML and social plugins
oauth: true, // enable OAuth 2.0
channelUrl: 'http://www.yourdomain.com/channel.html' //custom channel
});
</script>
The channelUrl points to a file that you add to your local directory which helps improve communication speed in some older browsers. Without the channelUrl, we are forced to use workarounds such as loading a second copy of the webpage in a hidden iframe to properly load social plugins. The workarounds increase load times and inflate referral traffic from Facebook.
To create a channel.html file, add the following line to the file (located at http://www.yourdomain.com/channel.html):
<script src="//connect.facebook.net/en_US/all.js"></script>
If you have the ability to run PHP, we strongly advise setting a long cache for the channelUrl file to ensure optimal performance. Here is a sample PHP script that accomplishes this:
<?php
$cache_expire = 60*60*24*365;
header("Pragma: public");
header("Cache-Control: maxage=".$cache_expire);
header('Expires: '.gmdate('D, d M Y H:i:s', time()+$cache_expire).' GMT');
?>
<script src="//connect.facebook.net/en_US/all.js"></script>
In this case, you should also set the channelUrl file to the fully qualified URL such as http://www.yourdomain.com/channel.php.
In our testing, adding a custom channelUrl improves the performance in Internet Explorer and therefore its inclusion is advised for all of our developers. Internet Explorer yields statistically significant performance gains when including the parameter, where the load time of a test website with 5 XFBML plugins improves from 1.10 seconds to 0.43 seconds.
Asynchronous loading is another simple tactic that allows your page to load quickly without blocking the loading of other elements of your page. Upon successful loading of the JS SDK, we call the window.fbAsyncInit function. All front-end functions that depend on Facebook API calls should be separated and called via window.fbAsyncInit. This ensures that the Facebook features are loaded in a non-blocking fashion and will speed up its rendering, which has positive SEO benefits. When designing your social features, you should approach it with this mentality to start.
For example:
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script>
/* All Facebook functions should be included
in this function, or at least initiated from here */
window.fbAsyncInit = function() {
FB.init({appId: 'your app id',
status: true,
cookie: true,
xfbml: true});
FB.api('/me', function(response) {
console.log(response.name);
});
};
(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>
We’ve updated our documentation to reflect the importance of these options and changed the default sample code to include a channelUrl. We are continuing to update our docs as part of Operation Developer Love as well as share more best practices via “How-To” blog posts.
See http://running.ph/
It just hangs chrome for a while, while all the buttons load. I've read using IFrame avoids this but I really want to use XFBML JS for all the extra functionality you get with it like tracking Likes, comments, and the send button.
Does anyone have a solution to this?
I'm sure I'm not the only site with 10+ Like buttons on it.
ah I found the answer by checking what Techcrunch / AOL does.
You load the XFBML as the user scrolls.
1.) Don't Parse XFBML on FB.init or the loading of the JS SDK
FB.init({
appId : APP_ID,
xfbml : false
});
2.) Load jQuery and jquery.sonar.js - this contains scroll and scrollout custom events
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://artzstudio.com/files/jquery-boston-2010/jquery.sonar/jquery.sonar.js"></script>
3.) jQuery code to parse XFBML on scrollin event (stolen from Techcrunch)
jQuery(document).ready(function($) {
var $shareWidgets = $( '.share-widget' );
$shareWidgets.bind( 'scrollin', { distance: 500 }, function() {
var $share = $( this );
if (!$share.data( 'initFB' ) && window.FB) {
$share.data('initFB', 1);
$share.unbind( 'scrollin' );
FB.XFBML.parse( $share[0] );
}
});
});
4.) wrap your XFBML tags in a class called 'share-widget'
<span class="share-widget"><fb:like></fb:like></span>
and voila! no more dang XFBML slowing down your pages. Ofcourse this only helps when you have a lot of XFBML tags on your page. Which most blogs may have.
Thank you AOL!
See the SlideShare presentation of AOL using jQuery: http://www.slideshare.net/daveartz/jquery-in-the-aol-enterprise where they talk about this and other optimizations they use.
Sharrre loads your sharing buttons only when needed, you can use all like button features and it has built-in Google Analytics tracking.
I had problems with this, too.
It's Social network's API fault. If you look in Chrome to the NET tab, you'll see that there are 252 requests per page! (Facebook, g+, Twitter, your resources)
This is part of problem
loadScriptAsync('//connect.facebook.net/en_US/all.js');
it loads all scripts possible, maybe multiple times without caching. I think there's no chance to avoid this from your side
OT: Why do you require offline&SMS access when logging on your site? I think nobody wise would like to give you him/her phone number and/or offline access
Here a quick pure javascript snippet to aid with throttling of multiple like buttons:
https://stackoverflow.com/a/11002386/223002