Daniel Setzermann

Update: This article has not been updated for a long time! The code might still work but I can’t guarantee it or help anymore. Today I would not recommend to use facebook page tabs anymore, Facebook will probably stop supporting them in the near future.

In this article I want to show you how to create a mobile facebook page tab. I’ll also include a like and share button and will be responsive, but first things first: You’ll need to register an app in the facebook developer area. I already showed this in a previous post, head over there and complete steps 2 – 4 if you haven’t created your app and don’t know what I’m talking about.

So, you have your app ready and just need the correct code to create some content that will display on mobile. I created a template that you can download and use. I will explain the parts in this post.

Download the template:

Download

The PHP Header (Configuration):

Just fill all the given variables accordingly. I explained every one shortly in the code of the template that you can download above. $fb_tab_content_url should be filled with the location of your iframe content. Be aware that the server that you use, has to support a secure connection (https)

The variables starting with $fb_og … define how your link to your page tab looks, when you share it on your wall.

The Content

Further down in the template you’ll find a intro to the content area (<! – Your Content starts here …) This is where you’ll edit your content. I used the grid-layout from purecss.io to ensure a responsive layout. In the template you’ll also find a like button and share button.

Like Button

At data-href I use the variables that we defined above but you could also just manually input the URL you want to use. If you want use a different style of the button check out the documentation of the button.

The Share Button

 share 

I use a button from purecss.io as a clickable element. You can of course use every other item, image or text. The correct markup for the share-action is documented here.

The code to make the facebook tab mobile compatible

This code looks for the user agent of the browser and displays the page tab accordingly. If we’re in a desktop browser the user will be redirected to your tab, if not, we will stay on the shared url (which is displayed in the in-app-browser)

Sharing your tab!

This is really important! When you share your page tab, you’ll share the URL where your content is located, not the page tab URL. You’ll just use the URL like e.g. http://www.yourwebsite.com/facebook/facebook-tab.php. Because we filled in the open graph data in the configuration of the template, the info will display a very nice preview:

Have fun with the template and drop me a line in the comments if you liked it or have questions!

Buy me a beer: If you’ll use this download, I’d appreciate a small token of appreciation to keep this blog up and running (and keep it clean of ads).