Update! There are some more features you CAN use for your Facebook FMBL Tabs. To the extent that you can have galleries, and a full micro-site. For an example visit www.facebook.com/wearyourbaby!
I will be writing about this soon and sharing the code needed!
Happy FB’ing!
~ Beth the IMVA
Hi guys! Work on my blog is underway, so I’m going to keep this post short and sweet. It’s not an elaborate tutorial on how to do this. Then again maybe just how you should tackle it.
Assuming you are aware of the way you design layouts in CSS, a week ago I knew the theory but lacked practice, this week I used my site’s revamp to get the most out of understanding CSS. So what I’m sharing is how I made the landing page for this Facebook Fan Page:
EDITED LINK: Aruba-stage.nl Stagebemiddeling
Styling the Landing Page
For the Basic CSS Code you input in the FMBL Box you will insert the CSS Styling into the FMBL field. This means you will use this code ”<style> styling here </style>”, in the field it should look something like this:
<style>
insert all your layouting elements and styling here (some examples and free ready to use code follow!)
</style>
In the example page I used the following styling for the navigation at the top:
#menu {
height:135px;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
align: center;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:127px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
text-decoration:none;
text-transform:uppercase;
padding:4px;
}
a:hover,a:active
{
background-color:#7A991A;
}
The styling for #menu is to create a neat container for the menu elements. The color of this example is green. You can easily change this by changing the background-color of the a:visited, a:link. Don’t forget to then also change the a:hover color. You can also change it to an image.
Copy and paste the style code above and paste it like this: <style>”paste here” </style>.
The Page Body (without <body> tags)
Now you can go ahead and set up the page the ”body”. Before we do that there are a few points to pay attention to.
- <body>, <html> and <head> tags don’t seem to work in the FMBL box. So you will not be creating the page the same way as you would in a webpage editor. You will use <div> tags. Style as needed.
- For a neat site create a #container style, Facebook has room at this time for 740 px wide, but will be changing this soon to 540px maximum width, also the navigation code is designed to fit in 540 px wide.
The code used is:#container {
padding:0;
margin:0;
width: 540px;
height: 400px;
background: url(link to file here) no-repeat;
}
After doing all of this your page code should look like this:
<div id=”container”>
<div id=”menu”><ul>
<li><a href=”link 1″>Home</a></li>
<li><a href=”link 2″>about</a></li></ul></div>
//rest of page layout here//
</div>
After this you can create any layout you want, an idea is a 2 colum page with text in the left side and menu’s on the right.
Next time, when I’m on my own laptop I will add a post about how to add a Facebook LIKE link to the Landing Page and a Share button. It’s real easy!
Hope you enjoy working on your design and making optimal use of your Facebook Fan Page, I sure know I’m loving it!
If you do happen to use this tutorial to make anything, I’d really love to look at it and even give you free pointers if you want! Feel free to email me or message me via FB. I’m ready to help and get to know you!
Love your Design!
Beth The IMVA is a young energetic Virtual Assistant running www.creativedesigndevelopment.com. She works with small starting business owners to take charge of their marketing needs. Beth works closely with her customers to optimize the quality of their website, to-print material, and internet marketing campaigns. You can follow her on Twitter @beththeimva or become a fan of her Facebook Page here