How to create facebook login

 

Hi friend’s today I am going to discuss for creating a facebook login. Now a days nobody want to fill up the registration form. Its too boring work to fill the signup form for any website. I also hate this type of working even some times I have left lots of the site without registration.

Facebook has give a better idea that if you have a facebook id then you  dont need to create a account just share your facebook account with the website.  Facebook has provided a api by using you can get the person info from facebook like name , date of birth portrait image etc.

You just have to create some code that will intract with the facebook and when front end user will use the website then website have a login button that asking for facebook user id and password. When user will submit the form you will be logged in to the website.

Now the things is how to create this application. Today Ishant (Php Developer working with me) was working on a project and I was looking that he getting problem with the facebook login, So I decided to give a post regarding facebook login. I hope this will be helpfull to all my friends who just started with facebook apps.

This is not a big task to create a facebook login but If you new for facebook app then it can take some times for r&d . I will show you here step by step process to creating the facebook login.

To create facebook login you need to follow the follwing steps.

1. create a facebook app for your webiste.

2. create a facebook login button using facebook javascript sdk.

3. user will try to login on your website through facebook login button and if facebook get the valid user this will return you the basic info of the user.

4. You need to create the login session for valid user.

Thats it.

Now we will go step by step.

1. Facebook app. To create a facebook app go to https://developers.facebook.com/apps.

Click on create creae new app.

 

You have to put the App name like in my example case I had put Network Ocean . Now when will you click on continue button you will be on the next page where you have to put the information regarding app. You can get the idea from the below image.

Here you have to fill the imp information

1. Website with Facebook Login:-
    Site url:-   example (http://www.networkocean.com/fblogin/)
2.App on Facebook
   1. Canvas URL:   (http://www.networkocean.com/fblogin/)
   2. Secure Canvas URL: (https://www.networkocean.com/fblogin/)
Please remember site url will be the url where you want to create facbook login.
Canvas url and secure url will be same just diffrence is secure canvas url will be start from https:/
Each url will be end with /
Click on save and now you app us created. If you see on top you will see a App Id and App Secret. This code will be use when you create you code.
Now we have to move for next step. We have to create a facebook login button.
I have created some file which I will discuss with you. But before starting I want to tell you one important thing is that you have that when you create a login page you have to define the xmlns:fb in you html tag on the starting of the page(example: <html xmlns:fb=”http://www.facebook.com/2008/fbml” xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en” dir=”ltr”>).
Now we will use javascript code to intract with facebook.  I have uses three file to do it.
1. Login page (Where you will give the login buttong)
2. pt.php( This will create your session you logged in user.
3. Index.php (This is your welcome page if you are logged in otherwise you will be redirected to login page.)

 

Please download the source code from: http://networkocean.com/fblogin/fblogin.zip.
For Demo please visit http://networkocean.com/fblogin
Now we will discussed about the code .
1. The first is login.php. when will you open the login.php you will see the script tag that conssite some function like fbinit, login etc.
In fb:init function you have to put the add id which you had created for your website.
FB.init({appId: ‘103918196414225’, status: true, cookie: true, xfbml: true  });
2.
<fb:login-button autologoutlink=”true” perms=”email,user_birthday,status_update,publish_stream” id=”loginBtm”>
        </fb:login-button></div>
This code wll create you login button.

you can just copy the code.  Please check the login function , This function will be called when will you click on facebook login button You will get facebook login window which will ask to you for facebook userid and password. If your facebook will get the valid user this will return the resoponse .

Then I use the jquery ajax function to send the person info to server on pt.php. You can check it to edit the pt.php and uncomment the print_r($_REQUEST) and in login.php in login function print the alert() .

Now this is end of the article. Please leave your reply and sorry for my poor english.

 

Thanks

 

 

Share This Post

Recent Articles

One Response to “How to create facebook login”

  1. Ankit Arora says:

    I must say this blog post really helped me , saved hours of efforts. Keep the good work my friend. Thanks again.!!

Leave a Reply

ERROR: si-captcha.php plugin: GD image support not detected in PHP!

Contact your web host and ask them to enable GD image support for PHP.

ERROR: si-captcha.php plugin: imagepng function not detected in PHP!

Contact your web host and ask them to enable imagepng for PHP.

© 2017 Networkocean. All rights reserved. Site Admin · Entries RSS · Comments RSS
Powered by WordPress · Designed by Theme Junkie