Free FBML Template for Facebook Fan Pages

Posted by: Mary McKnight on May 6th, 2010

With over 400 million people using Facebook, you start to recognize how important it is to have your business brand on Facebook. For real estate, a business fan page is critical, but the fact is, most real estate professionals do not utilize the features and functionality of the page to the best of their ability.

One of the most important things you can do extend your brand on Facebook is to use the FBML application to create a custom look for your page.

Add a custom welcome page and/or IDX search page by adding the FBML application.

Landing on a Facebook “wall” is just boring. It is a wall of information that really doesn’t give people the full picture of your real estate business.

And let’s face it, most of the real estate content out there is somewhat boring, so create a custom Welcome page that uses proven conversion psychology to call visitors to action to fan your page and push over to your website and lead generators.

See the Arbour Realty example here on the right (and notice the new tab to the right of Wall and Info called “Welcome”). Here are my 2 real estate specific templates. See another real estate FBML example. Here is a live demo for you to view as an example.

Include a brief bio, all your contact information and call to actions to your lead generation tools like property search, market reports, contact form and even community profiles. Resources for buyers and sellers would also be helpful.

Disclaimer:

For Technical Information (Templates): You MUST have some knowledge of HTML and CSS (box model table-less design) in order to properly customize these templates. You will want to host images on your own server or a service like Photobucket. You will also want to include at least 250 words of keyword rich text, add ALT tags to images and keyword rich anchor text into any links for SEO purposes as Facebook Fan Pages are fully indexed by Google. You will also need to use this tutorial to fix an outstanding bug Facebook introduced in IE8 which requires you to load the CSS externally.
Tutorial: Fix to Facebook’s CSS Issues with Internet Explorer 8
All Tutorials: Tutorial Category
Video Tutorials: All Videos.
Size of templates conform to new Facebook business page size requirements of 520 pixels.

Tutorial:

1. Go to Facebook to add the FBML application to your fan page.

2. Once back on your fan page’s wall, click the “edit page” link below your profile picture.

3. Once in the editing area of your page, look for the FBML application and click “edit”.

4. Add a name for your page and then copy & paste your FBML code (or template code). FBML template code can be  downloaded here. Get the code by right clicking and saving to your hard drive. Or got to View in your browser and select Page Source. Or copy & paste the code from the syntax highlighter below. This code can be easily edited in Notepad or the HTML editor of your choice (I prefer Taco or Notepad ++). Each section is commented to guide you on what you should change to customize the images and links.

This is the template layout you will be using:

5. To add the above template to your page, copy and paste the code at the VERY BOTTOM** of this post from <style> all the way down to </div> (looks like a bunch of HTML code) into the edit window of your FBML application on your fan page like the image below:

6. Once the page is saved, go back to your page’s wall and add the new tab to the page, by clicking the plus sign on your tab menu and selecting your new tab. You can drag the tab to the left place it in a more obvious position.

7. Once your tab is on your page, you can ensure that new visitors land there first by going back to the “edit settings” and selecting the page from the drop down as the landing page.

NOTE:

This template is provided freely to you for commercial use as long as you maintain the links to both HomeGain and Sacrilicious in the footer and preserve all copyright information contained in the code. ONLY BASIC SUPPORT WILL BE PROVIDED (VIA EMAIL) AND NO REFUNDS WILL BE ISSUED FOR FBML TEMPLATES.

Questions?

Should you want a fully customized professional page, please consider our Custom Fan Page Facebook Services starting at $265 that fully brand your page and can include contact forms and IDX search. Our templates are now compliant with the expected changes in Facebook’s page width to 520pixels and come in single and multi tab layouts see here.

Become a Fan of Real Estate Fan Pages on Facebook to view our fan page portfolio and get updated news and tips on how to make your fan page more valuable.

VN:F [1.8.7_1070]

More About Mary McKnight | Email Me

**CODE TO INSERT:

<style>

a:link, a:visited {color: #E65722;text-decoration: none;}
a:hover {color: #E65722;}
a:active {color: #000;text-decoration: none;}
.sacriliciousa_fb_app    {width:520px; padding:0; }
.sacriliciousa_fb_app    .clearfix { display: block; }
.content { margin: 0px; padding: 10px; font-family: ‘Century Gothic’,’Bitstream Vera Sans’,Verdana,Helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 13px; line-height: 140%; font-size-adjust: none; font-stretch: normal; color: #444444; }
.content h2 {margin:10px 0; padding:10px;background-color:#ccc; color:#000; font-size:18px; text-transform:uppercase;}
p { margin: 0pt 0pt 1em; font-family: ‘Century Gothic’,’Bitstream Vera Sans’,Verdana,Helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 13px; line-height: 140%; font-size-adjust: none; font-stretch: normal; color: #444444; }
h2, h3 { text-align: left; color: #424242; font-size: 16px; margin-bottom: 0.4em; }
h3 { font-size: 14px; margin-bottom: 0pt; }
h1 {font-size: 25px;line-height: 30px;border-bottom: 1px dotted #b1baba;padding-bottom: 6px;margin-bottom: 15px;color:#424242;}
h2 a {color:#424242}
.fb-tabs { margin: -20px 0 0 0; padding: 0; display: inline; list-style-type: none; list-style-image: none; list-style-position: outside; text-align: center; }
.fb-tabs li {height: 100px; background: url(http://farm3.static.flickr.com/2702/4031600125_47210521e3_o.png) no-repeat 50% 100%;  margin:-3px 2px 5px 2px; none repeat scroll 0% 0%; list-style-type: none; list-style-image: none; list-style-position: outside; float: left; width: 100px; }
.fb-tabs li a {padding: 40px 8px 4px 9px; display: block; color: #fff; font-weight: bold; height: 14px; }
.fb-tabs li a:hover {color:#dd027e; }
.fb-tabs li a small { font-size: 11px; font-weight: normal; }
.fb-tabs li a:focus { outline-color: invert; outline-style: none; outline-width: 0px; }
.fb-tabs li a.selected { none repeat scroll 0% 0%; color: #C2007A; }
.fb-tabs li a.selected span { color: #ed8245; }
.fb-tabs li a.selected:hover { text-decoration: none; }
.headerimage {width:500px; height:300px; background-color:#ccc; text-align:center; }
.contentimage1 {width:200px; height:150px; background-color:#ccc; margin:0 0 0 10px; text-align:center; padding:10px; float:right;}
.contentimage2 {width:200px; height:150px; background-color:#ccc; margin:0 10px 0 0; text-align:center; padding:10px; float:left;}
.contentcontact {width:220px; height:220px; background-color:#ccc; margin:0; text-align:center; padding:10px; float:left;}
.contentabout {width:220px; height:220px; background-color:#ccc; margin:0; text-align:center; padding:10px; float:right;}
.footer {padding: 10px 0 0 0; text-align:center; margin: 10px 0 0 0;}
#nav1 {border: 1px solid #ccc; background:#fff;}
img {border:none;}
</style>

<div>
<ul><li>
<a href=”Enter Your Website’s Link Here (be sure to include the http://” clicktoshow=”nav1″>Home</a></li><li>
<a href=”Enter Your Buyers Link Here”>Buyers</a></li><li>
<a href=”Enter Your Sellers Link Here”>Sellers</a></li><li>
<a href=”Enter About link Here”>About</a></li><li>
<a href=”Enter your Contact Link Here”>Contact</a></li></ul>

<div id=”nav1″>
<div>
<img src=”http://i921.photobucket.com/albums/ad60/sacriliciousmarketing/header.png” />
<!–Please replace the image link here with an image of your own to customize the header –>
<h2>Custom Content</h2>
<strong>You may delete this section and replace it with any custom content and text. </strong>
<br /><br />Links to your social networks and property search would be good content selections here.
<br /><br />Please note, this template free but copyrighted and you may not remove the copyrigth information in the code, links or logos for Sacrilicious Marketing or Homegain should you choose to use it.
<br /><br />Should you wish to have a custom template built for your brand or company, please consider using <a href=”http://www.facebook.com/#!/realestatefanpages?v=app_4949752878&ref=ts”>Sacrilicious Marketing</a>. Our prices start at $265 and we are able to integrate most IDX searches into our pages. For more information, call us at 321-442-3872 or email us <a href=”http://sacriliciousmarketing.com/contact-me/”>here</a>.
<br /><br />Customized Fan Page Example: <a href=”http://www.facebook.com/pages/Hermosa-Beach-CA/Beachtime-Realty/274114985958?v=app_4949752878&ref=ts”>Tony Cordi | Hermosa Beach Realtor</a>
<br /><br />Integrated IDX Search Example: <a href=”http://www.facebook.com/realtyaustin?v=app_4949752878&ref=ts”>Austin Brokerage | Realty Austin</a>
</div>

<div>
<h2>Contact</h2>
<div>Contact info goes here</div>
<div>About info goes here</div>
<div>
This Facebook Fan Page Created by <a href=”http://www.facebook.com/#!/realestatefanpages?v=app_4949752878&ref=ts”>Sacrilicious Marketing</a> and <a href=”http://www.homegain.com”><img src=”http://images.homegain.com/i/logo_only.gif” /></a>
</div>
</div>
</div>

<!– This template copyrighted by Sacrilicious Marketing www.sacriliciousmarketing.com 2010. Terms of use: you may not remove any links to Home Gain or Sacrilicious Marketing or this copyright information. –>

</div>

Share

Comments

44 Comments on “Free FBML Template for Facebook Fan Pages”

Brendan Spear

This is a great post. I have not done this to my FB page. but I have seen others, and I always thought to myself how do they do that. I am starting to use FB more along with Ping.FM to post to twitter, FB, etc… and I really want to spice up my presence. so Thank you for telling me what the application is. now I just gota go do it.
~Brendan Spear http://bowie.greatmarylandliving.com/

questionaries

Awesome collection of information! I’m not to technologically savvy but you tell it in English. Thanks very much!

Heriberto

WHere is the template code?

Louis Cammarosano

Please take a look. It should be restored above

Heriberto

Cool, thank You

Patrice Miles

Ok I copy and pasted the HTML code but it is not pretty like the above template shows. It does not have th tabs at the top, it just labels
Home
Buyer
Seller
About
Contact

What do I have to do to make it pretty?

Mary McKnight

Patrice, that code can’t work – it is directly inside the wysiwyg editor – try the code found here:
http://facebookcustombusinesspages.com/templates/free-fbml-template/ (download the file included on that page then open it in a text editor like Notepad ++ or Taco and you can edit the code, to preview it – just click on the file and open it in your browser.

Lesley Maher

I have tried to use the code you provided for the FBML template in my FB biz page (Quincy Real Estate), but it simply shows the code on the tab (I called in Multi-Tab for now). What am I doing wrong?

louis cammarosano

Hi Lesley
We are working to correct the code. In the meantime
you can try this
Patrice, that code can’t work – it is directly inside the wysiwyg editor – try the code found here:
http://facebookcustombusinesspages.com/templates/free-fbml-template/ (download the file included on that page then open it in a text editor like Notepad ++ or Taco and you can edit the code, to preview it – just click on the file and open it in your browser.

Mary McKnight

Leslie, as I just said in the previous comment – this post was posted incorrectly – just grab the code form the origin link here:
http://facebookcustombusinesspages.com/templates/free-fbml-template/ (download the file included on that page then open it in a text editor like Notepad ++ or Taco and you can edit the code, to preview it – just click on the file and open it in your browser.

Mary McKnight

Leslie, as I just said in the previous comment – this post was posted incorrectly – just grab the code form the origin link here:
http://facebookcustombusinesspages.com/templates/free-fbml-template/

Patrice Miles

OK I guess I am just way to new to HTML but when I save the template above to my hard drive and then open it in Notepad it is all messed up and not HTML code? I know it really cannot be this difficult??

Mary McKnight

Patrice – you need to use a real text editor – try Notepad ++. It’s a free download and since you have probably corrupted that files, you have to re-download it again. Open it inside of Notepad ++ and you will see the FBML (it is not HTML so it lacks tags that Notepad expects). A real text editor will open it.

Carla

I have not been able to get the link to my blog to work. They link my FB page. What am I doing wrong? I just replaced the text such as “Home” with “Blog” and replaced the link.

Carla

Patrick,

Just copy and paste the code above into Notepad.

Mary McKnight

Carla, you have to make sure you include the full path to the link http://www.yoursite.com – FBML cannot real any link without the http://
Also make sure the tag is opened and closed properly – for a basic html/css reference on how to structure code, please use the W3C for web standards at http://www.w3.org/

Carla

I actually figure out that one by copying a link on my own blog. Now for the next problem. I am trying to add a link to my photo on flickr. Nothing shows up. I have tried adding the flickr link and then the html code below. What wrong?

Thanks for this awesome template!

Mary McKnight

Carla, you are not linking to the actal image – this is the link to the real image – http://farm5.static.flickr.com/4045/4379495329_e58923b653.jpg

also remove all the no-follow and title info – you can add an alt tag but that other stuff is irrelevant in FB

if you want to talk directly feel free to call or email and I could probably help you faster. rebloggirl@gmail.com or 321-442-3872

Carla

Mary, thank you!

I tried the link you provide above, first, but it didn’t work. I am not sure what “no follow” code looks like. Now it is 8pm on the West Coast, so I don’t want to call you not knowing your time zone.

Here’s the code from the template. What should mine look like? I tried the below code, too, and it does not work.

Hotel

Very nice job, nice templates.

Torbjorn

Awesome template, but there’s some problems in internet explorer. Have any ideas how to fix that?

don_fester

hello. i just want to ask a very simple fbml code for contact information for my business page. Here’s an example: http://www.facebook.com/flyPAL?ref=sgm#!/flyPAL?v=info&ref=sgm

DonOfTheWorld

Well, if we want to customize our tab, I mean with colours, then how, we can do this?

@Don: Its simple, the page just link the address with the image/poster.

rachel

hello!..i just want to ask a code for a Welcome tab on a facebook page…nid n0w…

pasi

Both codes here and the one Mary McKnight provided do not work on IE..I know something about FBML and it very clear that the layout is totaly different than you will get using the codes here..

Anybody knows the answer to this?????

ahmadinejad obama

Very nice .
Thank For Sharing,Can I use them on a Free Hosting

Susy

What about if I want each tab to have their own content and not to be transfer to an outside link. For exp. Tab 1 info on my company, Tab 2 general info on our procedures, Tab 3, 4 etc describing each procedure individually. Is this doable?
Thank you!

James Clapton

I try to make an internet marketing tools fan page by insert the code but it become like this http://www.facebook.com/pages/Market/125563987503779?v=app_4949752878&ref=sgm.

Mary McKnight

Of course it does – that code was copy and pasted here – you need to download the code provided – just like this page on Fb and you get access to the real estate template with quick search – http://www.facebook.com/sacriliciousmarketing?v=app_23744633048

remember to follow any video tutorials here: http://facebookcustombusinesspages.com/videos/

megadoss

Nice info, TQ!!!!

Inversion Tables

Was looking for this – so I just tweeted your website on our account – thanks

Keith Bennett

WOW… I think the more I read on the web the more I get confused. So I will keep reading in hopes of making sense of it all.

Jorge

Thanks for the great template. But how can I use the other tabs to display different content instead of external links?

Mary McKnight

You buy a multiple tabbed template. The free template is not a multi tab. You can purchase multi tabbed pages. this one was created for real estate:
http://facebookcustombusinesspages.com/buy/#ecwid:category=494275&mode=product&product=1715174

You can get 30% off if you use this code JAN 2011 ONLY – O4QOBIZPO2XG

Mary McKnight

To the person who said this doesn’t work in IE – READ THE TUTORIALS. It has the instructions on how to move your CSS to an external file. there are plenty of videos on our site – in order to give you the flexibility to edit them – we include the inlined css but give explicit video and written instructions on how to make it work in IE.

Chris Adams

Awesome tutorial and one that is VERY applicable to real estate agents looking to spice up their FB business page. One recommendation: if you’re on a Mac, one of the better (and free) code editors is TextWrangler.
-Chris http://redtigertraining.com/

Ruth

Thanks for this great info Mary! This is going to be extremely helpful for dressing up my Facebook page.

Kelona

Ok.. I found it. It’s a Flikr image, so I tried copying the image and pasting it in serif drawplus and ms publisher editing the color, then uploading to flikr, but the size keeps coming out too small. :/ Help! I think its making it the standard 75×75, and it should be (my guess?) 100×75.

Thomas sabo onlineshop

Nice post.Thanks for sharing.

lighting wholesalers

Hello intelligent points.. now why didn’t i consider those? Off topic barely, is this page pattern merely from an bizarre installation or else do you employ a custom-made template. I exploit a webpage i’m looking for to enhance and properly the visuals is probably going one of the key things to complete on my list.

Flowers

I really delighted to find this website on bing, just what I was searching for : D as well saved to my bookmarks .

lighting manufacturers

I like what you guys are up also. Such intelligent work and reporting! Keep up the superb works guys I’ve incorporated you guys to my blogroll. I think it’ll improve the value of my website .

Comox Valley Real Estate

I had no idea that this could be done to Facebook. Great post and very helpful

Teambuilding

yeah this template was nice.You can upload this.

Leave a Comment

 

For Real Estate Agents

Online Marekting Solutions

For Home Buyers and Sellers

e.g., 1250 S Main St, Burbank, CA or 91506
     Search Foreclosures    Search New Homes    Search Rentals    

Blog Categories

Blog Archives

Real Estate Blogs

Top Articles

Recent Comments

Guaranteed LeadsReferral Lead ProgramListings PackageVisits to your WebsiteFind REALTOR®Homes For SaleHome Values