How to make your tabs mobile, instantly (and how we built the tech)

Last week we enabled mobile friendly tabs, so I figure it’s about time to write something about how to use it. :)

[Note: if you don’t have one, you can instantly install a tab for your Facebook page here.]

The way it works is that if you share your tab with a special url, we can then route your visitors to either the mobile version of the tab, or the regular desktop version inside Facebook. if you open one of your tabs you’ll see that special url front and center:

mobile-shareable-url

 

All you need to do is use that url in links from your website, in a pinned status update, in Facebook or Adwords ads, or anywhere else that you use to direct traffic to your tab. Users who follow that link will be able to see your top on mobile.

It’s that easy!

Aaaaaand…. fangating works, too! We’re really proud of the fact that we were able to figure out a way to bring full fangating functionality to mobile devices. And it’s free, too. Any tab built with our software automatically gets a shareable url.

Why we’re making it free

Mobile support isn’t a feature to put on a checklist, it’s a fundamental necessity. We’re really passionate (like, really really passionate) about building software that works. It’s the whole point of our company.

If we’re gonna give away free Facebook tabs (and we’ve given away over two million of them), we’re gonna make sure they work. Period.

 

Perfectly real, not staged at all photos

After these semi-faked photos (the tab is real, the pretty hardware is from http://placeit.breezi.com/), we’ll explain how this works behind the scenes.

tab-on-iphone tab-on-desktop tab-on-ipad

 

Behind the scenes

There are three pieces of technology behind this: building the magic url, routing visitors to the proper format, and building a mobile wrapper for tabs.

URL

We do a little bit of magic to generate that special url. First, we query the Facebook API to get the full url of your page. Then we can use the application id for the tab to construct the the full url of your specific tab. But that isn’t enough, because Facebook instantly routes any mobile device directly to your page’s Timeline. So we have to add a little something to the end of the url (a cute little “?ref=s”) that makes mobile devices load the desktop version, that shows your tab.

Okay, we’re closer — but have you ever used desktop Facebook on a phone? Not fun.

Server routing

We can do better. The instant Facebook sends a request to our servers to load your tab, we detect if the visitor is using a mobile device. If they are, we send a little piece of code that causes just the tab to load. No desktop Facebook surrounding it.

Now we’re a lot closer. But not quite there yet — at this point, we have only the contents of your tab. Nothing related to the page. And if we stopped here, there would be no fangating on mobile. Bummer, eh?

Mobile wrapper

So we built what we wish Facebook already had — a simple wrapper for tabs that includes some clever stuff with additional iframe, and using the Facebook API for the like button to construct a simple wrapper for your tab that is mobile friendly.

So when the mobile user goes to your tab, they will see the full Facebook desktop version briefly while the tab is loading, but then they will be instantly redirected to the mobile friendly version.

So there you go. A perfectly free, functional fan gated tab that is supported on any mobile device. Easy for you, and, well, not exactly trivial for us, but we’re happy to do it. :) Let’s hope that sometime soon Facebook builds in support for mobile tabs, so we don’t have to do all this nonsense…

Cheers,

Jason – cofounder

Comments

comments