How to Have a Facebook Login on Your Website and Mobile App
Have a Website or App you want to have Users login via Facebook Login?
If you want to have your audience and users login through your website or Mobile application with their Facebook account, then you can follow these simple steps to use the Facebook Login on your applications and websites.
Table of Contents
- Use Cases
- Decide what User Data to Collect
- How to Setup your Facebook Login App
- Submit Your Facebook Login App for Review and Approval
- Integrate the Facebook Login App into your Website or Mobile App
- Testing
- Conclusion
- Best Practices
Many Publishers and Webmasters desire to know more information (Via Data) by accessing their users Social Facebook data.
When your users login via your website with their Facebook profile (Facebook accounts), you can collect variable data such as demographic and behavioral data. You can also use this social data to retarget users across other integrated and connected channels or social platforms.
Facebook Login is a quick, easy and convenient way for people to create accounts and log into your website via their accounts with other various platforms such as Facebook. Facebook Login requires two scenarios worth consideration when integrating into your website or app. These two scenarios requires authentication and/or asking for user permissions in order to access visitor data. Consider whether you simply need authentication or whether you need to request further permissions for accessing other data available on the users.
Facebook Login Use Cases
Facebook Login can create several positive user experiences to enhance your website or mobile application function or capabilities.
Account Creation
Facebook Login allows people to easily and promptly create an account on your website without having to create a new login and password specific for your site. This simple and convenient experience leads to higher conversions and more registrations. Once someone has created an account on Facebook and registered through your website via their social account login, they can log into your website or stay logged in, as long as their still actively logged in on Facebook.
Personalization
Personalized positive user experiences are often related to higher user retention and return. Facebook Login lets you access information which would be complex or too difficult to collect, store, and manage for your own benefit. The trust and authority from obtaining a users personal profile can give credence to your website or mobile application.
Features
Users’ Real Identity
By having visitors login via their social accounts, you can ensure there is a real user and not a fake user or bot connected to your website and using your services. When obtaining visitor public profile data, you can associate a name and photo to your user along with other real life information. Verifiable identities can lead to higher conversion rates and retention by knowing who is browsing and catering to their needs.
Cross Platform Login for Ease of Use
Due to the sheer amount of people that have Facebook User Accounts; by using the Facebook Login app, users can easily open other websites or apps and automatically connect to accounts on other platforms or devices. This creates a positive experience for users as they don’t need to login with username and password each time they open a website or mobile application.
Integrate with Your Existing Account System
Facebook Login can act as a stand-alone or act as a complement to your current existing account system on the back-end of your website or app. You can give users the choice to create a new account with information you need such as name, email, password; or you can allow them to login via a Social Facebook account to automatically sync that personal data for a user account. When the data between the users account matches from Social accounts and your existing account system, you can automatically add, aggregate and clean your user account data along with processes around using the data.
Granular Permissions
The Facebook Login app supports over 50 user permissions which can be collected and determine should visitors choose to share with your website. Having targeted information can help refine what you actually deem as useful data and users can agree or disagree on whether providing you with that data via Facebook Login.
Users Have Control Over Data They Provide
With Facebook Login App, your users can choose which information they share with your app or website. Even if they feel uncomfortable granting access to certain data, they may still grant permissions due to ease of use. Your app or website can later re-request this data upon explaining to a visitor how that data will benefit them and their user experience.
Scaling Gradual Authorization
Facebook Login allows website and apps the technique to gradual authorization; in which, you can gradually over time, request more and more information from your users instead of all at once in the beginning. This means visitors can quickly login to your website through facebook by providing a few metric details, and as their user experience within your website deepens, you can request addition information to further enhance their website or app experience.
Facebook Login SDKs
Consider using Facebook SDK for Mobile Apps for easy Integration
At Brandets, we are delighted to tell you How to have a Facebook Login on your Website or Mobile App.
1) Choose User Data to Collect
What informational data is useful for your business and users
With over 50 types of permissions you can request from your users via a Facebook Login App, there is an abundant amount of information that you can obtain via social integrations. By leveraging your users Facebook and other social data, you can obtain deep insights to their demographic and behavioral information and use that for re-targeting or redefining your content curation and services on your Website or Mobile Application.
When you ask users for permissions, you are asking for their trust in using their data. You can direct users towards your Privacy Policy and Terms and Conditions when asking for permissions from their Facebook account so that your visitors know how their data will be used. Keep in mind that the more permissions you request and mean a decreased opt-in rate if users are hesitant to provide so much information just to login through your website or app via their social account. This may also depend on the services your website or app is offering visitors or if just a matter of convenience for the users.
It’s important to not only keep in mind user’s privacy, but to also figure out what data is necessary, relevant, and useful to your Business. Your website or app can function using the Facebook Login integration without collecting user data, but what not maximize on the benefits of using the Login App Integration.
Public Profile
With access to your users public Facebook Profile, you will be informed about that visitors data and personal details. These details can consist of name, language, age, gender, country or home, employment details and relationship status.
With even the basic amount of obtainable demographic data, you can create more efficient marketing strategies and communication with your users. Furthermore, you can ask users for permission for much more of their data via the Login available through their Facebook account details,, such as Email and other useful metrics.
When collecting your visitors email addresses via Facebook Login, you can ensure it actually belongs to that user, and that it is an active email account for that user. Collecting an email automatically and dynamically can ensure no mistakes are made and that the data is already pre-scrubbed and verified. You can use this data to build custom audiences and retargeting those users through social advertising or media buying campaigns.
User Likes
The Facebook platform collects a lot of data on users regarding their interests, trends, and preferences. You can ask permission from users for this same data allowing you to gain insights on what users like and where their interests are, in order to provide users a significantly better experience on your own platform. Whether you are providing a service or a product, being able to define and segment your visitors to make unique and proper recommendations or follow ups is a great competitive advantage and optimization technique.
Facebook Groups
Similar to User likes on Facebook Pages, Services, or Posts; Facebook Groups Joined or Membership can show interest and behavioral characteristics and data that can be used for further optimizing.
Friends List
Everyone becomes more warm than cold when you have a recommendation or association with another. With permission to access Users Friends List on Facebook, you can discover new vistiors that are friends of current visitors by association. This data optimizes recommendation algorithms and user product and service suggestion engines.
Tip: By carefully explaining to users how their information is useful to you will increase the chance and rate that users accept permissions so that you have sufficient insight to maximize the benefit of services available to your users.
Knowing what data you need to collect and what information is further beneficial for your website and it’s users, you can then create a Facebook Developers App and start obtaining approval to use the Facebook User Login on your website via Facebook dev panel. Also consider the Authentication details to achieve the integration with the Facebook Login App.
2) How to Set Up a Facebook Login App
After you decide the permissions you will be requesting from your visitors, you’ll need to build out a Facebook application that can accommodate this request, which is not too complicated
To begin, you have to create a Facebook developers account and then click Create App in the top-right corner.
In a Lightbox window that appears, insert and type the name for your app and choose the category that is most appropriate for your website.
Now you have successfully created your Facebook app ID. The next step to creating and integrating a Facebook Login is to click the Get Started button to the right of Facebook Login selection.
Now find and click Settings > Basic in the left sidebar.
Add a link to the privacy policy and the terms of use on your website, and then check your contact email.
Select +Add Platform and select the appropriate platform for your Facebook Login integration. For most people, it will either be Website or iOS / Android.
Then add your Website URL Address. Be sure to type in whether or not you are HTTP vs HTTPS secure (http:// vs https://).
After completing these steps, you can now go to your Settings in the Menu and Publish your App to submit your App for Review.
3) Submit Your Facebook Login App for Review and Approval
App Reviews are procedures in place to evaluate your approval of requesting extra conditions.
Most Facebook apps go through this review process before they are made public. Located in the App Review section of your App Dashboard in the Facebook Dev Panel. You will be prompted to select the appropriate Permissions and Features, and may have to describe and potentially show Facebook how you will use that data.
Here’s how to ask for permission. Go to App Review on your dashboard and click Start a Submission under Submit Items for Approval..
Scroll down and click on the Permission Item you are seeking permission from the user on and click Add Item.
Before you submit for approval, you will be directed to describe to Facebook how you will use the data provided by each permission or feature. If you have set up Test Users to test on these permission features, then include the test login credentials with your submission on Approval.
You can do this under the Edit Notes hyperlink.
Example of describing how you are using the Facebook App ID for Facebook Login.
To deliver all Facebook users a safe, reliable and consistent experience, the App Review helps determine if apps and websites requesting access are building and providing great user experiences.
The Facebook review team will test your app and will provide guidance and feedback to ensure you’re meeting the Facebook Platform Policies.
Apps may ask for these two permissions from any person without having to submit for review by Facebook:
If you want additional or gradual permissions added, then simply repeat this process.
Once you explain all permissions you are requesting from visitors on your website, click Submit for Review. Your app generally will be reviewed in a couple of days to few weeks before potential On-boarding and Approval.
4) Integrate the Facebook Login App on to Your Website or Mobile App
We will walk you through how to integrate the Facebook Login button and integration into your website with these following simple steps.
You can customize the appearance of your Facebook Login button. You can select the language of the button and modify the code appropriately to your liking.
When you’re finished customizing your button, copy the JavaScript SDK code and Integrate the Facebook Login Button Widget into the <body> section of your website code.
Finally, ensure you change any code and add any relevant extra permissions for user_likes, user_relationships, and user_location, etc… and then you’re done! Check the Front-end and back-end of your website or Mobile Application to ensure the Facebook Login is working correctly.
Testing the Facebook Login App
1. New User Facebook Login
- Go to your app and tap on the
Log in with Facebookbutton - Tap OK to accept the read permissions
- Click OK again to accept write permissions if applicable
- Go to app settings and verify that the granted permissions are there
2. User Facebook Login after User previously logging in via a non-Facebook flow with the same email address
- Go to your app and login using your email address
- Log out of your app and tap on the “Log in with Facebook” button
- Tap OK to accept the read permissions (and OK again to accept write permissions where applicable)
- Go to app settings on Facebook and verify that the granted permissions are there
3. Returning User Logs back in with Facebook Login
- Go back to your app and tap on the “Log in with Facebook” button
- Tap OK to accept the read permissions (and OK again to accept write permissions where applicable)
- Uninstall then re-install your app
- Open your app and tap on the “Log in with Facebook” button
- Verify that you can log in without seeing any permission dialogs
4. User cancels Facebook Login and tries to login again
- Go to your app and tap on the “Log in with Facebook” button
- Verify that the read permissions are shown and tap “Cancel”
- Open your app and tap on the “Log in with Facebook” button
- Verify that the read permissions are shown again
5. User removes your app from Facebook via app settings and revisits your website/app. Your app should detect this and prompt the person to log back in from start.
- Go to your app and tap on the “Log in with Facebook” button
- Tap OK to accept the read permissions (and OK again to accept write permissions where applicable)
- Go to app settings on Facebook and remove your app
- Repeat steps 1-2 and verify that Facebook Login works
6. User changes the Facebook password after logging in with Facebook to your Website
In this case, your token will now be invalid and you should notify users that their Facebook session has expired requiring and asking them to log in again.
- Change your Facebook password and select “Log me out of other devices”
- Go to your app and tap on the “Log in with Facebook” button
- Tap OK to accept the read permissions (and OK again to accept write permissions where applicable)
- Go to app settings on Facebook and verify that the granted permissions are there
7. User disabled Facebook platform via app settings and logs in to your app
In this case, you should make sure your app detects the error so that it can notify the users and redirect them to the non-iOS integrated version of Facebook Login.
- Turn off platform for your test user via app settings
- Go to your app and tap on the “Log in with Facebook” button
- Tap OK to accept the read permissions (and OK again to accept write permissions where applicable)
- Verify that platform is now turned on and the app is added to your test user profile with correct privacy
8. User revisits your Facebook Login app when your app token has expired.
Please read the Facebookguide on handling token expiration
9. Testing the Syncing state for syncing status across multiple devices
- Login with Facebook on your app and play your app’s game until you reach a certain level X
- Login with Facebook on a different device via the same or different operating systems, and test that level X remains
Facebook Login Test Users
In your app settings (under “Roles” ), you can create test user accounts to verify your Facebook integration without worrying about spamming the Facebook API.
Conclusion : Facebook Login App Website Integration
The most obvious benefit of using social logins is that it speeds up the registration process. It is a well-known fact that every extra step that a visitor has to take before making a purchase or signing up reduces conversion rates. On websites that use social logins, visitors can get to the end of the line with just a few clicks.
Integrating social logins also pays off because they can help you to get to know your visitors better than you’d be able to with the more traditional solutions.
Of course, if you’d like to fully take advantage of the possibilities that Facebook Login provides, and, for example, personalize your website based on the preferences of your users, you will need to devote more time and resources for the development. But it’s worth the effort, as a deeper understanding of your visitors can help to increase your conversion rates in a meaningful way.
Best Practices for a Facebook Login App Integration
User Experience and User Design (UX/UI) Best Practices
- Immediately Offer Login and Account Creation Capabilities with Ease
- Make sure to make the Facebook Login button design easily seen and identifiable
- Offer alternative Account Creation methods in addition to keeping the option to Facebook Login visible
- Offer visitors an incentive for signing in / creating an account
- Minimize the user login choices being offered
- Help assist users to avoid duplicate multi-channel accounts
- Avoid in-app web views
- Provide users a way to log out
Facebook Login Data Use Best Practices
- Only ask for user permissions you need or are deemed useful
- Provide a context and explain why you are asking for User Permissions
- If you don’t use the Facebook SDKs, often check whether the access token is still valid
- If data access for a visitor has expired, put them through the re-authorization flow process
Technical Practices Best Methods
- Test and Measure Techniques and Results
- Read, Follow, and Abide by the Facebook Platform Policy
- Implement a Data Deletion Callback Option
- Submit your app for App Review if you’re requesting permissions beyond the default metrics
2020 New Best Practices
- Prompt people to log back into your app or website
- Make sure a user access token is always still valid
- Check for revoked permissions
- Provide people with data control and deletion capabilities
source https://brandets.com/data-management/how-to-have-a-facebook-login-on-your-website-and-mobile-app/
Comments
Post a Comment