HomeGain Real Estate Blog HomeGain Real Estate Blog
Search
Free FBML Template for Facebook Fan Pages

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

arrow44 Responses

  1. 101 mos ago

    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/

  2. 101 mos ago

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

  3. Heriberto
    100 mos, 3 wks ago

    WHere is the template code?

  4. 100 mos, 3 wks ago

    Please take a look. It should be restored above

  5. Heriberto
    100 mos, 3 wks ago

    Cool, thank You

  6. 100 mos, 3 wks ago

    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?

  7. 100 mos, 3 wks ago

    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.

  8. Lesley Maher
    100 mos, 3 wks ago

    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?

  9. 100 mos, 3 wks ago

    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.

  10. 100 mos, 3 wks ago

    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.

  11. 100 mos, 3 wks ago

    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/

  12. 100 mos, 3 wks ago

    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??

  13. 100 mos, 3 wks ago

    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.

  14. Carla
    100 mos, 3 wks ago

    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.

  15. Carla
    100 mos, 3 wks ago

    Patrick,

    Just copy and paste the code above into Notepad.

  16. 100 mos, 3 wks ago

    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/

  17. Carla
    100 mos, 3 wks ago

    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!

  18. 100 mos, 3 wks ago

    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

  19. Carla
    100 mos, 3 wks ago

    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.

  20. 100 mos ago

    Very nice job, nice templates.

  21. Torbjorn
    100 mos ago

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

  22. don_fester
    100 mos ago

    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

  23. 99 mos, 3 wks ago

    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.

  24. rachel
    99 mos, 2 wks ago

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

  25. pasi
    98 mos ago

    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?????

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

  27. Susy
    97 mos, 1 wk ago

    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!

  28. 96 mos, 1 wk ago

    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.

  29. 96 mos, 1 wk ago

    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/

  30. 95 mos, 3 wks ago

    Nice info, TQ!!!!

  31. 95 mos, 3 wks ago

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

  32. 94 mos, 2 wks ago

    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.

  33. Jorge
    94 mos, 2 wks ago

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

  34. 94 mos, 2 wks ago

    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

  35. 94 mos, 2 wks ago

    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.

  36. 93 mos, 2 wks ago

    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/

  37. 90 mos, 3 wks ago

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

  38. 90 mos ago

    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.

  39. 88 mos, 2 wks ago

    Nice post.Thanks for sharing.

  40. 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.

  41. 84 mos, 4 wks ago

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

  42. 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 .

  43. 83 mos, 1 wk ago

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

  44. 82 mos, 1 wk ago

    yeah this template was nice.You can upload this.

Leave A Comment