facebook-1

BLOG

facebook-1

Website Design for Facebook Pages

Today social media is a rapidly growing channel for promoting your business. Facebook dominates this space and provides opportunities through their business pages making a good Facebook page design important. These pages can now display your actual website using iFrame and adds another dimension to your website design challenges.

With Facebook making the switch from FBML to iFrame with a 520 pixels width, the days of coding for yet another version of the website in another markup are over. The new approach means that you can design and build websites as before with HTML, CSS and JavaScript. This is all very good but there is still work to be done in the default markup, HTML.

The Facebook iFrame is not detectable as a device. So, responsive web design is hard to apply in this scenario.

In this case there are two options to display your site on Facebook.

1. Plan your current website design to display a portion of your website with all the essential information visible in the iFrame in the 520 pixels width with scroll bars showing additional sections
2. Create a Facebook compatible microsite having a width of 520 pixels and call that site in the Facebook page iframe by setting the Canvas URL to the microsite main page.
Currently the second option is a better option as it offers more control.

Steps to setup your Facebook tab and display your website using iFrame

1. Create a facebook compatible microsite.
2. Create an iFrame tab for your facebook page.

I. Installing the Facebook Developer Application

Log in to Facebook and then visit the URL http://www.facebook.com/developers

If this is your first time install the Developer Application, you will see the Request for Permission dialog box shown below:

Installing Facebook Developer Application

Click the Allow button to proceed.

II. Creating your iframe application

Now that you have the Developer App installed, click on the Set up New App button.

Creating your iframe application

Give your application a name, click the Agree bubble and then click the Create App button. Give your app a name that is short and descriptive. This name will appear on your list of apps on your developer page.

Enter the security phrase and then click Submit.

III. The “About” tab

You can add a small description for your App here and change the default icon and logo (optional)

The About tab

IV. The “Facebook Integration” Tab

Click on the Facebook Integration tab.

Facebook Integration tab

In the Canvas URL section, enter the URL you wish to call in iFrame

Further down on that tab, enter information about your Tab in the Page Tabs section.

  • The Tab Name is what will appear on the sidebar of your Fan Page.
  • Enter index.php in the Tab URL box.

Click the Save Changes button.

V. Installing your iFrame application on your Fan Page

Click on the Application Profile Page link on the right side of your application page.

Installing iFrame application

Now click the Add to My Page link on the left of your Facebook page.

Find the page that you want to add the Tab to and click the Add to Page button.

Visit your Facebook page and you will have a Tab on your Left with the name provided by you.

Facebook now uses i frame to display your website on your Facebook page. This provides an opportunity to provide your fans with a better experience directly through your regular website. This also poses its own unique design challenges.

The feature complements Facebook and enables you to provide your fans with a complete web experience. It combines the power of Facebook with that of your own website making for a truly interactive as well as informative aspect.

This post is brought to you by Dharne & Company offering Facebook page design and social media marketing in Irvine and the Greater Los Angeles area.

TAGS > , ,

Post a comment

ten + 6 =