March 30, 2012 at 16:59Guide to creating Facebook Welcome Page and other custom tabs
Facebook is the largest social network and one of the most visited sites in the world. In it you can not only post funny statuses and like photos, but also
use it as a powerful marketing tool. Everything is logical - a billion users, the ability to target a specific audience, instant announcements, well, and a
host of other useful things that are not available offline. Today it is difficult to find a company without its own business page or a popular person without a fan page. In this article I will try
to analyze in detail the technical side of this issue from the front-end development side.
This post will not focus on creating the page itself, because this is a rather trivial procedure, but on custom tabs that you can add yourself and fill with the necessary content.
Anyone, even a novice web developer, can make dozens of such tabs in one evening, knowing some of the principles and nuances of their creation.
I mean the vast majority of all kinds of welcome pages, announcement pages, and pages with all kinds of informational textual and graphic content. More complicated pages with dynamic elements, forms and other functionalities will take time, of course, more.
The first thing to clarify is that we work with the product page, and not with the personal profile - it will not be possible to add a tab with your content to the personal profile.
Thus, you can add your own tab only on the product page (brand, company, group, etc.). If such a page does not exist, you should create it by clicking on the following link:
www.facebook.com/pages/create.php
There is nothing complicated in creating such a page, so I’ll skip this step. Moreover, if the client asks to customize the page, then most often he already has it.
Actually, to the point.
There are two main ways to make a custom tab: either by creating your own application using the tools of the fb developer, or by using a third-party application. Choosing a method should be based on TK and the time allocated for development. The pros and cons of each of the methods will be discussed below, the conclusions on this subject are at the end.
It is understood that the html content is already compiled and uploaded to the public ftp server.
Working with Facebook development tools starts on the following page:
developers.facebook.com/apps
On it you can see the created applications that are linked to the current account.
Here we are primarily interested in the " + Create New App " button.
However, if this is your first time entering developers.facebook.com, you will likely need to take a few additional steps:
developer should be allowed to access your basic information and confirm password, and account verification is also required .
You can do this either by sending to your mobile SMS number with a confirmation code, or by entering a bank card number. SMS usually comes within one minute.
Immediately after clicking “Create New App”, a window appears asking you to enter the name of your future application and agree with the policy of the fb platform: the
App Namespace field can be left blank (needed for full-fledged facebook applications using Open-Graph and canvas pages) . After continuing, you will need to enter captcha.
After the submit, we see the main settings of our application. Here you can download the icon, set a name, select an application category and set other basic settings. However, all these manipulations can be postponed for the future and return to them later. At the bottom of the page, you should choose the method by which our application will be integrated into Facebook.
Our goal is our own custom tab, so choose the “Page Tab” accordingly .
In the first field we indicate the name of the tab , in the next two - direct links to our layout or dynamic content, previously uploaded to the ftp of the public server.
However, the first nuance will be waiting for you here - SSL protection has been a mandatory requirement of Facebook since October 2011, therefore it is imperative that the url you need is accessible via the https protocol.
By clicking the “Save Changes” button we get a ready-made working tab. If desired, you can open the advanced section, and conduct more fine-tuning the application.
Now we proceed directly to adding the created application to the page we need.
The main advantage of your own application is the control of many of its parameters . By going to the application properties, you can fine-tune them. Previously, its additional advantage over solutions from third-party applications was the ability to set its own tab icon, but with the advent of timeline the design of the tabs has changed, and now setting a personalized image of the tab does not present a problem.
The disadvantages include a longer creation time compared to the second method, as well as the complexity of creating the so-called fan-gate . You most likely saw such a bunch of times on different pages - when it is suggested to click Like in order to see some hidden content.
At the moment, there are a huge number of free applications that allow you to add a custom tab to your page and configure it. It is enough to enter the query “static html” in the
Facebook search bar and you can see the most popular applications in the results: FBML applications can be omitted , since Facebook abandoned fbml in favor of html iframes.
Consider the most popular Static HTML application : iframe tabs . The number of active users speaks for itself.
By clicking on “Go to App” we get to the page of the application itself, which looks like this:
On it click “Add Static HTML to a Page”and select the page on which we want to add a tab:
After the manipulations on the left side of our page, among other tabs, a new tab “Welcome” will appear. A distinctive feature of the Static HTML application is the white star icon on a gray background.
Tabs in the old version:
Tabs in Timeline:
Let's move on to setting up the tab directly. First, let's change its name. In the old version of Facebook pages, for this it was necessary to go to the list of all already installed applications. This was done by clicking "Edit Page" on the first three default tabs (Get Started, Wall, Info).
In Timeline, page owners above the main content see the admin panel :
From it, you should go into the edit mode of the page properties:
Next, select the application we need and click "Edit Settings" . In the pop-up that appears, we can either change its name or delete this tab.
Changing the name of the tab will move on to its content. To do this, just select it in the general list of tabs. If the user is logged in with an administrator account, he will see a settings page. Everyone else choosing this tab will see its content directly.
The Static HTML application has fan-gate support and this is one of its main advantages.
You can fill in the content field with either html / css code or specify a direct link using an iframe.
To view the result, click on preview. In the preview window, we can select the content that we want to see - either public or accessible only to those who like the page.
Once the main drawback of this application was the inability to change the icon. However, at the end of 2011, the developers added this feature, and with the advent of the Timeline interface, this was no longer necessary - in the new mode it is no longer difficult for users to set their own image.
When you click on the "magic *" button, you can see several nice goodies, in particular the ability to configure google analytics and force hide the scrollbar.
Also, one of the most popular applications is the “Static Iframe Tab”
It is added to the page in a manner analogous to the previous application. However, the static iframe tab has a wider range of tab content settings. Already when adding to the page, the
user sees a small wizard, where you can immediately add an image for the profile, fill in the "About" field and set a unique name for the link to your page
Pluses of this option:
Minuses:
Pluses of this option:
Minuses:
Summarizing, we can say that the option of connecting a third-party application is easier to configure and significantly outperforms the creation time of your own application. An additional fat plus will be the simplicity of creating fan gates.
Of the minuses, one can note the difficulty of changing the standard application icon, links to the websites of the creators of this application in many of them, as well as the dependence on these developers themselves and their servers. Despite the fact that the same Static HTML iframe tabs has tens of millions of users, it happened that this application stopped working for some time due to problems on their servers. However, few people are confused, as a result of which Static HTML can be seen on pages that have a huge number of subscribers, and quite often they don’t even bother about changing the standard application icon to their own.
Some examples of popular pages where custom tabs are actively used:
Old version:
As you can see, these pages have not yet switched to the new interface of the Chronicle (Timeline), which will be forcibly introduced on March 30.
New Timeline:
Material prepared with derSmoll
use it as a powerful marketing tool. Everything is logical - a billion users, the ability to target a specific audience, instant announcements, well, and a
host of other useful things that are not available offline. Today it is difficult to find a company without its own business page or a popular person without a fan page. In this article I will try
to analyze in detail the technical side of this issue from the front-end development side.
This post will not focus on creating the page itself, because this is a rather trivial procedure, but on custom tabs that you can add yourself and fill with the necessary content.
Anyone, even a novice web developer, can make dozens of such tabs in one evening, knowing some of the principles and nuances of their creation.
I mean the vast majority of all kinds of welcome pages, announcement pages, and pages with all kinds of informational textual and graphic content. More complicated pages with dynamic elements, forms and other functionalities will take time, of course, more.
The first thing to clarify is that we work with the product page, and not with the personal profile - it will not be possible to add a tab with your content to the personal profile.
Thus, you can add your own tab only on the product page (brand, company, group, etc.). If such a page does not exist, you should create it by clicking on the following link:
www.facebook.com/pages/create.php
There is nothing complicated in creating such a page, so I’ll skip this step. Moreover, if the client asks to customize the page, then most often he already has it.
Actually, to the point.
Create custom tabs
Table of contents:
- 1. Account preparation
- 2. Method number one: create your application using development tools
- 3. Method number two: add a tab using third-party applications
- 4. Installing and Configuring Static HTML Application: iframe tabs
- 5. Installing and Configuring the Static Iframe Tab Application
- 6. The main steps in creating a tab. Option 1 - create your own application
- 7. Basic steps to create. Option 2 - Third-Party Applications
- 8. Useful sizes
There are two main ways to make a custom tab: either by creating your own application using the tools of the fb developer, or by using a third-party application. Choosing a method should be based on TK and the time allocated for development. The pros and cons of each of the methods will be discussed below, the conclusions on this subject are at the end.
It is understood that the html content is already compiled and uploaded to the public ftp server.
Account Preparation
Working with Facebook development tools starts on the following page:
developers.facebook.com/apps
On it you can see the created applications that are linked to the current account.
Here we are primarily interested in the " + Create New App " button.
However, if this is your first time entering developers.facebook.com, you will likely need to take a few additional steps:
developer should be allowed to access your basic information and confirm password, and account verification is also required .
You can do this either by sending to your mobile SMS number with a confirmation code, or by entering a bank card number. SMS usually comes within one minute.
Method number one: create your application using development tools
Immediately after clicking “Create New App”, a window appears asking you to enter the name of your future application and agree with the policy of the fb platform: the
App Namespace field can be left blank (needed for full-fledged facebook applications using Open-Graph and canvas pages) . After continuing, you will need to enter captcha.
After the submit, we see the main settings of our application. Here you can download the icon, set a name, select an application category and set other basic settings. However, all these manipulations can be postponed for the future and return to them later. At the bottom of the page, you should choose the method by which our application will be integrated into Facebook.
Our goal is our own custom tab, so choose the “Page Tab” accordingly .
In the first field we indicate the name of the tab , in the next two - direct links to our layout or dynamic content, previously uploaded to the ftp of the public server.
However, the first nuance will be waiting for you here - SSL protection has been a mandatory requirement of Facebook since October 2011, therefore it is imperative that the url you need is accessible via the https protocol.
By clicking the “Save Changes” button we get a ready-made working tab. If desired, you can open the advanced section, and conduct more fine-tuning the application.
Now we proceed directly to adding the created application to the page we need.
How to add App / Custom Tab to Facebook page
- We go to developers.facebook.com/apps/ and select the application we need. Here, the App ID / API Key field is of interest :
- In the browser, we form the following URL:
www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
where instead of YOUR_APP_ID we substitute your App ID , and instead of YOUR_URL we indicate a link to the page specified in the application settings in the “Page Tab Url” field - Hit enter and in the window that appears, select the page on which we want to add a tab:
- We click on the “Add Page Tab” and if everything happened successfully, we find ourselves on the page specified in YOUR_URL. Returning to the product page www.facebook.com/pages/your_url you can see the tab we added at the very bottom of the list of existing tabs. By clicking "EDIT" under them, you can change the position of our tab. However, raising it above “Wall” and “Info” will not work (relevant until the introduction of timeline) .
The main advantage of your own application is the control of many of its parameters . By going to the application properties, you can fine-tune them. Previously, its additional advantage over solutions from third-party applications was the ability to set its own tab icon, but with the advent of timeline the design of the tabs has changed, and now setting a personalized image of the tab does not present a problem.
The disadvantages include a longer creation time compared to the second method, as well as the complexity of creating the so-called fan-gate . You most likely saw such a bunch of times on different pages - when it is suggested to click Like in order to see some hidden content.
Method number two - add a tab using third-party applications
At the moment, there are a huge number of free applications that allow you to add a custom tab to your page and configure it. It is enough to enter the query “static html” in the
Facebook search bar and you can see the most popular applications in the results: FBML applications can be omitted , since Facebook abandoned fbml in favor of html iframes.
Consider the most popular Static HTML application : iframe tabs . The number of active users speaks for itself.
By clicking on “Go to App” we get to the page of the application itself, which looks like this:
On it click “Add Static HTML to a Page”and select the page on which we want to add a tab:
After the manipulations on the left side of our page, among other tabs, a new tab “Welcome” will appear. A distinctive feature of the Static HTML application is the white star icon on a gray background.
Tabs in the old version:
Tabs in Timeline:
Let's move on to setting up the tab directly. First, let's change its name. In the old version of Facebook pages, for this it was necessary to go to the list of all already installed applications. This was done by clicking "Edit Page" on the first three default tabs (Get Started, Wall, Info).
In Timeline, page owners above the main content see the admin panel :
From it, you should go into the edit mode of the page properties:
Next, select the application we need and click "Edit Settings" . In the pop-up that appears, we can either change its name or delete this tab.
Changing the name of the tab will move on to its content. To do this, just select it in the general list of tabs. If the user is logged in with an administrator account, he will see a settings page. Everyone else choosing this tab will see its content directly.
The Static HTML application has fan-gate support and this is one of its main advantages.
You can fill in the content field with either html / css code or specify a direct link using an iframe.
To view the result, click on preview. In the preview window, we can select the content that we want to see - either public or accessible only to those who like the page.
Once the main drawback of this application was the inability to change the icon. However, at the end of 2011, the developers added this feature, and with the advent of the Timeline interface, this was no longer necessary - in the new mode it is no longer difficult for users to set their own image.
When you click on the "magic *" button, you can see several nice goodies, in particular the ability to configure google analytics and force hide the scrollbar.
Also, one of the most popular applications is the “Static Iframe Tab”
It is added to the page in a manner analogous to the previous application. However, the static iframe tab has a wider range of tab content settings. Already when adding to the page, the
user sees a small wizard, where you can immediately add an image for the profile, fill in the "About" field and set a unique name for the link to your page
Summing up the above. Brief squeeze
Basic steps to create. Option 1 - create your own application
- Analysis of design for complexity, dynamic content, custom icons, forms, etc.
- Layout of static content.
- Uploading files to an external server.
- Make sure that the files are accessible via https (SSL protection has been a mandatory requirement on Facebook since October 2011).
- Creating a Facebook application, in the settings of which a link to the finished layout is indicated.
- Adding this application to the product page as a tab.
- Change the name of the tab.
- Profit!
Pluses of this option:
- full control of the application and its personalization (privacy settings, icon change, multilingualism, etc.);
- lack of possible links to third-party applications, increased security;
- stability of operation depends only on the server on which the layout is located.
Minuses:
- difficulty setting up “Fan-Gate”;
- creating your application a little longer than connecting a third-party;
- the need to use SSL.
Basic steps to create. Option 2 - Third-Party Applications
- Steps 1-2 of the first option (analyze, typeset).
- Choosing the most suitable application.
- Installing the application on the product page.
- Setting up the application (specifying a link to the layout, the name of the tab, setting “fan-gate” if necessary)
- Profit!
Pluses of this option:
- relatively high speed of obtaining the desired result;
- ease of setting up “fan-gate” and similar content access options;
- usually easy configuration and editing of content even for the client;
- no https access required.
Minuses:
- links to the website of the application developer and all kinds of inscriptions like “powered by ...”;
- there is no certainty about the stable operation of both the application and its server, and that it will not stop working with the next global Facebook update. For example, like this:
Summarizing, we can say that the option of connecting a third-party application is easier to configure and significantly outperforms the creation time of your own application. An additional fat plus will be the simplicity of creating fan gates.
Of the minuses, one can note the difficulty of changing the standard application icon, links to the websites of the creators of this application in many of them, as well as the dependence on these developers themselves and their servers. Despite the fact that the same Static HTML iframe tabs has tens of millions of users, it happened that this application stopped working for some time due to problems on their servers. However, few people are confused, as a result of which Static HTML can be seen on pages that have a huge number of subscribers, and quite often they don’t even bother about changing the standard application icon to their own.
Some examples of popular pages where custom tabs are actively used:
Old version:
As you can see, these pages have not yet switched to the new interface of the Chronicle (Timeline), which will be forcibly introduced on March 30.
New Timeline:
Useful sizes
- Profile picture for profile / brand : Width: 180px, Height: 540px
- Provided area for iframe with custom html content :
max-width: 520px (old version), 810px (timeline), height is unlimited - Avatar (picture next to links and posts when you click the like or share button):
Width: 90px, Height: 90px - Maximum image size for upload : Width: 2048px, Height: 2048px
- Maximum visible image size for viewing in an album or slide show : Width: 960px, Height: 720px
- Image in ad : Width: 110px, Height: 80px, Height: 5MB
- Ad text : Headline: 25 characters, Body: 135 characters
- Status update : Length: 63,206 characters
- Cover for Timeline : Width: 851px, Height: 315px
- Comment:: no length limit
- Video : Size: 1024, Time: 20 minutes
Material prepared with derSmoll