In this series on How to Set Up a Facebook Fan Page for Real Estate Associations, Brokerages and Agents, we will discuss the basics on how to set up a Facebook Fan Page. Here are the topics in this series:
- How to Set-Up a Basic Facebook Page
- How to Create Customized Tabs for Facebook Fan Page
- HTML/FBML Code, Cheap Tricks and Short Cuts, and Other Design Ideas
- Strategies for Using Facebook Fan Page to Market and Sell Real Estate
In today's installment, we discuss how to create customized tabs. As discussed in the prior post, Facebook Fan Pages have six tabs with two tabs universally dedicated on every Facebook Fan Page - Wall Tab and Info Tab.
Step 1 - Install Static FBML Application. Go to Wall Tab. On left side, click on "Edit Page". The bottom section is labeled as More Applications. Click on "Browse More". On Applications Page, enter "FBML" or "Static FBML" into search box. The search results should include an application called "Static FBML". Click on "Static FBML". On the Static FBML under the Application icon, click on "Add to My Page". There will then be a pop up showing your Facebook Fan Pages. Click on the Fan Page upon which you want to install the custom tab.
Step 2 - Create Custom Tab. Go to Wall Tab and click on "Edit Page." Go the FBML Application. Click on "Application Settings". Click on "Tab Available Add."
Step 3 - Create the Page Content for the Tab. Now, click on "Edit". There will be an elongated rectangular box. In the first section, enter the name of the custom tab in the "Box Title" section as you want it to appear on the Facebook Fan Page Tab Bar. In the second section, cut and paste the HTML/FBML code into the box entitled "FBML".
Step 4 - Creating HTML/FBML Code. There are three divergent methods on how to create the Page Content for the custom Facebook Fan Page Tab. Here are some of the methods:
- HTML Code: If you are an experienced programmer, you simply write the HTML code necessary to create the page content. For this method, you want to employ a professional such as Mike Mueller on Activerain. Here is a link to his website describing his custom Facebook Fan Page Business Services.
- HTML Editor: Use an HTML editor to create the intended design and look and then click on the source code to obtain the HTML code. NVU is a free and easy to use HTML editor and can be downloaded for free. Or, if you blog on ActiveRain, use their WYSIWYG editor, save as draft, and then open again click on HTML. To join ActiveRain under a free membership, click on New Member. Cut and paste the code into the Static FBNL box.
NVU Editor
- Design on Screen
- Click on Source at the bottom of the design screen to obtain HTML code.
- Cut and paste HTML code.
ActiveRain Blog
- Design on screen using WYSIWYG editor.
- Save as draft.
- Click on edit to open blog post. Click on HTML to switch from WYSIWYG editor to HTML editor. Cut and past HTML code.
- Image Only HTML: Create your intended content using any program such as Microsoft Publisher. Use a screen image capture service like the free Snagit Editor to capture the image and then save the image as a .jpg file. Upload the jpg file into a free photo hosting service like Photobucket. Edit the photo to create an image a maximum of 760 pixels wide. Cut and paste the HTML code from the photo hosting service into the Static FBML box.
- Create item. Use screen capture like Snagit to capture the image. Save as a .jpg.
- Upload .jpg file to Photobucket. Cut and paste HTML code for image.
To see a recent Facebook Fan Page set up for the Metropolitan St. Louis Chapter of the Women's Counsel of Realtors using all of the methods described above, click on: WCR-St. Louis Fan Page. It is still a work in process but you will get some ideas.
In the next post, we will discuss how to create more specialized boxes and tabs using simple HTML code.
For more information on how to create your customized Fan Page, contact Ryan Shaughnessy at PREA Signature Realty at 314-971-4381. Or, visit www.PREASignatureRealty.com and click on the "Technology Toolbox."
________________________________________________________________________________________________
PREA SIGNATURE REALTY
PREA Signature Realty is a full service brokerage located at 1709 Park Avenue in the Lafayette Square neighborhood of the City of St. Louis. PREA Signature proudly serves the following city neighborhoods: Lafayette Square, Soulard, Benton Park, Benton Park West, Downtown Loft District, Forest Park Southwest, Central West End, Tower Grove East, Tower Grove South, Compton Heights, Shaw, The Hill, Dogtown, Carondelet, Holly Hills, St. Louis Hills, Dutchtown, and the Other Historic Neighborhoods of the City of Saint Louis, Missouri.
The opinions expressed herein represent the opinions of the author only and do not reflect the opinions of PREA Signature Realty. All photos and written content were produced by PREA Signature Realty. All Rights Reserved - PREA Signature Realty (2009). This content may not be reproduced or reprinted, except for Active Rain re-blogging, without express written permission of PREA Signature Realty.
For more information, visit our website at www.PREASignatureRealty.com or contact Ryan Shaughnessy at 314-971-4381 or send an email to Ryan@PREASignatureRealty.com.
Thanks for the info, I'm going to rest up and hopefully be energized to do this tomorrow.
Michelle - I hope you check out the entire series - three post written with two posts to go.
Thanks for sharing - I really need all the help that I can get with Facebook!
hi Ryan, excellent tutorial, thx for adding it to the group!
Marti - Thanks for the "sharp cookie" feature. It is going to be a six post series and one acid tongue rant on how this post got censored and banned from NAR's LinkedIn Group.
I bookmarked it for when I get my fan page going. Sounds great, but I need to get the basics before I can fully comprehend why it's needed.
Jill - We will discuss strategies on how to use in the final post.
How do you guys come up with all this stuff. It is just amazing.
Gene - We talk about the projects that we are working on and often find that there are others working on the same or similar projects.
Once again Wow, I just started using Static FBML, Thanks for the info getting Html codes/editor, now off to work on my pages.
Eva - Take a look at the final two posts... There are some ideas and HTML codes in the last 2 posts of the series.
I was at a meeting recently and saw one office that had an agent roster on their fanpage. Since then, I've been adamant that I was going to figure out how to do that for our office and was ecstatic when I found your post.
I got the FBML tab going, downloaded Nvu and created the table with all necessary info. I got the code, pasted it in the html box and...nothing. I feel like I'm missing something here. Why isn't my code working properly within the tab? It would post to craigslist, but nothing would show up with the code in my activerain blog.
Amanda - I'm leaving town for the holidays. However, you have to delete the header codes on the HTML and post only <body> to <body>. Here is some info on what you may need to do to edit the HTML code produced by NVU's html editor:
* You CANNOT auto-run JavaScript in an FBML page – it must require a user action; you can also use FBJS (Facebook JavaScript);
* You SHOULD NOT use a tag — it works in most browsers, but NOT in Internet Explorer (of course); you can, however call an external style sheet via <link href="”http://yoursite.com/styles/layout.css”" mce_href="”http://yoursite.com/styles/layout.css”" rel=”stylesheet” type=”text/css” /> (Read this post about the difference between Internet Explorer and other browsers regarding Static FBML and CSS…);
* Maximum width of FBML page is 760px (However, Facebook has announced this will be reduced to 520px in later 2009/early 2010.);
* Include ONLY the HTML/CSS that’s between the <body> and </body> tags; NO <html>, <body>, <head> or meta tags; [This was the culprit for me when I cut and paste]
Ryan - thanks for some terrific information. Just curious, are you allowed to add more than one FBML page? I tried and it didn't seem to work. I have a "Stanton Homes" fanpage.
THANK YOU, RYAN! I reduced the table to 520 pixels and only pasted the code between <body> & </body> and it worked great!
And I have come to find out that the inspiration page I saw was only pictures OF their agents linked back to a photobucket account. Now we have a functional table with links back to our agents websites. :) That's always good.
Thanks again, Ryan!
As far as adding a second FBML tab - it's a little bit tricky, but can be done! At the bottom of your first page (under the content field) it will say "Add another" FBML tab. Click that, then click the "edit" link that appears next to it.
For me, it then showed up in my "Boxes" tab, then I had to click the Edit icon, change it to "Show in Wall tabs" THEN click the >> button to add the new tab. (This is because I forgot that you can just edit your page and change it in the Application Settings.)
Hope that helps while the guru is on holiday. ;)
Thanks for providing the steps to create a custom tab on FB! It was just what I was looking for! See my results, www.facebook.com/edmondrealtor
Penny - Yes - You can add more than 1 static FBML page. I have 6 or so on my facebook fan pages. It does cap out - I think the max is 10 FBML pages.
Amanda - Described it exactly as it works.
Kristyn - You have a great fan page - definitely have a better eye for design and layout than me.