A few months ago, i published several posts about Facebook Javascript SDK but they no longer work since Facebook updates to OAuth 2.0. So this post is the updated version of
Facebook Javascript SDK – A Simple Login Page
and it should work works with OAuth2.
1. Create the a Facebook App @ Facebook Developers.
2. Enter the website URL under Select how your app integrates with Facebook.
3. In the webroot folder, create a directory called php-sdk and download the following 2 files from GitHub – facebook / php-sdk to the new created folder.
- facebook.php
- base_facebook.php
4. Upload the following file to your web server. This file should be located at the URL which we enter in step 2.
fb-login-oauth2.php
<?php
// Enter the app id and secret below
define('YOUR_APP_ID', '<facebook app id>');
define('YOUR_APP_SECRET', '<facebook app secret>');
require 'php-sdk/facebook.php';
$facebook = new Facebook(array(
'appId' => YOUR_APP_ID,
'secret' => YOUR_APP_SECRET,
));
$userId = $facebook->getUser();
?>
<html>
<body>
<div id="fb-root"></div>
<?php if ($userId) {
$userInfo = $facebook->api('/' + $userId); ?>
Welcome <?= $userInfo['name'] ?>
<?php } else { ?>
<fb:login-button></fb:login-button>
<?php } ?>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : <?php print YOUR_APP_ID; ?>,
status: true,
cookie: true,
xfbml : true,
oauth : true,
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
};
(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>
</body>
</html>
That’s all for the OAuth2 updates. But there is a slight difference with the old example Facebook Javascript SDK – A Simple Login Page. In this new example, after you have logged in, the login session will not end even if you logout from http://www.facebook.com in another browser tab. So you have to add the log out feature otherwise the application will keep your login session until you clear the browser cache.
Done =)
Reference:
- Facebook Developers – Facebook for Websites
- GitHub – facebook / php-sdk
- Facebook Javascript SDK – A Simple Login Page
Please help me.
I have created a folder named facebook at my web root folder and paste these two files facebopok.php and base_facebook.php(downloaded as u directed) in it and paste fb-login-oauth2.php file at web root folder. I have changed my application Id and secret key as you see below —
// Enter the app id and secret below define('YOUR_APP_ID', '177639729#######'); define('YOUR_APP_SECRET', '74a990aa2b19b4e28bc#############'); include_once(facebook/facebook.php'); echo "before create facebook object"; $facebook = new Facebook(array( 'appId' => YOUR_APP_ID, 'secret' => YOUR_APP_SECRET, )); echo "after create facebook object";but it won’t works. The first echo statement execute but not second.
what should I do? Please help
LikeLike
i tried and there is no problem. is that becoz you missed the open single quote.
... //include_once(facebook/facebook.php'); include_once('facebook/facebook.php'); ...LikeLike
Thanks very much for your quick reply.
But actually this mistake happened here while typing and editing, not in my original php file.
And one thing if really its happened, then some syntax error would be prompt to me, but there is whole blank page except the line “before create facebook object”
LikeLike
Set the error_reporting as follow
<?php // Add the following 3 lines error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE); // Enter the app id and secret below define('YOUR_APP_ID', '177639729#######'); define('YOUR_APP_SECRET', '74a990aa2b19b4e28bc#############'); include_once(facebook/facebook.php'); echo "before create facebook object"; $facebook = new Facebook(array( 'appId' => YOUR_APP_ID, 'secret' => YOUR_APP_SECRET, )); echo "after create facebook object"; ?>Refresh the url, what did you get?
LikeLike
after adding these three lines it shows me the following error —
Fatal error: Uncaught exception ‘Exception’ with message ‘Facebook needs the CURL PHP extension.’ in /var/www/facebook/base_facebook.php:19 Stack trace: #0 /var/www/facebook/facebook.php(18): require_once() #1 /var/www/fb-login-oauth2.php(11): include_once(‘/var/www/facebo…’) #2 {main} thrown in /var/www/facebook/base_facebook.php on line 19
LikeLike
you need the php curl extension, ask your server admin to install that for you.
LikeLike
Hi,
Thanks for that tuto but I got a problem:
Everything seems to work well except that the page is alway reloading. If I remove this section and refresh manually it is working fine:
FB.Event.subscribe(‘auth.login’, function(response) {
window.location.reload();
Can you help?
LikeLike
I dun have the reloading problem. It may be caused by other reasons.
Have you tried the example in your server?
LikeLike
Yes, I copy/paste your example
LikeLike
Could you try replacing
by
setTimeout('document.location.reload()',0);Reference: StackOverflow – Facebook Javascript SDK window location reload not working on Firefox
Han reported a reload problem in another post.
LikeLike
Thanks for your help but even with that change it is doing the samething. It is aleays reloading and saying that the page need to be refresh.
LikeLike
Are you using IE? have you tried it in Chrome of Firefox?
LikeLike
I am using IE9. I just tried with Chrome and it is working very well and under Firefox it is the same problem. (these last test were using your original data)
LikeLike
Could the solution below solve your problem?
Facebook API – Infinite redirect loop problem in Internet Explorer 8
LikeLike
No, it doesn’t change anything.
LikeLike
Then i have no idea. How about this?
StackOverflow – Eternal reloading page with Internet Explorer
LikeLike
Thanks for all you help, I will keep looking and if I find something ‘ll post it here.
LikeLike
Do let me know if you could fix the problem. Thanks. =)
LikeLike
Hi – thanks for posting the code. I have copied your file, placed it on the server. When the page first appears it shows the login button. Once I click that, i login. After that, the screen comes back with only the login button again. Isn’t it supposed to do something else? I’m thinking something could be wrong with my set-up, but it shows no php errors of not. Any advice?
LikeLike
It is a 2 steps login, if your browser doesn’t have a facebook login session.
1. it will show the fb connect button.
2. click the fb connect button and there is popup fb login window.
3. after login, the fb connect button will change to fb login button.
4. click the fb login button to complete the login.
if you are already login to facebook, step 1 & 2 are skipped.
LikeLike
hi,
i have got following error after loing with facebook popup,
Fatal error: Uncaught CurlException: 77: error setting certificate verify locations: CAfile: C:\xampp\htdocs\facebook\fb3/fb_ca_chain_bundle.crt CApath: none thrown in C:\xampp\htdocs\facebook\fb3\base_facebook.php on line 977
LikeLike
Do you have the fb_ca_chain_bundle.crt file from facebook php-sdk (https://github.com/facebook/php-sdk/) in C:\xampp\htdocs\facebook\fb3?
Reference: http://ellislab.com/forums/viewreply/844986/
LikeLike