[Tutorial] How to create a mobile facebook page tab – Free Template

by Daniel Setzermann
How to create a mobile facebook tab tutorial

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:

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

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:

How to create a Facebook Tab that works on Mobile Phones

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

Comments

  1. Noémie Isobar says

    Great tutorial, thanks!

    But when we share the URL where the content is located, that URL doesn’t work on desktop… What can we do about that?

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">