Facebook Website Log In
Add Facebook Login to your Ionic 3 App — The Step-by-Step Guide
In this article, I’ll show you how to easily implement the Facebook Login API into your beautiful Ionic 3 app in just a few steps and lines of code. This guide is beginners friendly, it means that everyone who has some basic programming knowledge should be able to understand and replicate it.
Before starting, I assume you already have Ionic 3 installed on your computer. If it’s not the case, you just need to follow this official tutorial on how to set-up your environment.
1. Creating the Ionic 3 App
The very first step of this tutorial will be to create a basic Ionic 3 appwhere we can later implement the Facebook SDK and a login button. This part is done using the terminal to type some command lines — but if you are a Windows user, you can skip this part (1) and use Visual Studio Comminity instead which already contains all the tools to get you started.
We will create blank app so we are not distracted by a menu or a tab. To do this, just execute this command :
Related Posts:
Then, execute this one to see if everything is correctly set up :
ionic cordova serve
It should automatically launch your browser with a page representing your app.
To finish with this part, just open your newly created project in your favorite code editor. I personally use Visual Studio Code which is easy-to-use and works perfectly with Ionic.
2. Creating the Facebook App
Integrating Facebook Login requires the creation of an app on the Facebook developers platform.
Open the Facebook developers website and click on “My Apps” > “Add a New App” on the top right dropdown menu. Once it is created, you will be redirected to your new app page.
Now we need to add the platforms we want to use with the Facebook SDK. Click on the “Settings” menu link and “Add Platform”. Pick iOs or/and Android and paste your “Bundle ID” (for iOs) or “Google Play Package Name” for Android. This information can be found / edited at Line 2 in the “config.xml” file of your Ionic project; in my case :
<widget id="com.axelhardy.fbtutorial" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
Finally, just click on the “Dashboard” menu link and copy your App Name and App ID. We will need these infos for the step 3.
3. Integrating the Facebook SDK into your Ionic App
Ionic makes it easy to install plugins with just a few commands. Make sure you are still in your Ionic app directory and execute this one :
Add Facebook Login to your Ionic 3 App — The Step-by-Step Guide
In this article, I’ll show you how to easily implement the Facebook Login API into your beautiful Ionic 3 app in just a few steps and lines of code. This guide is beginners friendly, it means that everyone who has some basic programming knowledge should be able to understand and replicate it.
Before starting, I assume you already have Ionic 3 installed on your computer. If it’s not the case, you just need to follow this official tutorial on how to set-up your environment.
1. Creating the Ionic 3 App
The very first step of this tutorial will be to create a basic Ionic 3 appwhere we can later implement the Facebook SDK and a login button. This part is done using the terminal to type some command lines — but if you are a Windows user, you can skip this part (1) and use Visual Studio Comminity instead which already contains all the tools to get you started.
We will create blank app so we are not distracted by a menu or a tab. To do this, just execute this command :
Related Posts:
- Facebook Website Log In
- Facebook Registration Form Application
- What Does Outgoing Mean On Facebook
- Icon Face
- How To Completely Erase a Facebook Account ...
- Edit Name On Facebook
- Facebook Real Name Verification
- New Version Facebook Lite Download
- How To Search Photos On Facebook
- What Is The Meaning Of Facebook
- My Facebook Code Number
Then, execute this one to see if everything is correctly set up :
ionic cordova serve
It should automatically launch your browser with a page representing your app.
To finish with this part, just open your newly created project in your favorite code editor. I personally use Visual Studio Code which is easy-to-use and works perfectly with Ionic.
2. Creating the Facebook App
Integrating Facebook Login requires the creation of an app on the Facebook developers platform.
Open the Facebook developers website and click on “My Apps” > “Add a New App” on the top right dropdown menu. Once it is created, you will be redirected to your new app page.
Now we need to add the platforms we want to use with the Facebook SDK. Click on the “Settings” menu link and “Add Platform”. Pick iOs or/and Android and paste your “Bundle ID” (for iOs) or “Google Play Package Name” for Android. This information can be found / edited at Line 2 in the “config.xml” file of your Ionic project; in my case :
<widget id="com.axelhardy.fbtutorial" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
Finally, just click on the “Dashboard” menu link and copy your App Name and App ID. We will need these infos for the step 3.
3. Integrating the Facebook SDK into your Ionic App
Ionic makes it easy to install plugins with just a few commands. Make sure you are still in your Ionic app directory and execute this one :