Creating custom Facebook tabs using Grid system

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
November 7, 2010

Your Facebook fan pages can be made more attractive by adding customized items to them like custom tabs, site feeds, embedded videos and more. Customizing your Facebook pages by adding useful content can keep the visitors to your page indulged for a longer time. 520grid can help in creating custom FBML pages for instance the Welcome tabs seen on many Facebook pages.

520 Grid System is actually not a template but framework. In other words, 520Grid is a set of predefined HTML/CSS snippets that may significantly speed up the creating of static FBML pages. To design Facebook pages with 520 Grid system, you’ll need to play around with some HTML and CSS.

Design Static FBML Facebook pages in Grid System

Download the 520Grid files to kick off. You’ll need photoshop installed on your system. Open the grid.psd file from the design folder and design your page using guidelines that helps to create the content that fits into the widths of grid cells. Now change the grid.html file to make page layout using predefined divs with CSS classes for example grid1, grid2, grid3 and so on. Next you’ll need to input your content to the HTML file. You can do this either with some text editor or applications like Dreamweaver. Edit the CSS to tune up your design.

When you’re done editing the HTML code and CSS, copy all the code from file and headover to your Facebook page. Open Edit Page > Applications > Static FBML > Add Application > Go to Application and paste prepared code Click on Save Changes button.

Now in your Application page, find FBML app and click Edit settings to add it on a tab. After this, your FBML page is viewable on one of the tabs on your Facebook Page.

With 520grid, you can create a website like layout, viewable on a tab on your Facebook page.

You may also like...