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

Step 5)

We will now add the cordova-plugin-facebook4 , but we have to add this plugin a bit differently. We have to provide the Facebook App ID and the Facebook app Name Space name while adding the plugin as follows

Here run the command with your own App ID and App Name, Note that the quotation marks (” “) are necessary.

 

Step 6)

Now it’s time to code up our app we will start off by coding the index.html file, here I will create a simple page with just one button which when pressed with send the invite.

Make sure to add reference to  cordova.js and script.js file. The cordova.js file will be injected dynamically at build time so you do not need to place any file named cordova.js you just need to add a reference to it. The script.js file needs to created which will contain our code which we will create next.

Step 7)

We will now wire up the button to handle theclick event. In order to sent the App Invite we will need two things, first the App Link that we created in Facebook and the second is a link to an App Image which will appear when the app invite is sent (Typically the app icon is used).

Note here that the App Image that we will use should be an image that is on the web and must be a valid url.

So we will code the script.js file that we linked to the in the index.html file the following way

And just like that, we are done with our app. Now you have the ability to send Facebook App Invites from your Cordova Apps.

Few Important Points and Tips

Before I conclude this post I want to leave you with some Important Tips and Points that I find note worthy.

When you install the cordova-plugins-facebook4 plugin with your App ID and App Name and for some reason you decide to change your app ID or App Name you should remove the plugin and add the plugin again with the new values, changing them in the config.xml file won’t make any difference.

Lastly, note that the app invite will open up the default Facebook app and use it to send the invites without asking for a login if however, the default app is not present then it will open up a dialog box and  prompt for login and then send the invites.

 

Conclusion

It does take a little bit of configuring when it comes to implementing Facebook App Invites but it’s worth the trouble. You can use Facebook App Invites in a variety of ways one of the most popular way I have seen App Invites being used is offering less Ads or unlocking some feature in your app after the user has Invited some friends.

 

Download Code:


Code Will Be Sent Via Email

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

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: