Deep LinkingHow TosMobile MarketingTechnical

How to use App Links to Deep Link on Facebook

By July 9, 2015 16 Comments

Facebook app links plus branch links

Here at Branch, we exist to make mobile linking easier. Branch Links deliver many different things such as smart redirecting, contextual deep linking, search indexing and download analytics. We think about mobile linking 24 hours a day, 7 days a week, and have found there to be a lot of confusion around how to deep link on Facebook. We hope this guide serves to clear some of that up.

Deep Linking with Facebook App Links 

By the end of this post I’ll answer the following questions:

What do Facebook App Links do?

How do Facebook App Links work?

Why is deep linking important on Facebook?

I’ll also cover the 3 different deep linking features (advertisements, posts, and app invites) along with mini case studies for each. 

Update: For our most recent update on deep linking from Facebook. Check out our blog, How to Deep Link Off of Facebook in 2016.

What is Deep Linking?

In case you’ve been living under a rock, here’s a quick summary of deep linking. It’s been around since the first version of Android and a very early version of iOS, but very few native apps have adopted the technology because it’s so confusing to do so. In short, it’s a way to make links to native mobile apps function in the same way as links to websites. In the web world, when you click on a link to a video on YouTube, you see that video immediately. Deep linking gives every page in the native app a unique link, so that the user can click on a link to access that page in the app immediately. 

What are Facebook App Links?

facebook og tags at work

The most confusing thing about Facebook’s App Links is that they are not actually links. It’s a classic case of a marketing team out of control. If you’re familiar with Open Graph metatags, App Links are basically the same thing with different property labels. (If you want to learn more about App Links, check out our blog on How to Deferred Deep Link with App Links for Facebook Install Ads.)

Here’s an example of the IMDB page for The Rock with OG tags as most of you might know. These OG tags are read in by the Facebook robot when trying to format the link on Facebook with a picture and a title.

– 

And here is the same version with the appropriate App Links tags appended:



 

As you can see, App Links are just some metatags that need to be added to your website. You need to figure out how to host them if you don’t have a site already. When the Facebook robot scrapes these tags to display a formatted post inside one of the native mobile clients, it changes the click behavior of that link with this logic:

1.  If no App Links tags, the mobile website loads 100% of the time.
 
2.  If App Links tags:
a. If IMDB installed on the phone, Facebook will open up IMDB right away
b. If the app is not installed, the mobile website loads 
Facebook app links ios flow

 

That’s all they do: tell Facebook how to open up the app if it’s installed. The worst part about it is that they don’t even work anywhere else. They don’t work on Pinterest, Twitter, Email, SMS.. etc. As a developer you still need to:

1. Build a website to host metatags
2. Support all additional metatags for Google, Pinterest, Twitter, etc
3. Handle the redirection to the App/Play Store if the app is not installed
4. Support deep link routing inside your app, which means you need to:
a. Come up with a deep link schema
b. Support multiple entry paths in the app
c. Load appropriate view on link click 

Why Bother Deep Linking?

Why on earth would you ever want to go through the hassle? It’s so much work to build deep linking into your app, even if you just want to support Facebook. Is it worth it?

 

The short answer is yes. You need deep linking for growth.

 

Consumer studies that show that around 60% of app discovery happens through social recommendation or digital marketing through the main publishers, like Facebook. This work is primarily done through links that are posted to channels like Facebook, which raise awareness and prompt a user to download the app. The problem is that the install is just the beginning of your customer life cycle. Studies show that less than half of people who install your app will ever register to start using it. This is where deep linking can help.

Think of your app like a set of really steep stairs. Users who show up at the foot of the stairs have very little energy to climb those stairs and few people will ever make it to the top. The first step is the install process. Most people will see that step and immediately walk away. Those that make it past will be tired and cranky, so any more steps in their way will only cause more people to turn back. In this analogy, deep linking is like an elevator that appears after the first step, ready to take people where they want to go. Many of the users who would have just turned back after facing the next step, can get aboard the elevator and skip ahead.

basic deep link flow

The experience becomes delightful, and has a dramatic impact on the overall health of the user base. Users that originate from a deep link are twice as likely to register in the app and three times more likely to stick around after 3 days have passed since download. Simply put: deep linking is a must have. 

Branch Simplifies the Process

With so many large tech players trying to create a deep linking standard, they’ve muddled the definition of deep linking and made it difficult for developers to really understand what they’re getting into. Branch was created as a way to dramatically simplify the process, so you’d only ever need to build in one SDK to start deep linking in 100% of the use cases.

For example, if you’re planning on deep linking on iOS, you just need to add in a snippet of code to the AppDelegate that registers your deep link handler.

 – 

The deep link handler is called whenever a user opens your app. Think of this like the elevator. The params dictionary will carry with it the link data, indicating which floor your should take your user to. If there’s no data in the params dictionary, that means the user just opened the app without clicking a link, so you can take them to the home page. It’s as easy as that.

Now, for example, when you want to create a deep link, you just make a call to the SDK and pass in all of the parameters you’d like to store in that link.



 

The service will immediately return an HTTPS url that you can post anywhere. The best part about it is that the link will immediately work on Facebook (and all other channels), because it automatically inserts the appropriate AppLinks metatags for you. You no longer have to spend hours designing your deep linking schema or building out a server to insert AppLinks, Branch Links do it all for you.

It’s pretty awesome. Let’s look at some examples of great Facebook deep linking integrations to get your mental juices flowing. I’ll cover Shared Posts, App Invites, and Advertising. You’ll also understand how it was built using a Branch Link, in case you’d like to implement it yourself.

Shared Posts

Facebook sharing. The most basic and most common but most powerful form of virality there is. An influential shared post has the potential to cause massive adoption of a new service and is an essential feature in any new app. Deep linking makes shared posts much better. Let’s look at an example first:

iHeartRadio is a great app to listen to local radio stations straight from your phone, using data as opposed to radio technology. A lot of users were sharing stations with their friends, but the experience for a new user was poor. Before they implemented Branch, a user would click on a shared station in their news feed, install the app and get presented with a signup screen. This was a giant friction point, causing many users to drop off.

To solve it, they implemented deep linking, so that a user who installed the app after clicking on a link could be taken to the radio station immediately. It significantly improved the number of users who stuck around after install, improving retention and increasing the overall user base.

Here’s how they built it in iOS (the process is very similar in Android). When a user is listening to a station and goes to share, they present the UIActivityViewController like so:

 – 

A few important points to note here. First, the developers embed the station_id into the params dictionary. Additionally, they specify the Branch specific parameters to define the open graph tags ($og_title, $og_description, $og_image_url) of the link. These parameters tell Branch how to display the link once it hits Facebook.

The latter part of this code will immediately launch the share sheet in the iOS app, to let the user choose from an array of options.

native share sheet iheartradioFacebook content sharingFacebook content post

Awesome. Now your app can be shared to start that viral growth. We’re almost done!

The last step is how to handle the user who had just clicked on this link. This is where the deep link handler comes in. We need to configure the elevator to respond to users who came from a radio station link. Above, we embedded the key “station_id” into the link, so we know any user who clicks on that link will pass in the “station_id” via the dictionary of params for the deep link handler. We simply need to add a check for the station identifier.



 

It’s as easy as that.

App Invites

One of the biggest upsets in Facebook developer history happened with Graph 2.0. Effectively, Facebook blocked access to the friend graph so that developers could no longer show a list of friends in a proper format. To balance this, they launched the App Invites feature to allow users to invite their friends. From a functionality perspective, it’s a one to one message that appears in the invitee’s notifications list. Unfortunately, this section of Facebook is typically ignored and can lead to people feeling frustrated when they constantly get invites to play social games.

What’s different than exposing the friend graph? Well, Facebook shows the list of friends in their own view and you can’t can’t access it. This has it positives and negatives. On the positive side, Facebook can list the friends at the top with who the user communicates the most with. On the negative side, you control almost nothing about the invite flow. The styling, messaging, formatting, etc is all left to the whims of the designer.

Let’s talk about an app that does this well. You almost never want to have a plain invite feature without any sort of incentives or justifications behind it. No one will use it. An app called Women’s World Cup launched recently which used Branch deep links to wrap the App Invite feature inside their referral program. They can create a unique Branch link for each user and stick it into the App Invite flow. When a new user installs the app, Branch passes the referring user information into the new user’s app version so that they can track the referrals. The user flow starts with the Facebook App Invites as a button on the screen next to SMS, Email and Twitter and ends with an invite showing inside the notification bar of the invited user.

Facebook Referral LinksFacebook App Invite Friend ListFacebook App Invite Notification

Here’s how they built it.

Launching the invite flow is very simple. They simply to create a Branch link and pop up the invite dialog. While creating the Branch link, they insert the referring user ID. Then, before launching the App Invite dialog, they set the Branch link to be their appLinkURL.

 – 

Branch actually comes with a full referral point tracking system but Women’s World Cup developers had already built their invite flow. Therefore, in the deep link callback, they check if the @”referring_user_id” is present in the params dictionary. If it is, they send a notification to their server that this particular referring user id completed a successful referral. 

Advertising

While Facebook advertising might not be a sustainable strategy for long-term app user acquisition, it certainly has it’s time and place. Up until a few months ago, deep linking was only available for Facebook re-engagement ads (ads which are shown to users who already have your app). A few months ago, Facebook opened up the install ad unit to allow for deep linking as well. This means that you don’t need to advertise for your app anymore, you can literally advertise for a piece of content or a product within your app. You can offer coupons and other things to users who have never heard of you. It’s a powerful feature.

A company that has done this particularly well on the Branch platform is a gift card app called Raise. They allow people to buy, sell, and trade gift cards from the website and app. A tactic that they have found particularly effective is to run a paid advertisement for a particular gift card type, to a demographic that they know to like that gift card. Here’s an example of a Macy’s gift card.

 Facebook App AdsRaise App StoreRaise Deep Link Example

In order to accomplish this, they simply needed to configure their deep link handler to look for a @”coupon_id” similar to the above examples. If this particular key was detected, they would load the view controller for the specific coupon right away.

 – 

Then, they used the Branch dashboard to create the link to be used in the Facebook advertisement. On the marketing page, they can specify which coupon id to embed in the particular linkThen, they simply need to paste the Branch link into the appropriate field while creating the ad. It’s that easy!

Deep Link Facebook Ads

Voila! Now you’re deep linking your ads.

Conclusion

At this point, we’ve reviewed the three major uses of deep linking on Facebook in addition to providing some simple instruction on how to get started. Deep linking is an essential tool that you should bundle into your next update as it can dramatically impact the adoption of your app. It doesn’t take much time but is an investment that will pay dividends of quality users for many years to come.

 

Branch is a mobile linking platform providing unified mobile experiences and measurement for more than 27,000 mobile apps, including Airbnb, Slack, Reddit, Tinder and Amazon. Branch’s free linking platform can help you grow your mobile app through features like deep linking, sharing, referrals, mobile banners and interstitials, custom app onboarding, and unified attribution across platforms and channels. Learn more about Branch.
  • Alex Bauer

    Facebook App Links on iOS are currently broken, but it appears that they are aware of the issue and working on a fix: https://developers.facebook.com/bugs/1640178609532119/

    • AppMent

      Facebook says it’s not going to change.. can you please give us a solution to fix this error asap?

      • Alex Austin

        Hey AppMent – We unfortunately can’t provide a solution for you. It’s up to Facebook to resolve their App Links issues. We’ve been trying to campaign internally over there, to drive change but it seems very low priority to them.

        • Ivan Chirkov

          Facebook fixed App links? My links generated in the Branch and shares on Facebook, do not open my app

          • Alex

            Hey Ivan – Unfortunately, Facebook has still not resolved this. All Branch links are correctly configured with App Links so as soon as they fix this issue, they’ll start working. You can confirm the Facebook App Links configuration by pasting your link in here: https://developers.facebook.com/tools/debug/og/object/

  • Nick Longinow

    I like that Shared Posts example, for sharing posts to FB. But, I dont want people to have to go through the intermediate step of scrolling through the action sheet to find the FB icon. Is there a way the branch logic can just go straight to triggering the FB share dialog?

    • Derrick

      Nick, you can go straight to the SLComposeViewController for Facebook. Here’s on relevant StackOverflow answer but I’m sure there are others: http://stackoverflow.com/questions/12503287/tutorial-for-slcomposeviewcontroller-sharing

      • Nick Longinow

        Thanks for the quick reply. I’d assume I would still setup the same itemProvider in that case, as in the basic tutorial? i.e., so I get the benefit of Branch and not just FB’s vanilla share?

        NSString *feature = @”invite”;

        NSMutableDictionary *params = [[NSMutableDictionary alloc] init];

        [params setObject:@”1452″ forKey:@”station_id”];

        [params setObject:@”https://s3-us-west-1.amazonaws.com/myapp/radiostation.jpg” forKey:@”$og_image_url”];

        [params setObject:@”Check out my favorite station on iHeartRadio” forKey:@”$og_description”];

        [params setObject:@”Wild 94.9″ forKey:@”$og_title”];

        UIActivityItemProvider *itemProvider = [Branch getBranchActivityItemWithParams:params andFeature:feature];

        • Derrick

          Yep that sounds like a good strategy. Feel free to shoot us a note at support@branch.io if you have other questions. We don’t check the comments here as often as we check that address.

  • Nick Longinow

    one more question. I like that Shared Posts example. But does it give them an option (wondering if I even want one…) to not open it in the app, but open it on some web page?

    • Alex

      Sorry Nick – I just saw this message. Since Facebook broke deep linking out of their app on iOS, it’s no longer possible to open up the app directly unfortunately. For the best user experience, we’ve decided to route users straight to the App/Play Store by default. If you want to configure the link to go to your web page, you can insert ‘$fallback_url’ into the deep link data with value of your web URL. We describe it here: https://dev.branch.io/getting-started/configuring-links/guide/#link-control-parameters. Happy linking!

  • sanju

    but i want when people click on use app button in my facebook page..he directly go to google play store.. for this what should i put in deep link option to click n directly go to play store and to be install

    • Alex

      Hey Sanju – On Android, if you configured your Branch settings (https://dashboard.branch.io/settings/link) with the address of your Google Play page, it should work out of the box once you put that link behind the ‘Use App’ button. Can you describe what’s happening? Also, feel free to share a link and I can help debug.

  • Claudio

    Hi, could you send me this code for Swift ? I made my app, and it works with te URL schemes, but when I use with Facebook link (FBI.me/33333?a=1&b=3:3 parameters for example) the app just opens without show my especific controller.

    Claudio Menezes
    cjsm_menezes@yahoo.com.br

    Thank you

    • Alex Bauer

      Hey @disqus_Sxz6DfYEoH:disqus,

      This is article is out of date: unfortunately Facebook has now stopped supporting App Links on the iOS platform, so the approach to opening your app from links on Facebook has changed. Check out this updated post for more details!

  • Pingback: force use facebook app | 不分享空間()