In this post, I will show you how you can add Facebook App Invites for you Cordova apps. App Invites are a grate way to increase downloads of you apps by giving users a way to share your app with their Facebook friends.
Before we begin I want you to use you own Facebook IDs and keys if you copy mine then it will not work for you as I will be deleting the Facebook app that I will create in this tutorial. Also this tutorial will be for android only but if you wish to do the same for iOS you can follow along and make changes for iOS wherever relevant.
What are app invites?
The facebook documentation has a pretty good definition, “App Invites are a content-rich, personal way for people to invite their Facebook friends to a mobile app.”. In other words you can invite your facebook friends to use an app. But a thing to note here is that App Invites can only be received on a mobile platform. So if you send an app invite to a facebook friend and they are using facebook from their computer they will not receive App Invite notification. Read more about App Invite here.
We will first start off by creating a fresh project, I will be creating it in Cordova. But if you are using another framework such as PhoneGap or Ionic you can create a new project and follow along as well.
cordova create facebookInvite
Now we will need to create a Facebook app. So head over to https://developers.facebook.com/ and create a developer account if you do not have one already.
After logging into the developer Dashboard we will create a new Facebook app by clicking the MyApp button.
Now select the platform in the prompt, I will select Android.
Hit Skip and Create App ID in the next prompt.
In the next prompt fill out the required app details such as Display Name, NameSpace and Category also make sure to note them down as we will need them later.
After clicking Create App ID we will be given our app info with App ID as shown.
Note down the App ID we will need it as well.
Now we will need to activate the app for public use, for that we will need to add a valid email address to our app so go to settings and add the email and click save changes.
Now go to App Review and make the app public.
We have created our Facebook App now we will need add a platform to it, for that again go to settings and click add platform and fill out the details as shown, you will need you own Package Name and Key Hashes (see below for how to get it).
Here the Google Play Package Name is the package name / Widget ID of you app which you can find in config.xml file
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
The Class Name has to be
The Key Hashes are to be generated by you so here is how you can do it,
- Download openSSL form here (Choose what is relevant to your platform).
- Extract the contents of the download in a folder and navigate command prompt in that folder.
- Run the following
keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64
For more on generating Key hash see here.
Now that we have created and configured our Facebook App we are not done yet, there is one more thing that we need to do before we leave Facebook which is creating an App Link, basically an App Link is the link that will point to your app and that is what will be shared in the App Invite.
Here is how we can do this,
- Go to Facebook App Links Hosting here
- Click on Create App Link
- Select you Facebook App from the drop down do not click on Skip Quick Start
- Scroll down to Enter App Data to Build Your App Link section
- Under Android Data > Package Name enter the package name of your app e.g, io.cordova.hellocordova
- click on Next
You will get a link which is something like this
This is the App Link that will be used for invites, we will need this link in the future so make sure you copy it down.
Now we are all done with Facebook.
In the next page we will go ahead and download plugins and code our app.