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

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):

<?php

// Configuration: Define your Variables here

$fb_app_id = "12323413421343";
$fb_vanity_url ="yourpagename";
$fb_tab_content_url ="http://www.yourwebsite.com/your-tab-content.php";

// These variables will define how your link to your page tab looks, when you share it.

$fb_og_title ="Mobile Friendly Facebook Tab Tutorial";
$fb_og_image ="http://www.yourwebsite.com/images/fb-tab-tutorial-image.png";
$fb_og_type = "website";
$fb_og_description ="How to create a mobile friendly Facebook Tab with Like Button";

?>

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
<div style="margin-top:20px;margin-bottom:15px;display:block" class="fb-like" data-href="<?php echo $fb_tab_content_url ?>" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>

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
<button class="pure-button pure-button-share" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'facebook-share-dialog', 'width=430,height=436'); return false;"><i class="fa fa-facebook"></i> 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

<script type="text/javascript">

if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
  document.addEventListener("deviceready", onDeviceReady, false);
} else {
  if (top == self) { top.location = "https://www.facebook.com/<?php echo $fb_vanity_url ?>?v=app_<?php echo $fb_app_id ?>"; }
  ; //this is the browser
  
}

</script>

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!

  • David

    How can find $fb_vanity_url??

    Thx , great tutorial :)

  • Daniel

    Glad you like the tutorial. fb_vanity_url is the part after http://www.facebook.com/ of your facebook page… Mine for example is netbites.de as my page is located at http://www.facebook.com/netbites.de

  • Alex

    Great tutorial

    Is it possible to implement a like gate for
    Mobiles, with this method?

    Regards
    Alex

  • Daniel

    Hi Alex,

    No, unfortunately like-gates are not supported on mobile views in Facebook …

    Cheers, Daniel

  • vishweshshetty

    There is a way where we can make facebook page tab work in very identical way as it does on Desktop, even preserving like gating. It’s quite simple, i have written it down here – http://www.vishweshshetty.com/making-facebook-page-tabs-work-on-mobile-updated/

  • Russell Davies

    Hi

    i’m sure i’m doing something obvious but I can view the content of the tab correctly by going to https://www.fbpages.pw/fb-app/content.php using Facebook on my iphone but it’s not appearing in the tab on our facebook page https://www.facebook.com/lobsterdm/app_518846124884294

    What am i doing wrong?

  • Noémie Isobar

    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?