Handling Facebook Page Tabs on Mobile

Recently there have been quite a few projects come across our way at the office that involve creating Facebook page tab applications. These requests aren’t that new, but what happens now with so many people using their mobile device as the main way to access the Facebook we need to be able to handle these page tabs on the users phones, simple enough, except for the fact that Facebook’s mobile applications/website don’t have a built in solution for page tabs… so how do we get this to work?

The answer is actually surprisingly simple, with PHP anyway. I’m not 100% positive this is the perfect solution, but it’s been working great for me on a number of projects, and we’ve actually built it in to work not only in simple applications, but also have integrated it into WordPress and Drupal installs, for which I am hoping to create some plugins, as getting more code out into the open source community is something I’ve been wanting to do lately.

So how do we do it? Well it involves making use of the fantastic Mobile Detect PHP class, and simple redirects. When the user first attempts to load the page a check is made to see if the user is on a mobile device or tablet, if they are we just load the page as normal. Simple enough.

$detect = new Mobile_Detect;
if ($detect->isTablet() || $detect->isMobile()) {
  // Do nothing
} else if (!isset($_REQUEST['signed_request'])) {
  header('Location: [PAGE TAB URL ON FACEBOOK HERE]');
  exit;
}

If the user is not on a mobile device we check to see if the Facebook “signed request” variable exists. If it is present then we know that the user is visiting the page tab on Facebook, but if it’s not then we can redirect them to the Facebook Page Tab URL where it exists on the site.

This is important because most of these tabs we build involve creating shares on user streams to bring more people to the tab to view the content. With this we can make the “link” variable in the story publish be the absolute URL of where the tab is being hosted from and users will be properly directed to the correct experience based on their device.

Again, I’m not 100% sure this is the “perfect” way to do it, but it’s been working great for me and I have even managed to integrate it with the user management system in WordPress to have user accounts created for added functionality inside of the tabs. I certainly hope this post will help someone, somewhere out there looking to duplicate this functionality.