How To Create Custom Facebook Page With Google Sites? - 5 Steps!

Facebook custom tab is very effective application of facebook developers to integrate more fans, followers into our facebook fan pages. Facebook released custom page tab service so we can add our different stories, photos, videos, slides etc. stuffs within our custom page. Some big brands of world already served their custom tab page to attract more people on internet i.e Coca Cola(already exceeded 79M likes) have custom tab of FIFA World Cup Trophy Tour of 2014 photos, Nokia has a Welcome Tab that highlights some of their recent phones, Apple’s App Store page has a Featured Tab where they have put a list of their top-selling apps and games.

So like these big brands we're the regular facebook users can also create custom tab for our facebook pages. To make such kind of highly developed pages you need to hire skilled designers or programmers? Well this answer is not true always if you want to create a regular HTML website it's too little required your CSS and basic HTML skill. The following guide will help you to create a regular html webpage and how to embed it to facebook fan page as custom tab page with the support of Page Tab app of Facebook Developers.

Live Demo

Building Custom Tabs (Apps) for Facebook Pages

Facebook Developers provide apps for different projects to work on Website, iOS, Android, Windows app, Page Tab, Xbox, Playstation, and App on Facebook. Including all these apps Page Tab works to embed custom page to facebook fan page. Facebook custom tab is just like a regular web pages that are embedded inside Facebook using the IFRAME tag. In facebook custom tab page you can add different rich media content 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 add our pages to facebook fan page(with Page Tab app) we need to create a website page with HTML and CSS also need a hosting space and domain provider. Make sure your domain provider provides both http:// and secured domain https:// of domain format because Facebook works with secured domain https://

If you don't have hosting space also secured domain provider then here is a solution of Google Sites, which can serve pages over secure (https) and regular (http) connections. I also prefer using Google Sites to host pages because they are totally free, and you get a WYSIWYG editor to create pages and Google Sites can be integrated with Google Analytics so you can easily track visits to your Facebook pages.

We have got theory enough, now go to our main work to create custom app for our facebook page with 5 consecutive processes.

#1 Create a Site on Google Sites

1. Go to Google Sites
2. Give a Name of your site and choose a unique URL
3. Select the theme of your site "Blank Slate"
4. Provide Captcha and hit Create

#2 Create a Custom Page on Google Sites

1. Compose a new page in Google Sites and add some content to this page using the built-in WYSIWYG editor.
2. Click on More Actions menu bar → Edit site layout

3. Disable Sidebar, Header, Navigation menu, Footer and expand the page upto 100%
4. Now close the page and it's done
5. Again click on More Actions menu → Page Settings
6. Uncheck all the four options under Page Settings → Hit Save

If you are an experienced coder or designer, switch to the HTML view and add HTML code directly to your page. Google sites provides tons of free widgets to make your site dynamic. You may insert images, maps, videos, spreadsheets, gadgets, tables and everything else just like a regular HTML page.

To see an example page of Google sites, visit this link

#3 Create Facebook App

1. Open the Facebook Developers page at developers.facebook.com
2. If you have already created facebook app Id then click on Apps → Create a new app
3. Now give your app a name → Skip other fields → Create app
4. Provide Captcha → You're on your app account dashboard

#4 Add Google Sites Page on Facebook Page Tab

1. From the left navigation menu click on Settings
2. Now that page click on +Add platform
3. Now choose Page Tab

On the page tab setting do following:

• Page Tab Name: Give a name about your page content. This name which will appear on your facebook tab page
• Page Tab URL: The URL of Google sites page you created earlier but the URL will start with http:// format
• Secure Page Tab URL: Now add the same URL with https:// format
• Upload Image: Upload a (111 x 74)px size image

4. Finally save setting and this part is done!

#5 Embed Custom Tab To Facebook Fan Page

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.

Need A Custom Template?

If you have hosting space also secured domain provider and want to create custom webpage, then you can use our page style which includes facebook comments and you need a little bit edit that source code.

Use the following link to download our custom made facebook custom tab template

Facebook Custom Template

Need More Help?

If you need any help regarding this tutorial in any single point you didn't understand and couldn't execute the tutorial properly, then don't forget to ask me. Feel free to consult anything, we feel proud to handle any user's problem. 

Wish you all happy blogging...