Adding Facebook App Invite For Cordova and Phonegap Apps

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

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.

Step 1)

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.

 

Step 2)

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.

cordova facebook app invite image 1

 

Now select the platform in the prompt, I will select Android.

 

 cordova facebook app invite image 2

 

Hit Skip and Create App ID in the next prompt.

 cordova facebook app invite image 3

 

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.

cordova facebook app invite image 4

 

After clicking Create App ID we will be given our app info with App ID as shown.

cordova facebook app invite image 5

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.

cordova facebook app invite image 6

 

Now go to App Review and make the app public.

cordova facebook app invite image 7

 

Step 3)

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).

cordova facebook app invite image 8

Here the Google Play Package Name is the package name / Widget ID of you app which you can find in config.xml file

The Class Name has to be com.facebook.LoginActivity

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
You will be promoted for a password enter a password, and hit enter then a Key Hash will be generated for you. Copy and paste the Key and click save changes.

cordova facebook app invite image 9

For more on generating Key hash see here.

 

Step 4)

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 https://fb.me/123456789012345

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.

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

  • Awesome!! Thanks

  • In the app link , Can I add app link of Google or app store?

    • So far as i have seen and tried the direct links to apps i.e, URL links to apps on playstore/Itunes do not work..You have to add App links hosted on Facebook as shown

    • So far as i have read and tried the app Link has to be hosted via facebook..a direct URL to you app on the playstore/iTunes does not work.

  • dianikol

    Everything works great!!

    Just a question.Not about this tutorial but using this plugin when i try to login it supposed that it will open the facebook app I have installed on my device, The dialog window opens instead. Any advise about that?

    Thanks again!

    • i did test this on android 4.4 and it worked fine..I am not sure as to why this is happening for you. One reason i can think of is that you might be using the latest android version that may have locked down the app access OR you might have default app set to open the browser when ever a facebook link is clicked.

      Hope it helps.

      -Regards

  • MisterDev

    Thanks, nice tutorial!

    I’ve installed cordova-plugin-facebook4 but on a browser says “facebookConnectPlugin is not defined”, am I missing something?

    I can see a facebook-browser.js file so I suppose this plugin supports browsers too.
    https://github.com/jeduan/cordova-plugin-facebook4/blob/master/www/facebook-browser.js

    Thanks in advance!

    • no sadly the plugins will not work in the browser..the js file that you saw will simply bridge the gap between the JavaScript we write and the native code…

      It will work in the device as you already confirmed.

      -Regards

  • Marjorie Figueroa

    Hi! I’ve installed the plugin but I’m getting the following error “TypeError: facebookConnectPlugin.appInvite is not a function”
    The object facebookConnectPlugin does not have anything called appInvite and I cannot find why

    • This error usually occurs when you are trying to use a plugin before the “deviceready()” event has fired…in the example above notice that the facebook plugin is used inside the onDeviceReady method which has be bound to the “deviceready()” event using the addEventListener

      Hope this helps

      -Regards

      • Marjorie Figueroa

        thanks for your response. I’m using the facebook plugin inside the device ready event but getting the same error 🙁 I’m printing the content of the facebookConnectPlugin

        • Thanks for writing in I actually made a mistake in the code..you need to add in the index.html file before the script.js .

          It is working for me now..The code in the post has been updated as well.

          As far as the .appInvite method is concern it is available under the facebookConnectPlugin see docs here https://www.npmjs.com/package/cordova-plugin-facebook4#app-invites

          Do let me know if that was the issue.

          • Marjorie Figueroa

            Thanks for your help. But I haven’t been able to make it work yet.

  • Juan Cabra Zarama

    Hi, thanks for the tutorial, but i have a problem, the facebook app opens and let me to select my friends, after i sent the invites i can see success on the inspector console, the problem is that no one of my friends recieved the invite on their phones. If you can help me ill be very grateful.

  • Should that still working? Android app has to be published in Google PlayStore to work properly or without that (during testing) should be fine too?

  • Matus del K

    Hi, great tutorial. But there’s one thing you should mention for people like me, who didn’t read FB docs for this feature: “App Invites notifications will only show up in the recipient’s Facebook notifications on mobile platforms, not on desktop web.”. Thank you

  • Peter Eshowoeblim

    This tutorial was really helpful, thanks a lot. From the article above i picked this line “but if you dig deep you will find that the success callback returns the number of users the App Invites has been sent to”. Please if you don’t mind, can I get a clue how to go about this. I mean my success callback returns an object like this: “{‘didComplete’: 1}” all the time even when I invite more than 1 friend. Thanks.

  • Priyanka Sadh

    facebookConnectPlugin.appInvite()
    In the above function call back can we know the email of next person (Friend) to whom we sent invite ?

%d bloggers like this: