After six months of work, Grabble Words launched this week – hooray!
But – I’ve just discovered it contains an important bug – inviting Facebook friends to install the app doesn’t work – boo…
It all stemmed from a misunderstanding of the Facebook docs:
App Link URL: App Link for what should be opened when the recipient clicks on the install/play button on the app invite page.
I understood that this should be the URL for the app in the App Store, and assumed that as the App wasn’t yet active on the App Store, it would work as soon as it launched. Turns out the plot is thicker… (I have found there’s often some ambiguity in Facebook docs whether App is referring to iOS App or Facebook App – I will try to be clear about this distinction in this post.)
I have found tutorials on this topic thin on the ground, so here goes:
1. Set up a Facebook App Page.
To invite Facebook friends to install your iOS App, you’ll first need a Facebook App Page. Go to https://developers.facebook.com, create an app and make it public. Be sure to fill out the App Details tab, including Promotional Images. These images will display when inviting a friend to install your iOS App.
2. Set up a custom URL Scheme.
A what now?
Adding a custom URL Scheme to your app is like setting up a URL that will instruct your app to open. Why do we need this? Well if a user receives and clicks on an invitation to install your app, and they already have the app installed, the Facebook invitation should just open up the app directly.
It’s actually pretty easy, you just need to add a couple of items to your info.plist file:
- In the first item of your URL types property, add an identifier for your app(variously called URL identifier, CFBundleURLName) using a reverse DNS style, eg. I’ve called mine com.interactivecoconut.grabblewords.
- Within the same item, add an array called URL Schemes(or CFBundleURLSchemes), and within that, add an item with whatever word you wish to associate with your app. I’ve used the word grabble.
Here’s what that looks like in the plist file (Note the blue line is the Facebook app id which is also included for connecting to facebook)
Open the info.plist file as source code to get a look at the underlying XML:
Now we’ve set up a custom URL Scheme, build your app on your device. Done! Now, any time this URL Scheme is navigated to – from another app, or even from Safari, your app will open. Try it out – go to Safari and type the following into the URL field: (or the equivalent for the name you assigned to your app)
grabble://
You should find that after selecting return, your app opens! Custom URL Scheme set up. You can use this to pass parameters for deep linking within your app, but we don’t need this for setting up Facebook app invitations.
3. Create an App Link
Now we can set up our App Link, which is not the App Store link to your app! If I had have read on in the Facebook App Invites documentation I would have read a clearer definition of what an App Link is in this context:
The App Links protocol is a cross-platform, open-source protocol for simple mobile deep-linking.
The easiest way to set this up is using the Facebook App Link Quickstart tool.
- Select your app. (If you don’t see your app, you’ll need to first add your app to the Facebook Developers page)
- Select iOS
- Ignore Modify an existing App Link URL?
- Create an App Link Name just for yourself.
- Select iOS for a Universal App, and iPhone or iPad if your app has different settings for different devices.
- Under URL with custom scheme, you want custom URL scheme you set up earlier. Here I put: grabble://
- App Name: Straightforward!
- App Store ID: This was filled in automatically when you chose your app.
- Website Data URL – the easiest web page to add here is your Facebook App Page.
Select Next and Quickstart tool should present you with your App Link! Record this link to use later.
4. Write the code!
Ok, now comes the more familiar stuff – code!
Make your View Controller implement the Facebook App Invite Dialog delegate and add in delegate methods to receive completion handlers:
extension ViewController:FBSDKAppInviteDialogDelegate {
//MARK: FBSDKAppInviteDialogDelegate
func appInviteDialog(appInviteDialog: FBSDKAppInviteDialog!, didCompleteWithResults results: [NSObject : AnyObject]!) {
print("invitation made")
}
func appInviteDialog(appInviteDialog: FBSDKAppInviteDialog!, didFailWithError error: NSError!) {
print("error made")
}
}
Great! Now you can request the invitation – you’ll probably want to put it in an IBAction to respond to a button tap for example:
@IBAction func tapInviteFriends(sender: AnyObject) {
let content = FBSDKAppInviteContent()
content.appLinkURL = NSURL(string: "https://fb.me/979111111111111")
FBSDKAppInviteDialog.showFromViewController(self, withContent: content, delegate: self)
}
Too easy! Now when you tap your invitation button, you should see something like:
Stop press: The new version of Grabble Words is here now – try out inviting your friends, and enjoy! App Store link here.
iOS development with Swift - book: https://manning.com/books/ios-development-with-swift video course: https://www.manning.com/livevideo/ios-development-with-swift-lv
Before I forget... 
Hi ,
I have apply this code same as given but my friend to whom i send app invitation to install app, is not coming.
Would you please guide me what i am doing wrong.
I’d love to help but it’s so hard to answer the question ‘why doesn’t it work!’
It would require a full diagnosis of what you’ve set up, or missed. Have you checked you’ve followed all the steps?
Hi,
Thanks for posting this, and I agree the amount of tutorials and support on this whole Facebook friend invite thing is quite (especially on Swift). One question though: Is the invite sent our to ALL friends or only on selected friends?
Thanks
Hi Khanh, glad the tutorial came in useful for you. So the next screen after the invitation screen I included, gives the user a friend list where they can choose which of their friends to send the invitation to.
Hey Craig,
Thanks so much for posting this!
I’ve gone through the tutorial, and generated my app link (which I’ve tested, as per the quick start guide, by posting it in a secret group and clicking it through my phone).
However, I call FBSDKInviteDialog, when I try to go through and select a few friends to invite, it keeps throwing me an error about a “Missing App Link URL”, and informs me that “The app link used with this invite does not contain an Android or iOS URL”, despite me already loading my working url into the content.appLinkURL variable.
Would you have any idea why this is happening? I’ve tried searching online for a fix for hours, and any help would be very much appreciated. Thanks so much! 🙂
Charles
Sorry Charles, I just saw this msg. Strange problem! Did you sort it out?
hi Craig,
have also a question… I managed everything .. here it comes.. except the image, where can I place that image in the Facebook app ? I don’t find any place where I can upload this “preview image” .. mine is only grey.. the app icon shows..
can you help me and tell me, where I can upload it in the Facebook app ?
thanks a lot
Peter
Hi Peter, you need to fill out the App Center Details tab for your app in https://developers.facebook.com, including Promotional Images. These images will display when inviting a friend to install your iOS App.
Hi there! Great tutorial!
I just want to clarify one thing… How to customize FBSDKAppInviteDialog?
For instance – I want a tableview controller to show my FB friends list, with UISwitch against each one to check friends, and of course search bar… All this needs to have my own design, instead of using page from WebView. Then I would like to click Send and send invite to friends that I’ve checked
I am wondering at how to:
– grab friends from Facebook to tableView with names and images;
– send invite to defined friends with simple pressing button, against showing FBSDKAppInviteDialog.
Thanks for watching me! =)
Sorry Дмитрий, I believe it’s not possible to customize the FBSDKAppInviteDialog, Facebook manages this. What you can do is get a list of friends but since the new version of the Facebook SDK you can only get those friends who are playing the app already. (and of course you can do what you like with that list of users, put them in a table view or whatever). However from memory I believe there was a loop hole – you can get a list of ALL Facebook friends if you have a web based version of your app.
Thanks for reply!
I found out custom FBSDKAppInviteDialog in Chatous app. Here you can see what it looks like -> http://i65.tinypic.com/29v0ahi.jpg
Is it was build by the same algorithm, we talked about in above section? What do you think?
BTW I also find a way to access a list of non-app-using friends:
let params = [“fields”: “id, first_name, last_name, middle_name, name, email, picture”]
let request = FBSDKGraphRequest(graphPath: “me/taggable_friends”, parameters: params)
request.startWithCompletionHandler { (connection : FBSDKGraphRequestConnection!, result : AnyObject!, error : NSError!) -> Void in
if error != nil {
let errorMessage = error.localizedDescription
}
else if result.isKindOfClass(NSDictionary){
/* Handle response */
}
}
However I am still getting not a full list of friends, only 25 of it.
Interesting, looks like you may have found another loophole. I haven’t played with Facebook framework in a while, I’m going to have to try this out, and get back to you.
Hi, I want to thank you for you good tutorial.
I have a problem, when I click on the button, my cellphone opens the browser, then i have to log in on my FB account, so i get the next message: “The page you requested was not found. You may have clicked an expired link or mistyped the address”
I have been following all of your steps but I always get the same problem.
This is my code
class UserInviteFriendsViewController: UIViewController, FBSDKAppInviteDialogDelegate {
@IBOutlet weak var btnInviteFacebook: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
}
func appInviteDialog(appInviteDialog: FBSDKAppInviteDialog!, didFailWithError error: NSError!) {
print(“error made”)
}
func appInviteDialog(appInviteDialog: FBSDKAppInviteDialog!, didCompleteWithResults results: [NSObject : AnyObject]!) {
print(“invitation made”)
}
@IBAction func inviteFacebook(sender: UIButton) {
let content = FBSDKAppInviteContent()
content.appLinkURL = NSURL(string: “https://fb.me/6268xxx541xxxxx”)
FBSDKAppInviteDialog.showFromViewController(self, withContent: content, delegate: self)
}
Thanks for your help
That’s a tough one Envivo, sorry I don’t know why that would be happening, if you’ve followed all the steps, including the URL scheme, app link etc. Have you made any progress with it?
thanks for the tutorial. The Url stuff helped a lot. Just one question, What I have now is a modal WebView opening up where the user has to log in every single time. Is this typical? I really don’t like this since the user already logs in to the app with the Facebook Login button, seems kinda weird to make them log in again and again every time they want to invite? thanks for any help.
Yes, unfortunately as the invitation is done via Safari, this process is separate to whether your app has logged in to Facebook or not. I agree it’s weird, but it’s how it is. If the user has logged into Facebook in Safari, they shouldn’t have to log in via the app though.