You don't see a whole lot of them, custom facebook pages that is. You see them pretty often with the large corporations, but when it comes to small businesses, so many just settle for the plain standard facebook page.
In this article, I will show you how you can create a custom facebook page for your business or organization with no content restrictions in 11 simple steps. What I mean by that is you can use any kind of scripting languages, hook to databases, do basically anything you want.
What you should have before starting:
- Your standard facebook page created.
- A website that you can upload a custom page to.
- Be logged into the admin account for the page.
Before we start, please note that this tutorial does not use Facebook Markup Language or FBML. This tutorial does not make use of an existing application to add "tabs" to your page. This tutorial allows you to create your own facebook application, which results in a custom tab with your icons and your control. This method also enables others to add your custom page to their facebook pages.
Step 1: Go to http://developers.facebook.com/
This is the developers section of facebook that allows you to create a custom applications, which is what we are going to do.
Step 2: Click "Apps" at the top of the window in the main navigation.
Here it may ask you for your password again. Once you've entered your password, you'll land in one of two places. The first place may be a "Request For Permission" from "Developer". If you landed here, be sure to click "Allow". The other place is where you will go after allowing the developer permissions and that is the apps page.
Step 3: In the top right corner, under the search bar, click "+ Create New App".
Once you click this, it will ask you for the name of the app you wish to create and to agree to the terms. Go ahead and fill this out. Once you have completed, you'll end up at the new app's "Basic Info" screen.
Step 4: Add your new app's description, category, icon, logo and contact info.
Completing these sections will complete the basic info for your app. Be sure to click "Save Changes" when you have completed.
Step 5: Click "Web" from the left navigation and lets setup your website settings.
From here, you can add your site URL and site domain. Go ahead and add these, be sure to click "Save Changes" when you have completed.
Step 6: Click "On Facebook" from the left navigation and lets setup the Facebook settings.
From here, you'll be setting your Canvas information and your Page Tabs information.
Step 7: Set the "Canvas" section details.
Now I will only be going over the fields that need to be filled in. If I do not mention the section below, that is because it can stay as it is or is not required.
The "Canvas Page". This is the page that will contain the information to show on your custom app's page. This IS NOT the content that shows on your custom Facebook page. This page is used to promote the custom application you are building.
The "Canvas URL" is an external URL you can set that Facebook will use as the content to promote this custom application. Again, this IS NOT the content that shows on your custom Facebook page. 99% of the time, you will not use this and nobody will see it, so you can set this to your business or organization website or the url for the custom page content.
The "Secure Canvas URL" is where you would put the path to the "Canvas URL" above using "https://". If you do not have an SSL certificate setup on your domain, you'll be required to do so by October 1, 2011.
The "Tab Name", this IS the name of the tab that you want to appear on the left side under your main image. This shows up there with "Wall", "Info", "Photos", etc.
The "Tab URL", this IS the external URL on your website that you wish to use for the content of your custom page. I usually like to create a directory called "Facebook" on my websites and put things in there. So for the custom Facebook page of WDP, I would enter "http://www.WebDeveloperPost.com/Facebook/", this is where I'll upload my content for my custom Facebook page.
The "Secure Tab URL" is where you would put the path to the "Tab URL" above using "https://". If you do not have an SSL certificate setup on your domain, you'll be required to do so by October 1, 2011.
Once you have set these, be sure to click "Save Settings". Again, there are other things here that you can set at your discretion but are not required.
Step 8: Leave the browser where it is and go create your custom page on your website.
Now it is time to create your custom facebook page. Create a new page on your website that corresponds to the path you entered above for "Tab URL". You can put anything you want on this page. The only real requirement you should follow is that everything should fit to 510px wide. If you go any wider than this, you will receive a horizontal scroll bar. Remember, if you use padding on your container, the padding value is added to the width!
Once you have created your custom page and are ready to see it on Facebook, save it and upload it to the path on your website that you entered into the "Tab URL" field.
Step 9: Add the custom Facebook app to your business or organization page.
Go back to your Facebook app settings that you left open earlier. You need to click the link "View App Profile Page" which is located on the left side under "Related Links". When you click this, Facebook will open the page of the custom application you just created.
On that page, click "Add to My Page" which is located in the left side column. It will pop up asking you to select your page. Next to your page, you should see an "Add to Page" button, click this. If the pop up box doesn't automatically close, you can go ahead and close it.
Now, navigate to your business or organization page. Once you're there, you'll see a new link on the left hand side under your main photo with the text that you entered into the "Tab Name" field earlier. When you click that tab, you should see the custom page is now there.
Step 10: Set the custom Facebook page to be your landing page for visitors.
From your business or organization page, click "Wall". Once there, you'll see an "Edit Page" button at the top right, click it. Once that comes up, click "Manage Permissions" from the left hand side. Once there, you'll see a drop down list titled "Default Landing Tab". When you pull that down, you should see your new custom page listed, select it.
Step 11: Share on your website and tell everyone about your new custom Facebook page!
Thats it! You're done! Those of you reading this that are web developers, this makes it very nice and very much impresses your clients when you hook this custom page to their CMS system and allow them to edit their new custom Facebook page from their website CMS.
I hope that everyone has enjoyed this tutorial and that you enjoy your new custom Facebook page. Also, just a little tip for those of you not advanced in web development: Create a flat image that you can simply put to your custom page with an <img src="PathToYourImage" alt="Key Phrase" /> tag.
Oh, one last thing, remember at the beginning how I said this will allow anyone to add your custom page to their facbeook page? Well now all you have to do is send them the url for the custom application and they can add it to their page just as you did! Now your partnering businesses or organizations can promote each others custom facebook pages!
Good Luck!