A Web Design & Marketing Blog

Tags: custom facebook page, customize facebook, customize fan page

Customizing Facebook has always been a drag because of the unified styles they insist on holding. Limited customization is however available. This is why we created MyFanSite application for Facebook. It’s provides an easy interface for web designers to customize a tab on their profile or fan page and give it a little more edge.

So let’s get started.
If you want to add it to your personal profile you must approve the application by visiting http://www.facebook.com/apps/application.php?id=105603572335 and click on ‘Go To Application’ it will require you to login and allow the application to be added. If you want to place it on your fan page click in the top left menu where is says ‘Add To My Page’ then add it to your fan page from the popup box.

Once you approved it then it will bring you to a screen like so:

On this screen we see our details and a bunch of different boxes. The only fields you need to pay attention to are ‘Background’,'Font Color’,'Background Color’,'Stylesheet’, and ‘Content Box’.

Now to customize your page you need to first design a cool custom background. The size is 760px W x 775px H once you have your background design go ahead and upload it. My example background is below:

Ok so we have our background and it’s uploaded lets test it out. The first thing you need to do is edit the application settings to show the tab on your profile or fan page. This is done very easily two ways depending on how your setting it up. Goto ‘Applications->Edit Applications’ from your facebook toolbar if your placing it on your profile or if you are using it on a fan page you will need to click ‘Edit Page’ from your fan site then scroll down to find My Fan Site and click on ‘Application Settings’. Once clicked it will popup a box which will allow you to add the tab to your page. It should look something like below:

I must also mention this page above is also where you will ‘Edit’ the Fan Site as well. Now that we have it approved a tab on your page should appear which says ‘Fan Site’ and the page should load your custom background cool!. Now comes the fun part…More Customization!

So as I mentioned before the Stylesheet box and Content Box being important, are next.

Make sure you DO NOT add <style></style> to the Stylesheet Box it will automatically add them. Let’s start with some simple code place this in your ‘Stylesheet’ Box:

1

#content-box{position:absolute;width:200px;margin-top:343px;margin-left:66px;}

This code above will position our ‘content-box’ 343 pixels from the top of our uploaded design and 66 pixels from the left of it. So if you have certain areas you want to feature text you can do so by positioning them around your background design.

Make sure your css is all one line of code for optimum performance of your fan site. Sometimes I notices issues with link breaks. Now let’s add our content. In the ‘Content Box’ we add the following code:

1

<div id="content-box"><h1>Test Title</h1><p>Testing some content</p></div>

Then click ‘Save Settings’ or ‘Create Fan Site’ if you just added the application. Your settings will be saved and your fan page will be customized with some text positioned over your design. This is however very basic usage of this application and as we grow it into something even more special this tutorial should get you on the right track.

Check out our Facebook Site and Become a Fan: http://www.facebook.com/benzingtech

Related Blogs

• Related Blogs on Customizing Facebook using MyFanSite Tutorial

This entry was posted on Sunday, November 22nd, 2009 at 1:07 am and is filed under Graphic Design, Web Design & Development, Zing Blog. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.