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. :)

So lets get right down into it. The biggest change for us to worry about is the sizing change. Though all we have to do is change a few dimensions in our designs. The new sizing is:

520px wide

Height is unaffected.

In previous posts and examples I made a simple opt-in page for you. So lets do an updated version of that page to reflect the new changes:

 

<div id="whole_box" style="width=520px;">
<img src="www.example.com/images/header.png" width="520"/>
<div id="inner_box_container" style="text-align: center;">
<span id="inner_box_title_text">Welcome to our Fan Page.We’re glad to have you be part of our family.</span>
<div id="inner_box" style="font-size: 12pt; line-height: 18pt; font-family: Verdana;">Stuff in the shiney red box goes here</div>
</div> <!-- end inner box -->
</div> <!-- end inner box container -->
</div> <!-- end whole box -->

This will great the same style of box as in the previous posts, except now it will render properly in the new design!

I’ll be post several professional quality templates for all of you soon. Though only people on the mailing still will get them :) Previews will be posted here on the blog.

Best of luck!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Filed under: Fanpages • FB 101 • FBML CSS • Static FBML • Static FBML Styles

Like this post? Subscribe to my RSS feed and get loads more!