Facebook has made some significant changes to the layout of Facebook Pages in recent months. The custom landing tabs are gone and all Facebook Pages are now rendered using the new Timeline view. Page owners can add cover photos and they can also highlight important stories by pinning them to the top.
Facebook Pages, by default, include apps for Events, Photos, Videos and Notes. However, if you would like to include custom information on your Facebook Page – maybe a Google Map of your business or YouTube videos or maybe a calendar of events – you need to create an app for that. Let me share a few good examples.
The official Facebook Page for Nokia has a Welcome Tab that highlights some of their recent phones. The Nike page has a Locations Tab that highlights the location of Nokia stores in the country. Apple’s App Store page has a Featured Tab where they have put a list of their top-selling apps and games. The Al Jazeera Page on Facebook has a “Watch Live” Tab where you can watch news right inside Facebook.
Have you ever wondered how do big brands create such interesting Facebook pages? They may have big marketing budgets but do you really need to hire skilled designers or programmers to build such fan pages? Well the answer is obviously no. You can create beautiful custom apps for your Facebook Page without writing a single line of code and all you need are few minutes.

Facebook Apps for Pages, in simple English, are like regular web pages that are embedded inside Facebook using the IFRAME tag. Thus, any object that can be embedded in a HTML web page – like audio MP3s, Google Maps, YouTube videos, presentations, Google Calender, jQuery Carousels, photo slideshows, etc. – can be easily added to your Facebook Pages.
Before we get into the actual process of creating custom tabs (or apps) for Facebook Pages, we need a find a place to host the HTML, CSS, Images, JavaScript and other files associated with our web pages. I prefer using Google Sites to host pages because they are free, you get a WYSIWYG editor to create pages and Google Sites can be integrated with Google Analytics so you more easily track visits to your Facebook pages.
The other big reason is that Google Sites can serve pages over secure (https) and regular (http) connections. This is an extremely important point because a majority of Facebook users may have turned on “secure browsing” in their security settings. If your Facebook app serves content from a regular (http) URL, all these users will see is a warning message and you definitely don’t want this to happen. Google Sites is thus a recommended option.
Enough theory, let’s get our hands dirty and create a custom app for our Facebook Page. If you get stuck, follow this video tutorial.
Step 1: Open Google Sites and create a new site. Choose “Blank Slate” for the theme and, under Site Settings,   set the width as 100% so your content occupies the entire width of the Facebook Canvas. Also disable the Header and Sidebar since we don’t want this stuff to appear on our Facebook Page.
Step 2: Compose a new page in Google Sites and add some content to this page using the built-in WYSIWYG editor. If you are an experienced coder / designer, switch to the HTML view and add HTML code directly to your page. You may insert images, maps, videos, spreadsheets, gadgets, tables and everything else just like a regular HTML page.
Step 3: Open the Facebook Developers page at developers.facebook.com and, if this is your first Facebook App, click “Go to App” to add the Developer app to your Facebook Profile. Next click on the button that says “Create a new App” and give your app a name (you can skip the other fields).

Step 4: Expand the “Page Tab” option under Basic Settings and set the URLs for “Page Tab” and “Secure Page Tab” the same as your URL of your Google Site’s page. The Page Tab URL should point to the http version of the Google Sites page while the Secure Page Tab URL should use the https version.
Step 5: You should also upload a 111×74 pixels thumbnail image with your Page Tab as it will show up in the header of your Facebook Page. Use bigger fonts inside the image for better readability. Save the changes and your Facebook App is now ready.
Step 6: Now we need to add this custom Page Tab to our Facebook Page. That’s easy. Copy the App ID of your Facebook App that you just created and replace XZY in the following URL with that App ID. Open the modified URL in your browser and you should see an option to add the app to your Facebook Pages.
https://www.facebook.com/dialog/pagetab?next=http://facebook.com&app_id=XYZ
That’s it. You can add more apps /tabs to your Facebook Page using the same technique and it is also possible to alter the order of these tabs in the header.
If you ever need to update the content of a Facebook tab, just update the corresponding Google Sites page and your Facebook tab will update automatically because internally, you are just serving the same Google Sites Page to your Facebook Fans.
Here’s a video tutorial that will walk you through all the steps in greater detail. ↓

Google Developer Expert, Google Cloud Champion
Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.
Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory
Digital Inspiration has won several awards since it's launch in 2004.
Google Developer Expert
Google awarded us the Google Developer Expert award recogizing our work in Google Workspace.
ProductHunt Golden Kitty
Our Gmail tool won the Lifehack of the Year award at ProductHunt Golden Kitty Awards in 2017.
Microsoft MVP Alumni
Microsoft awarded us the Most Valuable Professional (MVP) title for 5 years in a row.
Google Cloud Champion
Google awarded us the Champion Innovator title recognizing our technical skill and expertise.
Subscribe to our YouTube channel and get notified whenever we upload a new video tutorial.
We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.
Send personalized email to your contacts with Google Sheets & Gmail
Create pixel perfect documents from Google Sheets and Google Forms
Download emails and attachments from Gmail to your Google Drive
Send email to respondents when they submit your Google Forms
Email entire spreadsheets, selected cell ranges or send dynamic charts on schedule.
Turn your Google Slides presentations into animated GIF images and videos
Sign up for our email newsletter to stay up to date.
We will never send any spam emails. Promise.
© 2004 — 2024 Digital Inspiration® All rights reserved.

source