9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Wednesday, January 12, 2011

User Signup using Facebook Data

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.

User Registration using facebook registration plugin

Download Script     Live Demo

Author
Ravi Tamada
Ravi Tamada
Designer Developer & Freelance
Chennai, INDIA
androidhive.info
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.

User Registration using facebook registration plugin

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)
);

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>

The above iframe will render output like this

User Registration using facebook registration plugin
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';
}
?>

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"}

User Registration using facebook registration plugin
Comments
{ 119 comments }
fakefreelance said...

cool post.we are gonna to implement Registration Plugin

Beben said...

amazing you can do that my bos...
awesome3x...\m/

dskanth said...

Very nice.... iam amazed with this facebook plugin! Never thought of using user's facebook data in a registration form... cool idea :)

Alir3z4 said...

Prefectoooooooo!

Yasir Malik said...

thanks jani its great

HugoDias said...

btw we don't need to verify the string's right? like mysql_real_escape_string. Facebook do this for us? :)

Ahmad Fikry said...

Nice work man! Great post.

Anonymous said...

how can i verify from my database that for example, Username is taken or e-mail is taken using this plugin?

Thanks in advance!

Bhargav Anadkat said...

it is good post. Nice work Ravi

@bhargavlalo

Anonymous said...

i get

"Can't parse fields attribute. Is it a JSON array or CSV list?"

can anybody explain?
thanks

Ravi Tamada said...

It is not a CSV list. You can print the multidimensional array and see all the fields.

print_r($response);

singh from domionos india said...

What programming language are u using to create this plugin?This is really useful

Anonymous said...

keren banget

Buy Celebrex said...

Nice post..

Ravi Tamada said...

@Singh: We are not creating any plugins. Facebook is providing the plugin we need to read the data with PHP.

Fede said...

Nice 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.

Ravi Tamada said...

@Fede : Thank You for asking me a Good Question. Try this link

http://www.facebook.com/editaccount.php?language

This is not exactly what you needed but it will help after login.

wazan said...

Thank You Very much u kno m finding this almost 2 days @ last i found, Thank GOD Alhamdhulillah , Thank U

Fede said...

Thanks Ravi, I´m going to study. I´ll publish who I discover.

Fede said...

Ravi, sorry. But this is not the solution.

wazan said...

Ravi 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 !!
Thaxx Again !!

Anonymous said...

Ravi thank you for this article.

i 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.

wazan said...

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...

Im waiting for the answer any1 kno that hw to insert the profile picture ??

php development india said...

Thanks for useful code and stepwise information you have given. Keep sharing similar stuff.

Anonymous said...

Great thanks

Anonymous said...

Great tutorial... Thanks

Anonymous said...

This 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

Lucifix said...

With firebug it's easy to change email or any other information in hidden fields...

i4u2 said...

Nice work man! Great post.

Anonymous said...

Doesnt work. Ran twice with old app id, new ones, ran with no changes. Doesnt pass data to the db.

Arvind.b said...

Hi,
Is 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........

gianluca said...

hi, it's possible to save into database the url of profile photo of facebook?

sujay said...

affter am registaring with my demo i am getting a blank page please chek it out on http://webkoot.tk/test/index.html

Anonymous said...

is their a way to have custom fields but not force a user to enter anything in them?

For example i want to include custom field business name but not everyione has a business

Ravi Tamada said...

@Reply to Above:

Yes you can but you need Client Side Validation. See the below link

http://developers.facebook.com/docs/plugins/registration/advanced/

Raj said...

nice post..
thanks for sahring

Tusar said...

hi Ravi

I 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

Glynn Phillips said...

Hi Ravi,

I 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

satya said...

Hi Ravi,

This facebook Registration form script is excellent.

Thanks,
Satyram.S

David said...

Thanks This what I searched

Saurabh said...

script is running , how can i change the background color of iframe , i dont need white ground ? plz help me out ?

Saurabh said...

script is running , how can i change the background color of iframe , i dont need white ground ? plz help me out ?

Srinivas Tamada said...

@Saurabh

Iframe third party not in our control.

Creativityforacause said...

Nothing being inserted into the database what could be the error?

DD said...

What if you have your own reg form and want the url to redirect to it?

Is it any different to read the JSON?

How do I prefill the form with the response from fb?

johndoeherty said...

Great Post!

any 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!

kamaruzaman said...

YOU ARE GREAT! Thanks

Ani Happiness said...

i 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.

Anonymous said...

how can i do this tutorial with asp.net ??

Anonymous said...

Hi Ravi,
What 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.

Anonymous said...

Is there a way to make it save the passwords in md5?

Thank you.

MdAmor said...

How do I read fb user_about_me?? It is coming up empty and I can't figure out why.

Irwan said...

Thk for tutor.
How to get user location?
$location= $response["registration"]["location"];
result is array...
please for respone.
thk

Anonymous said...

Thank you sooo sooo very much..had been looking for this from 2 weeks...this one really works great :) :) :) :)

Anonymous said...

hello..i want to set cookies so that the registered users can be detected after login..please provide the session code for that...

Anonymous said...

I keep getting this, any ideas? "Can't parse fields attribute. Is it a JSON array or CSV list?"

Anonymous said...

The 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???

Caroline said...

To all those who are getting a parse error:

The 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

Deepanshu said...

Awesome post work for me 100%.

Thank a lot

Pandit Dindayal said...

i want to add signup and sigh in both facility in my site.

how can i add this?

test said...

i got this type of error.
can you please solve my problem?

error is "Can't parse fields attribute. Is it a JSON array
or CSV list?"

Anonymous said...

everyone can read your password in db with this script so besecure...

Anonymous said...

@Irwan said...
$location= $response["registration"]["location"]["name"];
try this hope this works.

Anonymous said...

tenqyu so much.. :)

AFRICA BEAUTY PAGEANTS said...

hello everyone,
somebody 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.

Anonymous said...

can i test this in localhost??

inTOWN said...

Can't find the data in the database, whatever I do...
It does print the Array, but further then that I don't get.

inTOWN said...

THIS:

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)
);

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'

Subhash said...

My database requires city , state - How can I pull these out?
The registration.php works fine for me.

Allison said...

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!

Jason M. said...

Hello, thank you for sharing this script!! I've got the database to work correctly and everything is working awesome

However, 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!!

prianto said...

I found an error on functions.php line 15. But everything's awesome! Thanks,

Anonymous said...

Awesome job!! Just what I needed

contact@lendalike.com said...

How 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?

christine said...

Update: I got it to work where it just posts the signed requests. It won't add to my database though? any ideas?

Jonas said...

Very Good but one question how can i get die Facebook_id to update the photo from fb to my space?

Anonymous said...

this is a good resource

Anonymous said...

When i register it directs me to store_user_data.php which is a blank page and neither my data is saved in DB

Anonymous said...

Awesome Awesome Awesome

admin said...

Dear All,

Have 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

me said...

can you please recheck the code's and if possible upload a zip file with the codes

i 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.

Sagar said...

my data is not stored in database, any one help plz

leil√£o online said...

hi, tank you finaly i find a tutorial that's works!

Anonymous said...

doesnt work on IE. How can I fix it?

Ayush Saraf said...

it really helped me
but 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?

Mali Hirsch said...

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. :-)

hafsa.iwe said...

gud articel


but when i get it page is blank no data printed on callback url

Anonymous said...

i'm getting the same error as: hafsa.iwe

I can see the form, but when i submit, callback page does not exist, and it does not store data in DB.

Any advice?

Thx!

kunal said...

how to create it in zend framework

Nishit Upadhyay said...

Can i use this in my localhost????

Ratan Thapa said...

Hi..

I 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
mail@ratan.com.np
www.ratan.com.np

vipin kumar said...

helpful......mind blowing man......

Hamza Kazi said...

hey 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?

renathy said...

Can i have two dynamic dropdowns as custom fields (so both takes data from db, second depands on first dropdown)?
Renate

bhagya said...

hi,good one but i am stuck in one more issue ,....so can u solve this problem

problem 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

Anonymous said...

Can't parse fields attribute. Is it a JSON array or CSV list?

:-(

help !!!

Anonymous said...

Hello, what about how to un-suscribe users from my website using Facebook ? it is possible ?

As 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 ?

Richie Rich said...

not working dear, as on your site it is not redirecting anywhere. same is happening on my site. Please help

Ahmed Zubair said...

This isnt loading form.
ERROR:
"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.

Jim Camut said...

Hi Ravi,

I'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

enn mu said...

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.

Johan Hultin said...

I get the following error;

Unable 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?

Akash Sharma said...

For complete documentation go to

https://developers.facebook.com/docs/plugins/registration/

Krishoo said...

Good plugin very useful i like it. thank you..

Anonymous said...

can I use store_user_data.php for facebook login and how ? Thank you

BrettK80 said...

I tried this, but get:
Unable 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?)

mercury said...

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.

Donald said...

Hello
This is de first (and only) tutorial which helped me to let the register-system work on my website!
Good work!

Anonymous said...

Great tutorial. Can you please a code for authenticating a returning user who registered using facebook

Anonymous said...

Data not stored in database!
Please help!!

Abhishek Choudhery said...

Why do you need to create an app first of all ?
I need to use this facebook login for some website..

What should I do ?

anuj kumar said...

tell me for each registration there is new app to get client ID ??

i want to make lots of registrtion but how , registrtion.html shows my profile(has app) info ,how i can manage

DarkteK said...

SOLUTION : !!!!
This isnt working anymore, go here and copy that code guys:

http://jsfiddle.net/QwdCv/

Anonymous said...

i am having a page on facebook for my website
how 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

Harsh Agrawal said...

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.
Undefined index email,password,gender,birthday in .../store_user_data.php in line 37,38,39,40

Harsh Agrawal said...

I am getting an error that is email password and other things are not defined.. so please anyone can help me out please.

Ashish said...

can we check it ..in localhost

Sean said...

I don't know why but this is not working for me. Is there any other alternative?

Anonymous said...

I got the $_REQUEST is empty

Post a Comment