How to Show Custom Tab Rather Than Wall Posts on Facebook Fan Page

8f

Facebook Fan Page of Dell

[ad id=’7′ style=’float:left;margin:10px 10px 10px 0′]Facebook is way ahead of Google+ in terms of business branding, as there is an option to create pages on social networking giant. You can create a fan page for your company or brand or website and share updates, contest details to enhance your reach. By default a fan page shows Wall posts as the landing tab of the page, but what if you want to show an advertisement about the new product that your company is planning to launch soon Or you want to showcase a giant picture about the current giveaway running on your website.

In that case, people were used to install a Facebook app named Static FBML to showcase some other custom page created by you. But back in March-April, Facebook discontinued the support for Static FBML and only allows IFRAME insertion. Here I will show you how to have a branding page as default landing tab on Facebook Fan Page rather than the default tabs available on Facebook.

Benefit of using IFRAME on Facebook Fan Page

#1 HTML or PHP file will be stored on your server. You can make changes as per requirement and those changes will be reflected on fan page ASAP

#2 Same IFRAME App can be used for more than one Facebook Fan Page

#3 Insert whatever HTML code you want and show different contents to those who already liked you fan page and those who didn’t like that yet

Create App and Install on Fan Page

Now its time to create a simple Facebook app with IFRAME URL as a webpage stored on your server.

#1 – Login to Facebook and then open Facebook Developer page. We are going to create a new app on that page. Click on “Create New App” button available on the page.

5f

#2 – Enter a name for the new app that you are going to create

4f

#3 – Verify the CAPTCHA to proceed

3f

#4 – On left side menu, click on Facebook and then navigate to the bottom of the page. There you will find “Page Tab” section. You need to enter the name of the tab, IFRAME URL, Secure Tab URL. Enter the URL of the index.php or index.html that you are going to iframe on the Facebook fan page. Secure Tab URL is the HTTPS URL to use when user is using the secured version of Facebook. That means if user has opened HTTPS version of Facebook, if your IFRAME page is not on secured domain with SSL certificate, then Facebook will open the default Wall post rather than the static HTML page (iframe).

2f

1f

Now you have created the IFRAME app, its time to install the same on Facebook Fan Page. To install the app, you need to click on “View app profile page” link available on bottom-left of the create app page. Here is the screenshot of the same.

6f

On the app profile page, you can see a link named “Add to my page” on bottom-left. Click on that and select the facebook fan page on which you want to install the app. Once selected, the app will install on the page.

Now its time to FTP the index.php or index.html page on server (on the same location mentioned in the create app page). You can download the facebook.php and index.php file from this link (zip file). Download the file and extract that using WinZip or WinRar or 7Zip. You need to enter the APP_ID and APP_Secret in the index.php file. Find the piece of code as below and paste these details in that. App ID and App Secret is available on the create app page of the app that you just created.

$app_id = “APP_ID_HERE”;

$app_secret = “APP_SECRET_HERE”;

Save changes and FTP these two files to your server on the same location mentioned in the create app page. For my app, it was http://www.clickonf5.org/facebook/myapp/ .

Now you can open the facebook fan page where you installed the app that you just created. On fan page, you can see a new link in the left menu named as the tab name that you had provided in the app. Click on that to see the index.php as iframed on the fan page.

The index.php that you downloaded above will show you following things.

  • Page ID
  • Page Admin
  • Like Status
  • Country
  • Language

Based on these things, you can actually serve different piece of code. For example, if the facebook user has already liked your page, you can show him tutorials, giveaway participation page link, discussion etc. You just need to use the IF condition in the code to do the same.

To make the newly created tab as default landing tab, click on “Edit Page” link on the fan page. Under “Manage Permission” tab, you can see a drop down as “Default Landing Tab”. Select the tab that you created using App. Save changes to show the new tab as default landing tab on the fan page. Now whenever a user will come to fan page, the new tab will be shown.

Sanjeev Mishra is a professional blogger and an Internet Marketing Consultant based in India. He has built the Internet Techies to provide you updates in technology and web application area.
  • Great tip… thanks, Sanjeev. Knowing how to send visitors to my custom landing page rather than the generic FB wall is a nice option. Your instructions made it so easy to do!