Post a Status Update to the Native Facebook App From a Web Link

UPDATE 2/25/2013

As of Facebook’s update last year, it appears that many of the old Facebook URL schemes are no longer working…. So this post looks to be outdated and useless already. :P

The skinny

Copy this code:

1
<a href="fb://publish/profile/me?text=foo">Post to Facebook</a>

Explanation

As you may know, Facebook has a URL scheme

fb://

which seems to be mainly used by native developers. What most folks don’t realize is that it’s just a URL scheme, like http://, and that we can use it within our mobile browsers! The only problem is that there’s no official documentation for it, so folks have had to hunt down the particulars.

After poking around a bit, you might find this topic on Stackoverflow, which contains a ton of protocols for getting to specific sections of the Facebook app, as well as this interesting snippet:

1
<a href="fb://publish/profile/#ID#?text=#BODY#">fb://publish/profile/#ID#?text=#BODY#</a>

Trying that as a link does work, but it takes you to this blank screen:

Facebook app - blank screen

That blank screen isn’t too exciting, but it is peaceful, like a Zen rock garden. Bookmark that page so you can come back later, when you’re overwhelmed by friends flooding your updates screen with baby pictures.

Google to the rescue!

Ok, now back to work!

After poking around and trying to find my Facebook id, I inserted it and got the link to work. But that’s not ideal, since everyone has different user ids. And I’m not about to load in all the bloatware that comes with the Facebook API just to find a user id!

After poking around a bit, I found this link which showed this generic pattern:

1
<a href="fb://publish/profile/me">fb://publish/profile/me</a>

Whoo! And that works! But I still want to prepopulate the status field. We can do that by passing in a URL parameter:

1
<a href="fb://publish/profile/me?text=foo">fb://publish/profile/me?text=foo</a>

Clicking on it will get you to a screen which looks like this:

Facebook status update with share button disabled

This, interestingly enough, appears to be the old implementation of the status screen. Here’s what it looks like if you launch it through the button on the native app:

Facebook status - what it looks like normally

Also note that the Share button is disabled until the user types in text themselves. This might be a little confusing for some users, but it’s probably the best way to prevent spam.

Detecting if the Facebook app is installed

There’s another issue with folks who don’t have the native Facebook app installed. There doesn’t seem to be a perfect way to detect if the link failed and went nowhere. What we have to work with are hacky workarounds involving setTimeout.

It looks like native iOS apps have an ideal URL scheme checking ability with a canOpenURL method. Unfortunately it doesn’t look like the web has this function (yet). Let’s bug Apple to implement it! :)

Just a heads up – I’m definitely not the first one to figure this out, as I found a jsfiddle with the same information, plus an example for posting to Twitter. That was surprisingly the only result! I couldn’t find anyone who blogged about it yet, so here you are!

More URI schemes for other launching other native apps