Login with Facebook Account - Code example / live demo ~ Web CodeHelpers

Login with Facebook Account - Code example / live demo

Login using facebook account 

in this article we are going show how to integrate the facebook login module on your website 

Now a day ,  customers are bored to fill the registration form, Every one check for "Login With FB",

Facebook Login will helps to drive lot of users to your website with single sign in

Facebook Login Creation Process :

Step 1:

for fb login process we need appId, check below link to know how to create a facebook app

How to Create a Facebook App 


Javascript Code :

  
 
 
 


for above FB "me" API Response fields is given below :

Property NameDescriptionType
id
The user id
numeric string
link
A link to the user's Timeline
string
first_name
The user's first name
string
quotes
The user's favorite quotes
string
name
The user's full name
string
hometown
The user's hometown
bio
The user's bio
string
religion
The user's religion
string
middle_name
The user's middle name
string
about
About the user
string
is_verified
People with large numbers of followers can have the authenticity of their identity manually verified by Facebook. This field indicates whether the user profile is verified in this way.
bool
gender
The user's gender
string
third_party_id
A string containing an anonymous, but unique identifier for the user. You can use this identifier with third-parties
string
relationship_status
The user's relationship status
string
last_name
The user's last name
string
locale
The user's locale
string
verified
Indicates whether the user account has been verified. This is distinct from the is_verifiedfield. Someone is considered verified if they take any of the following actions:
  • Register for mobile
  • Confirm their account via SMS
  • Enter a valid credit card
bool
political
The user's political views
string
name_format
The user's name formatted to correctly handle Chinese, Japanese, Korean ordering
string
significant_other
The user's significant other
website
The user's website
string
location
The user's current location
username
The user's username
string



for above FB "me/picture" API Response fields is given below :

Fields



ParameterDescriptionType
url
The URL of the profile photo.
string
is_silhouette
Indicates whether the profile photo is the default 'silhouette' picture, or has been replaced.
bool
height
Picture height in pixels. height and width are only returned when specified as modifiers.
int
width
Picture width in pixels.
int

HTML Code :



Author
Bhaskar Vankayala
Sr Software Engineer UI
Hyderabad

6 comments :

  1. Hi,Thanks for your code. But Live Demo is not working.Popup shows blank... :( How to do???

    ReplyDelete
  2. Hi Gayathri , we check it it's working fine , can you please let me know which browser and environment u r checking

    ReplyDelete
  3. this code is not working in my project is there any backend process there to run these code??

    ReplyDelete
  4. Given URL is not allowed by the Application configuration: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.

    ReplyDelete
  5. Given URL is not allowed by the Application configuration: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains



    WHY THIS ERROR SHOW I REPLAYS MY APP ID ALSO..?

    ReplyDelete
  6. Your Live demo is working fine, but i tried it on my machine, i got the same error-
    Given URL is not allowed by the Application configuration: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.

    ReplyDelete

Subscribe updates via Email