Using facebook registration plug-in users can easily sign up on your website using facebook data. With one simple facebook login the form will be filled with user appropriate data. This plug-in is a simple iframe you can place it anywhere on your webpage. You can also add a custom field if facebook doesn’t have.
Download Script 
Live DemoAuthor
1. Creating Facebook App
a) First step is to Create a Facebook App.
b) Give a name for the Application and agree the Terms and Conditions.
c) On the Web Site tab give the values for siteURL and site domain
d) Store the App ID and App Secret.
2. Designing the Database
Create a table depending upon the fields we required in the registration process.
CREATE TABLE users
(
uid int(11) PRIMARY KEY AUTO_INCREMENT,
fullname varchar(50),
email varchar(50) UNIQUE,
password varchar(50),
gender varchar(6),
dob varchar(16)
);
(
uid int(11) PRIMARY KEY AUTO_INCREMENT,
fullname varchar(50),
email varchar(50) UNIQUE,
password varchar(50),
gender varchar(6),
dob varchar(16)
);
3. Designing the Registration Form
a) We are using iframe provided to by facebook to display registration form.
b) You all have to do is just replace client_id and redirect_uri with your Facebook App Id and the redirection url.
c) In this tutorial we are designing a form with name, email, password, gender, date of birth and captcha.
registration.php
<iframe allowtransparency="true" frameborder="no" height="600" scrolling="auto" src="http://www.facebook.com/plugins/registration.php?
client_id=183620578322567&
redirect_uri=http://example.com/store_user_data.php?&
fields=[
{"name":"name"},
{"name":"email"},
{"name":"password"},
{"name":"gender"},
{"name":"birthday"},
{"name":"captcha"}
]"
scrolling="auto"
frameborder="no"
style="border: none;"
width="500"
height="600">
</iframe>
client_id=183620578322567&
redirect_uri=http://example.com/store_user_data.php?&
fields=[
{"name":"name"},
{"name":"email"},
{"name":"password"},
{"name":"gender"},
{"name":"birthday"},
{"name":"captcha"}
]"
scrolling="auto"
frameborder="no"
style="border: none;"
width="500"
height="600">
</iframe>
The above iframe will render output like this
4. Reading and Storing the Callback Data
store_user_data.php
<?php
define('FACEBOOK_APP_ID', 'your_app_id'); // Place your App Id here
define('FACEBOOK_SECRET', 'your_app_secret'); // Place your App Secret Here
// No need to change the function body
function parse_signed_request($signed_request, $secret)
{
list($encoded_sig, $payload) = explode('.', $signed_request, 2);
// decode the data
$sig = base64_url_decode($encoded_sig);
$data = json_decode(base64_url_decode($payload), true);
if (strtoupper($data['algorithm']) !== 'HMAC-SHA256')
{
error_log('Unknown algorithm. Expected HMAC-SHA256');
return null;
}
// check sig
$expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
if ($sig !== $expected_sig)
{
error_log('Bad Signed JSON signature!');
return null;
}
return $data;
}
function base64_url_decode($input)
{
return base64_decode(strtr($input, '-_', '+/'));
}
if ($_REQUEST)
{
$response = parse_signed_request($_REQUEST['signed_request'],
FACEBOOK_SECRET);
$name = $response["registration"]["name"];
$email = $response["registration"]["email"];
$password = $response["registration"]["password"];
$gender = $response["registration"]["gender"];
$dob = $response["registration"]["birthday"];
// Connecting to database
mysql_connect('DATABASE_HOST', 'YOUR_USERNAME', 'YOUR_PASSWORD');
mysql_select_db('YOUR_DATABASE');
// Inserting into users table
$result = mysql_query("INSERT INTO users (name, email, password, gender, dob) VALUES ('$name', '$email', '$password', '$gender', '$dob')");
if($result){
// User successfully stored
}
else
{
// Error in storing
}
}
else
{
echo '$_REQUEST is empty';
}
?>
define('FACEBOOK_APP_ID', 'your_app_id'); // Place your App Id here
define('FACEBOOK_SECRET', 'your_app_secret'); // Place your App Secret Here
// No need to change the function body
function parse_signed_request($signed_request, $secret)
{
list($encoded_sig, $payload) = explode('.', $signed_request, 2);
// decode the data
$sig = base64_url_decode($encoded_sig);
$data = json_decode(base64_url_decode($payload), true);
if (strtoupper($data['algorithm']) !== 'HMAC-SHA256')
{
error_log('Unknown algorithm. Expected HMAC-SHA256');
return null;
}
// check sig
$expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
if ($sig !== $expected_sig)
{
error_log('Bad Signed JSON signature!');
return null;
}
return $data;
}
function base64_url_decode($input)
{
return base64_decode(strtr($input, '-_', '+/'));
}
if ($_REQUEST)
{
$response = parse_signed_request($_REQUEST['signed_request'],
FACEBOOK_SECRET);
$name = $response["registration"]["name"];
$email = $response["registration"]["email"];
$password = $response["registration"]["password"];
$gender = $response["registration"]["gender"];
$dob = $response["registration"]["birthday"];
// Connecting to database
mysql_connect('DATABASE_HOST', 'YOUR_USERNAME', 'YOUR_PASSWORD');
mysql_select_db('YOUR_DATABASE');
// Inserting into users table
$result = mysql_query("INSERT INTO users (name, email, password, gender, dob) VALUES ('$name', '$email', '$password', '$gender', '$dob')");
if($result){
// User successfully stored
}
else
{
// Error in storing
}
}
else
{
echo '$_REQUEST is empty';
}
?>
Adding a custom field
If you want to request user for additional information that facebook may not have then add a custom field in JSON string.
{"name":"phone", "description":"Phone Number", "type":"text"}
cool post.we are gonna to implement Registration Plugin
ReplyDeleteamazing you can do that my bos...
ReplyDeleteawesome3x...\m/
Very nice.... iam amazed with this facebook plugin! Never thought of using user's facebook data in a registration form... cool idea :)
ReplyDeletePrefectoooooooo!
ReplyDeletethanks jani its great
ReplyDeletebtw we don't need to verify the string's right? like mysql_real_escape_string. Facebook do this for us? :)
ReplyDeleteNice work man! Great post.
ReplyDeletehow can i verify from my database that for example, Username is taken or e-mail is taken using this plugin?
ReplyDeleteThanks in advance!
it is good post. Nice work Ravi
ReplyDelete@bhargavlalo
i get
ReplyDelete"Can't parse fields attribute. Is it a JSON array or CSV list?"
can anybody explain?
thanks
It is not a CSV list. You can print the multidimensional array and see all the fields.
ReplyDeleteprint_r($response);
What programming language are u using to create this plugin?This is really useful
ReplyDeletekeren banget
ReplyDelete@Singh: We are not creating any plugins. Facebook is providing the plugin we need to read the data with PHP.
ReplyDeleteNice post. Ravi could you tell me if I can change the language of this: "Have a Facebook account? Log in to prefill the form below with your profile information.", I need in Spanish. Thank you.
ReplyDelete@Fede : Thank You for asking me a Good Question. Try this link
ReplyDeletehttp://www.facebook.com/editaccount.php?language
This is not exactly what you needed but it will help after login.
Thank You Very much u kno m finding this almost 2 days @ last i found, Thank GOD Alhamdhulillah , Thank U
ReplyDeleteThanks Ravi, I´m going to study. I´ll publish who I discover.
ReplyDeleteRavi, sorry. But this is not the solution.
ReplyDeleteRavi i dd everything but i cudnt retrieve the profile picture !! giv me a solution !! i tried as several way but i cudnt !! and while u answer these giv in detail PLEASE, coz m not wel experience on these !!
ReplyDeleteThaxx Again !!
Ravi thank you for this article.
ReplyDeletei get the
"Can't parse fields attribute. Is it a JSON array or CSV list?"
you say "You can print the multidimensional array and see all the fields."
im noobie on this stuff.
where do i place the "print_r($response);"?
thank you for help.
yeah the reason for the error is just change inside field double quotation to single quotation then it will alright, thats what I do and now its working perfectly...
ReplyDeleteIm waiting for the answer any1 kno that hw to insert the profile picture ??
Thanks for useful code and stepwise information you have given. Keep sharing similar stuff.
ReplyDeleteGreat thanks
ReplyDeleteGreat tutorial... Thanks
ReplyDeleteThis doesn't work. I've tried it several times and there is no data being inserted into the users table. store user data file is accessed and page is just blank. I don't know how any of you are getting this to work and I teach PHP MySQL
ReplyDeleteWith firebug it's easy to change email or any other information in hidden fields...
ReplyDeleteNice work man! Great post.
ReplyDeleteDoesnt work. Ran twice with old app id, new ones, ran with no changes. Doesnt pass data to the db.
ReplyDeleteHi,
ReplyDeleteIs it necessary that your Facebook application is approved before performing this whole stuff. Or you can do this just by creating a new app from scratch which is not approved yet........
hi, it's possible to save into database the url of profile photo of facebook?
ReplyDeleteaffter am registaring with my demo i am getting a blank page please chek it out on http://webkoot.tk/test/index.html
ReplyDeleteis their a way to have custom fields but not force a user to enter anything in them?
ReplyDeleteFor example i want to include custom field business name but not everyione has a business
@Reply to Above:
ReplyDeleteYes you can but you need Client Side Validation. See the below link
http://developers.facebook.com/docs/plugins/registration/advanced/
nice post..
ReplyDeletethanks for sahring
hi Ravi
ReplyDeleteI was trying with your sample code. am getting the following code.
http://phpstudents.co.in/testfacebook/index.html
But i have put my correct client id provided to me by facebook.
Please help me
Hi Ravi,
ReplyDeleteI have followed your code and am getting these errors are you able to help at all?
Undefined index: signed_request in /var/www/vhosts/ridden.it/httpdocs/fb/store_user_data.php
which is on like 33 which is this line :
$response = parse_signed_request($_REQUEST['signed_request'],
and I am alos getting this :
Undefined offset: 1 in var/www/vhosts/ridden.it/httpdocs/fb/store_user_data.php
which is on line 8 which is this line:
list($encoded_sig, $payload) = explode('.', $signed_request, 2);
Thanks
Glynn
Hi Ravi,
ReplyDeleteThis facebook Registration form script is excellent.
Thanks,
Satyram.S
Thanks This what I searched
ReplyDeletescript is running , how can i change the background color of iframe , i dont need white ground ? plz help me out ?
ReplyDeletescript is running , how can i change the background color of iframe , i dont need white ground ? plz help me out ?
ReplyDelete@Saurabh
ReplyDeleteIframe third party not in our control.
Nothing being inserted into the database what could be the error?
ReplyDeleteWhat if you have your own reg form and want the url to redirect to it?
ReplyDeleteIs it any different to read the JSON?
How do I prefill the form with the response from fb?
Great Post!
ReplyDeleteany idea how to use a tab app as the redirect_uri?
It will redirect but doesn't have the form data in the signed request...?
Thanks!
YOU ARE GREAT! Thanks
ReplyDeletei tryed to register on facebook, but i am seeing in the page was please type your email address at the space made for first name, i don,t why please i need help.
ReplyDeletehow can i do this tutorial with asp.net ??
ReplyDeleteHi Ravi,
ReplyDeleteWhat the best way to redirect users after successful insert into the DB? i am getting "Warning: Cannot modify header information - headers already sent by " error when i try to use
if($result){
// User successfully stored
header('Location: http://www.google.com/');
}
Can you help please? I check back on this post.
Is there a way to make it save the passwords in md5?
ReplyDeleteThank you.
How do I read fb user_about_me?? It is coming up empty and I can't figure out why.
ReplyDeleteThk for tutor.
ReplyDeleteHow to get user location?
$location= $response["registration"]["location"];
result is array...
please for respone.
thk
Thank you sooo sooo very much..had been looking for this from 2 weeks...this one really works great :) :) :) :)
ReplyDeletehello..i want to set cookies so that the registered users can be detected after login..please provide the session code for that...
ReplyDeleteI keep getting this, any ideas? "Can't parse fields attribute. Is it a JSON array or CSV list?"
ReplyDeleteThe form is working for me except there is no data being inserted into the users table. I did not modify anything except ma database connection. Any idea???
ReplyDeleteTo all those who are getting a parse error:
ReplyDeleteThe script should look like this -
fields="[
{'name':'name'},
{'name':'email'},
{'name':'password'},
{'name':'gender'},
{'name':'birthday'},
{'name':'captcha}
]"
Take note of the double quotes/single quotes and missing double quotes after the FIELDS attribute declaration
Hope this helps,
C
Awesome post work for me 100%.
ReplyDeleteThank a lot
i want to add signup and sigh in both facility in my site.
ReplyDeletehow can i add this?
i got this type of error.
ReplyDeletecan you please solve my problem?
error is "Can't parse fields attribute. Is it a JSON array
or CSV list?"
everyone can read your password in db with this script so besecure...
ReplyDelete@Irwan said...
ReplyDelete$location= $response["registration"]["location"]["name"];
try this hope this works.
tenqyu so much.. :)
ReplyDeletehello everyone,
ReplyDeletesomebody help me
where exactly can i Add th following custom field following custom field-
1.type of model,
2.height,
3.weight,
4.haircolor,
5. bust size
6.5 photo uploads,to request user for additional information that facebook may not have,please help me with the script.thank you.
can i test this in localhost??
ReplyDeleteCan't find the data in the database, whatever I do...
ReplyDeleteIt does print the Array, but further then that I don't get.
THIS:
ReplyDeleteCREATE TABLE users
(
uid int(11) PRIMARY KEY AUTO_INCREMENT,
fullname varchar(50),
email varchar(50) UNIQUE,
password varchar(50),
gender varchar(6),
dob varchar(16)
);
Should Be:
CREATE TABLE users
(
uid int(11) PRIMARY KEY AUTO_INCREMENT,
name varchar(50),
email varchar(50) UNIQUE,
password varchar(50),
gender varchar(6),
dob varchar(16)
);
----
'FULLNAME' SHOULD BE 'NAME'
My database requires city , state - How can I pull these out?
ReplyDeleteThe registration.php works fine for me.
I'm successfully connecting to the mysql database and printing the array works, but it does not store into my database. I've even tried "inTowns" suggestion above. I feel like i'm sooo close! Any help would be Greatly appreciated. Thank you!
ReplyDeleteHello, thank you for sharing this script!! I've got the database to work correctly and everything is working awesome
ReplyDeleteHowever, Can you share how to have the form also send a simple email that is not dynamic? I just want to send a thank you message with a link while also retaining their information in the database.
Thank you!!
I found an error on functions.php line 15. But everything's awesome! Thanks,
ReplyDeleteAwesome job!! Just what I needed
ReplyDeleteHow can you add a redirect to the homepage after it's stores the data? Can you add that action to the store_data_user.php?
ReplyDeleteUpdate: I got it to work where it just posts the signed requests. It won't add to my database though? any ideas?
ReplyDeleteVery Good but one question how can i get die Facebook_id to update the photo from fb to my space?
ReplyDeletethis is a good resource
ReplyDeleteWhen i register it directs me to store_user_data.php which is a blank page and neither my data is saved in DB
ReplyDeleteAwesome Awesome Awesome
ReplyDeleteDear All,
ReplyDeleteHave any body for help me? When I save my FB application then give me "Error,
sharp-warrior-9347.herokuapp.com must be derived from your Site URL or your Mobile Web URL." Plz advice me, how can save my application
can you please recheck the code's and if possible upload a zip file with the codes
ReplyDeletei am getting an error
store_user_data.php?. It may be down for maintenance or configured incorrectly.
Here are some suggestions:
Reload this webpage later.
HTTP Error 500 (Internal Server Error): An unexpected condition was encountered while the server was attempting to fulfill the request.
my data is not stored in database, any one help plz
ReplyDeletehi, tank you finaly i find a tutorial that's works!
ReplyDeletedoesnt work on IE. How can I fix it?
ReplyDeleteit really helped me
ReplyDeletebut i wanna know
wht is the login process
suppose i registered the site and put the data in the
databse the way u told
but then what actually happens when user login/
i mean
tht session and the various things we do in normal procedure?
and how i restrict the pages if usr is not logged in?
Wow. Thank you, this is exactly what I needed. One oint is that I had to change fullname to name and it worked like a charm. :-)
ReplyDeletegud articel
ReplyDeletebut when i get it page is blank no data printed on callback url
i'm getting the same error as: hafsa.iwe
ReplyDeleteI can see the form, but when i submit, callback page does not exist, and it does not store data in DB.
Any advice?
Thx!
how to create it in zend framework
ReplyDeleteCan i use this in my localhost????
ReplyDeleteHi..
ReplyDeleteI am in confusion..
Every article i search for facebook users registration in wordpress, i only find creating a seperate table for it.
Can i ask a little help from you guys..
I want to create facebook users to register in my website..
the new user_id to be created for my wordpress should be the email id of the facebook user.
Instead of creating new user table, cannot we send the facebook user data to wordpress table wp_users.
Hoping to get a good response for you guys.
Thank You
Ratan Thapa
[email protected]
www.ratan.com.np
helpful......mind blowing man......
ReplyDeletehey man great script but i am just having some issues.. when i submit the registeration form i get a blank next page... nothing is saved in my database table either... what could possibly be the error?
ReplyDeleteCan i have two dynamic dropdowns as custom fields (so both takes data from db, second depands on first dropdown)?
ReplyDeleteRenate
hi,good one but i am stuck in one more issue ,....so can u solve this problem
ReplyDeleteproblem is I want to prefill the sign up form of the site i created i.e i am getting a form from facebook by doing this but,i want only attributes and all other things should be of my choice( i mean look and feel ,like color,background etc)
so any idea how to implement this
Can't parse fields attribute. Is it a JSON array or CSV list?
ReplyDelete:-(
help !!!
Hello, what about how to un-suscribe users from my website using Facebook ? it is possible ?
ReplyDeleteAs I can notice when a user registers and confirms by facebook registration plugin it seems that, Facebook marks as registered to this user. But how can you unmark this user if he wants to unsuscribe ?
not working dear, as on your site it is not redirecting anywhere. same is happening on my site. Please help
ReplyDeleteThis isnt loading form.
ReplyDeleteERROR:
"Unable to load the registration form for Frostbox. You may have previously blocked this app on Facebook. Go to your Facebook privacy settings to unblock this app. (Error: That 'redirect_uri' isn't allowed for that client_id.)"
Please help.
Hi Ravi,
ReplyDeleteI'm trying to get the script to work. The registration form looks good, but then I get a 404 error when the form is submitted and the redirect goes to the store_user_date.php. Did I miss something? I'd appreciate any help you could offer.
Best,
-Jim
i've follow all the instructions above and only change the database part. but why i cannot direct to user_data_info.php after clicking register?please help.
ReplyDeleteI get the following error;
ReplyDeleteUnable to load the registration form for Skalshop. You may have previously blocked this app on Facebook. Go to your Facebook privacy settings to unblock this app. (Error: Can't parse fields attribute. Is it a JSON array or CSV list?)
I've created a app, and replaced the appid, somehow as soon as I change/remove the redirect_uri (change from default given by Facebook) it all stops working. What could I be doing wrong?
For complete documentation go to
ReplyDeletehttps://developers.facebook.com/docs/plugins/registration/
Good plugin very useful i like it. thank you..
ReplyDeletecan I use store_user_data.php for facebook login and how ? Thank you
ReplyDeleteI tried this, but get:
ReplyDeleteUnable to load the registration form for Sportxast Beta Registration. You may have previously blocked this app on Facebook. Go to your Facebook privacy settings to unblock this app. (Error: Can't parse fields attribute. Is it a JSON array or CSV list?)
oh Also, I think this doesn't work in chrome? It's something other than alert box permission because that doesn't seem to make a difference.
ReplyDeleteHello
ReplyDeleteThis is de first (and only) tutorial which helped me to let the register-system work on my website!
Good work!
Great tutorial. Can you please a code for authenticating a returning user who registered using facebook
ReplyDeleteData not stored in database!
ReplyDeletePlease help!!
Why do you need to create an app first of all ?
ReplyDeleteI need to use this facebook login for some website..
What should I do ?
tell me for each registration there is new app to get client ID ??
ReplyDeletei want to make lots of registrtion but how , registrtion.html shows my profile(has app) info ,how i can manage
SOLUTION : !!!!
ReplyDeleteThis isnt working anymore, go here and copy that code guys:
http://jsfiddle.net/QwdCv/
i am having a page on facebook for my website
ReplyDeletehow could i get details of user via facebook without making any app on fb
jus need the user to like the page and get their details to my registeration page or directly to the database
hey this is what i was searching from last 80hours thank u so much but i m getting small error. i know this error is so silly to ask but i m naive in php so anyone can help me please.
ReplyDeleteUndefined index email,password,gender,birthday in .../store_user_data.php in line 37,38,39,40
I am getting an error that is email password and other things are not defined.. so please anyone can help me out please.
ReplyDeletecan we check it ..in localhost
ReplyDeleteI don't know why but this is not working for me. Is there any other alternative?
ReplyDeleteI got the $_REQUEST is empty
ReplyDeleteI have made application on facebook developer link still I have not got facebook friend list.
ReplyDeletenice script its work very usefull
ReplyDeleteThanks
Hello,
ReplyDeleteScript is not working..plz help, nothing come on bro
It's not working for me. I have added client id, app id and secret keys, but there is nothing in iframe. I have also checked demo and its also empty. Please resolve this issue.
ReplyDelete