Using Facebook Registration Plugin and Login Button

Facebook Connect button alone can pretty much collect all the information we need from user. But sometimes we need to collect additional information during the registration, such as favorite Color, number of kittens, movie star name etc. To collect such information, we can use Facebook Registration Plugin. Instead of just showing Facebook Registration plugin, we will use Facebook Login button and call Registration plugin later. To make it even better I have used colorbox by Jack Moore.

I am going to use PHP, jQuery and jQuery Colorbox to achieve this. I have created four PHP files for the purpose. Index.php, config.php, process.php and receive_data.php and included colorbox files for the registration plugin, which you will find in downloadable file at the bottom of the page.

Config.php

Config.php file will store our settings information. Just replace values with your own.

1
2
3
4
5
6

<?php
########## app ID (Replace with yours) #############
$appId = 'xxxxxx'; // your app id here
$appSect = 'xxxxxxx'; // your app secret
$redirect_url = "http://Path-To/Your-Site-Folder/";
?>

Index.php

Index.php simply displays Facebook Login button, and once user connects using Facebook button, Facebook Registration Plugin pop-up inside colorbox, where user needs to enter additional information.

If you look at bottom of the page, using PHP session this page will display user entered details received from receive_data.php using PHP session and distroys it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

<?php
//include settings file
require_once('config.php' );
session_start();
?>
<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 & Facebook Registration Part I</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="colorbox/jquery.colorbox-min.js"></script>
<link href="colorbox/colorbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="fb-login-wrapper">
<div class="fb-login-button" onlogin="javascript:registerme();" size="medium" scope="publish_stream,email">Login</div>
</div>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: '<?php echo $appId; ?>',
cookie: true,
xfbml: true,
oauth: true,
display:'popup'});
};
(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);}());
function registerme(){
FB.login(function(response) {
if (response.status === "connected")
{
//user Colorbox to popup facebook registration plugin using Ajax
var alldata = {processthis: "yes"};
$.colorbox({href:"process.php",data:alldata,onClosed:function(){ $("#fb-login-wrapper").show(); },onComplete:function(){FB.XFBML.parse(); }});
}
});
}
</script>
<?php

if(isset($_SESSION['facebook_data']))
{
//registration data sent from receive_data.php file
$userid = $_SESSION['facebook_data']["user_id"];
$fullname = $_SESSION['facebook_data']["registration"]["name"];
$usercolor = $_SESSION['facebook_data']["registration"]["color"];
$userfrom = $_SESSION['facebook_data']["registration"]["from"];
$userlike = $_SESSION['facebook_data']["registration"]["like"];

//Now we have user data, we can store it in database or just prepare for output
$facebookData = array('Facebook User ID'=>$userid,'Name'=>$fullname,'Favorite Color'=>$usercolor,'Location'=>$userfrom,'Likes Saaraan'=>$userlike.' (0=No|1=Yes)');

//Output this data
echo '<pre>';
print_r($facebookData);
echo '<pre>';

//distroy session
session_destroy();
}
?>
</body>
</html>

Process.php

Process.php can do number of task, such as check connected user in database, display registration form or just redirect logged-in user to a new page. For now, we will just display Facebook registration plugin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?php
require_once('config.php' );

if(isset($_POST["processthis"]) && $_POST["processthis"]=="yes")
{
$regFields='[{"name":"name"},
{"name":"color","description":"Your fev Color","type":"text"},
{"name":"from","description":"Where are u From?","type":"text"},
{"name":"like","description":"Do you like saaraan.com?","type":"checkbox"}]';

echo '<div id="registration_form" style="width:560px;height:330px;" align="center">
<fb:registration
fields=''.$regFields.''
redirect-uri="'.$redirect_url.'receive_data.php"
width="530">
</fb:registration>
</div>';
}
?>

Receive_data.php

This file will receive signed_request data from facebook, and redirect user to homepage.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<?php
require_once('config.php' );

session_start();

if(isset($_POST["signed_request"])){ //receive user data from facebook
$signedresponse = parse_signed_request($_REQUEST["signed_request"], $appSect);
if($signedresponse)
{
//Receive facebook data and redirect user to homepage with session variable
$_SESSION['facebook_data'] = $signedresponse;
header('Location: '.$redirect_url);
}
}

//function to parse signed data from facebook.
function parse_signed_request($signed_request, $secret) {
list($encoded_sig, $payload) = explode('.', $signed_request, 2);
$sig = base64_url_decode($encoded_sig);
$data = json_decode(base64_url_decode($payload), true);

if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {
die('Unknown algorithm. Expected HMAC-SHA256');
return null;
}
$expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
if ($sig !== $expected_sig) {
die('Bad Signed JSON signature!');
return null;
}
return $data;
}

function base64_url_decode($input) {
return base64_decode(strtr($input, '-_', '+/'));
}

?>

Download Demo