Learn to Build a WordPress Welcome Tab for FREE

The last several weeks has seen Facebook business pages under going major “facelift” with the addition of  the new Timeline.  With this it means your old way of customizing page tabs  has changed.  Because they let you create a much richer user experience on Facebook and control the content that your followers see when they visit your page these tabs are important for your social media marketing.  Tabs now exist under your cover photo, in a photo strip which can be expanded by clicking on the blue arrow on the far right.

So, how exactly do you create your own custom Facebook tabs?  Turns out it’s not as difficult as you might think!  You can learn to build a WordPress welcome Tab for free for your Facebook page.

Side Note:  If you only want to display an external webpage as one of your tabs, this can be done with any one of the following iframe applications:

Years, ago (well it seems that long, LOL)  the iframe app, replaced static FBML tabs on our facebook pages.  An iframe, basically it is a standard HTML tag that enables a HTML document to be inserted into another HTML page. The benefit of iframes over FBML is that it accepts a wide range of web coding (Javascript, CSS etc) that the static FBML tab did not accept which allows for creation of more dynamic content.  But the most exciting thing is, you can even import your custom made web page to be included in your fan page!

Since no more NEW static fbml applications can be added to our managed pages, it’s important to know exactly how to work from creating the app to adding it to your facebook page successfully.

How to Create and Add Custom iFrame Tab to Facebook Page

Here’s what happens:

[Your html Page] ——->    the iframe app   ———>    [Your Facebook Custom Tab]

Firstly, you need to prepare a html page to be inserted into your facebook page.  There are dozens and dozens of ways to create your html page, such as using Dreamweaver  for the job and uploading the html file to your web server so it can be pulled into your fan page later.   Or, we can do this the easy way with less complication via a wordpress plugin named Facebook Tab Manager.   You might be asking why do I want to use this plugin.  Well it allows to the ability to use your WordPress  WYSIWYG editor to create the page.  This page is then saved and stored on your WordPress site. 

[note color=”##FFFBCC”]Note: The 3.2 release of Facebook Tab Manager for WordPress adds support for the Timeline for Pages 810-pixel-wide tab layout introduced at the beginning of March 2012. There is now a Tab Layout dropdown menu under options. For existing tabs, it defaults to the 520-pixel layout. For new tabs, it defaults to 810 pixels. Facebook Tab Manager sets this width on the HTML tag for your tab content to prevent it from overflowing the width of the iFrame that contains it and causing scroll bars to appear. When you set the parameters for your app in Facebook, you must also specify the 810-pixel width there.[/note]

Step 1.  Add Facebook Tab Manager Plugin to your WordPress Blog.  Take some time to review over the setting of this plugin to be more familiar with it’s setting.

Step 2.  In order to create a custom Page Tab for your Facebook Timeline Page, you need to first create a Facebook application.  

First, go to the Facebook Developers app page. If this is the first time you’ve installed the Developer Application, you will see the Request for Permission dialog.  After the Developer App is installed, it’s time to create your Page Tab App.  Click on the “+ Create New App” button in the upper-right corner:

In the pop-up dialog, enter the name of your App (the green text indicates if it’s valid or not, right next to the box):

After clicking “Continue”, you’ll be presented with the “Security Check” characters. Enter them and click “OK”.  Once past the Security Check, you’re presented with the Basic Settings for your Page Tab App, and this is the only screen where you need to do anything.

Below the name of your App, you’ll see the “App ID.” This value will be required when you’re setting up your Page Tab to integrate with Facebook’s Open Graph, most commonly for the Social Plugins, as well as loading the JavaScript SDK and preventing scrollbars on your tab. Besides the “App Display Name”, the only other value you need to enter in this section is your email address.

Next integrate your App as a “Page Tab”.  Under “Select how your app integrates with Facebook”, you want to click on “Page Tab”:

 Step 3.  Now we need to switch over to your, Tab Plugin, to get the  information you will need to complete the Page Tab Values.

From your WordPress Dashboard, goto the Facebook Tab menu option, select Add New,

 

 This will open the page editor, enter a page new for your new Tab.  Enter your content.  When you are done you then select “publish”, once the page saves, it will open addition options below the editor.  Here is where you will enter the Facebook App Id number, and save.

 

Step 4.  You will see there is several URL’s displayed, this is the information you will need to enter in your facebook app.

Page Tab Values Definitions:  

  1. Page Tab Name: This is the name that will display below the Page Tab Image (aka “Custom Tab Image”) on your Page;
    Page Tab URL: This is the full URL to your Page Tab’s index page. It can end in .php, .html, or .htm, and it doesn’t have to be named “index”;
  2. Secure Page Tab URL: This is the same URL but using HTTPS. A secure URL is now required for Facebook Page Tabs. This means you must host your Page Tab’s index page, and all files referenced in it (images, stylesheets, JavaScripts), on a domain that has an SSL Security Certificate. 
  3. Page Tab Edit URL: Not applicable here;
  4. Page Tab Image: This is the image that will represent your Page Tab below your Cover Photo. Make sure your Page Tab Image’s dimensions are 111 x 74px. To upload your Page Tab Image (aka “Custom Tab Image”), click the “Change” link (circled above). You can change this at any time via your Page admin area;
  5. Page Tab Width: Even thu the narrow(510 px) is displayed you will want to select “Wide (810px)” — this is the width for Timeline for Pages custom tabs.

 Step 5.  Once you’ve filled in the above options, click the “Save Changes” button, and you’re done!  Now all that’s left to do is to add your Page Tab App to your Facebook Page.

To add your new Page Tab App to your Page, you’ll need to enter this URL in your browser:

http://www.facebook.com/dialog/pagetab?app_id=YOUR-APP-ID&next=http://www.facebook.com

You should now see the following screen shot, where you cab select your page from the pull down menu, and select “add page tab”.

 Still with us, LOL!  We’re almost there 😀

Now goto your Facebook page and look under the cover pic, where you have the photo strip of your apps, select the down arrow, and you will see your app there!  When you select it it will open up your newly created welcome tab.

 

There you have it, Your very own Custom Tab, that you can edit with WordPress.  

 


 

Page Resources:
For more information on iframe apps visit, HyperArts

Facebook Tab Plugin