As many of you already know there are huge changing going on with Facebook. Rather recently though they began changing the whole Fanpage layout scheme. Sadly for us this means less screen real estate. This translates to: we have even less horizontal space to place our content. Fear not, here are some quick tips and updates.

First and foremost here is a quick list of the changes to Fanpages:

• Shrunk horizontal space (Again)
• Removed Tabs
• Added Links/menu items (these replace tabs)
• Cleaner design and layout:
  • Left menu is super clean and well designed
  • There is now a NEW RIGHT sidebar for social things and for Facebook to place more ads on.

There are a few other changes, but that’s not important for this article. :)

Read the rest of this entry

Working with FBML CSS can be tricky at times, so I’m here to show you all the ways you can successfully add CSS into your FBML code. Be warned though, there are a few ways and each way has it’s ups and downs. The usual down part of each set of CSS code is that if you create some complex CSS structure you’ll have it ‘hack’ it to work with Internet Explorer (any version). So that’s kind of a drag.

But lets get started with. We’ll cover these topics:

• Inline CSS
• External files
• Using inpage <style type=”text/css”> tag
• Caution of using the inpage method.
• Resource list for CSS (independent of FBML and Facebook)

Note: This isn’t a “how to program in CSS” guide. This is how to incorporate it with your Static FBML code and the like. So come knowledge of CSS/HTML is required.

Read the rest of this entry

Looking for some good Free FBML Templates? Well, you’re in luck today.

Today we are a very simple, yet effective template ready for you.

Sorry, but this isn’t a huge list of free templates … that will come later.

Below you’ll find the complete code used, and explanation, for creating the landing page on the PLR – Private Label Rights fanpage.

The code is CSS complaint and doesn’t use tables. We here at Quantum Fanpages hate tables. Below is your free FBML template to help you create a quick and effective opt-in page.

First is the Free FBML template code, and afterwards we’ll explain it:

<div id=”whole_box” style=”width=800px;”>

<img title=”becomeafan” src=”http://www.piotrkrzyzek.com/plr_files/plr.jpg” height=”71″ width=”760″>

<div id=”inner_box_container” style=”text-align: center;”>

<span id=”inner_box_title_tex” style=”font-size: 12pt; line-height: 18pt; font-family: Verdana; “>

Welcome to our PLR Fan Page. <br />We’re glad to have you be part of our family.</span>

<div id=”inner_box”  style=”margin-top: 15px; border: 4px dashed red; height: 400px; width: 600px; margin-left: auto; margin-right: auto; text-align:left; padding: 10px;”>

<div id=”inner_box_top_title_tag” style=”text-align: center;”><span style=”font-size: 18pt; line-height: 18pt; font-family: Verdana; font-weight: bold;”>Grab your <span style=”color: red”>FREE</span> copy of our latest E-Book, “Blogging For Profit”, by entering your name and e-mail below.</span></div>

<br />

<div style=”margin-top: 25px; margin-left:auto; margin-right: auto; width: 300px;”>

OPTIN CODE GOES HERE

</div>

</div>

</div>

</div>

Hopefully that can be transfered easily to your code.

As you can see the code is completely comprised of CSS complaint code.

There are several very important things to note about this code which will be different for your code. This fanpage is a bit older, so it still uses the old width.

Your new fanpage might have a max width of around 760px. Be sure to not make anything wider than that. That is what this code does:

<div id=”whole_box” style=”width=800px;”>

It create a whole container which I can control. Everything else is within that outer ‘whole_box’ element.

The next tag, the image tag (<img>) is, well … the image. This displays an image, and in this case, it displays a header image.

The image is followed by a div tag. The first one sets up a box container which allows me to center align everything below.

Then there is the ‘inner_box’ which has the red dashed border.

To add a border, simply add this style to any element (any element that can have a border):

style=”border: 1px dashed red”

The 1px is the size. You can set it to anything. 2px, 10px or even 100px. Though I don’t think you’ll want anything that big. Usually a size between 1px and 5px is perfect.

Everything else is just more of the same. Creating div elements to hold stuff. Pretty simple, yet very effective!

Let us know in the comments below what you think. Also be sure to sign up for our newsletter to get tips, tricks and tactics that we don’t share publicly.

There are many ‘sytles’ for FBML. A style nothing special; it’s not some secret template, code or magic plugin. A FBML Style is nothing more the CSS styling. CSS Stands for Cascading Style Sheets and is the basis for 99% of all design on the internet.

Practically every single you visit will have some form of CSS on it. CSS is the stuff that looks like:

body {

background: white;

padding: 5px;

}

And stuff like that. What’s great is that you can add styling to your FBML code! The bad news is that not all of it works exactly like you would like and, as usual, Internet Explorer (all versions) have problems with it. Fixing it for Internet Explorer is another article which I’ll eventually write on PiotrKrzyzek.com.

Today I want to tell you how to add CSS to your FBML tab and some basics for using it.

This article isn’t about advanced styling or a full blown tutorial. It’s a starter guide. More on advanced FBML styles in a later post.

Read the rest of this entry

Facebook’s App Static FBML is pure awesome sauce. With it you can add pure html to a custom named tab. Also you are able to make the tab the first thing they view when they click on your fan page! How cool is that?

Adding such a tab is easy at adding the Static FBML application, editing it, and then adding it as a tab. In the video, I said I’ll show you how to make it the first thing anyone views on your page … but I messed that up and couldn’t find it in the heat of the moment. Right below the video I added the steps on how to make the page the first thing viewers see!

In the video I talk about:

• Adding FBML to your page
• Editing FBML
• Adding your Aweber optin code
• Quick html things in static FBML

Enjoy the video introduction to Static FBML!

To set the Static FBML tab as the primary tab, follow these quick steps:

1. Click over to “Edit Page”, thus you’ll be at your pages settings.
2. Under “Wall Settings”, the 2nd option from the top, click “Edit”.
3. Change “Default Landing Tab for Everyone Else:” to your Static FBML’s tab name.
4. In the case of the video example, I would select “Sign Me Up!”.
5. Check your fan page from another account which is not a fan of the page.

Enjoy! If you have any comments or questions feel free to ask!