[Tutorial] How to create a mobile facebook page tab – Free Template
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:
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.
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.
<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
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).
Never want to miss another entry?
Join my email list to receive an update whenever I post a new blog-post or have some news to announce!