This is a guest post by Jesse Stay, founder and CEO of SocialToo.com and all around great Facebook Fan Page coder. He’s volunteered to give away a copy of his recent book, FBML Essentials, to two readers. Scroll down to the end of the post for details on how to win.
Marketers love Facebook. With 350 million+ users, a self-promoting and natural way to have people promote your product, and a very active audience full of close friends and family, what’s not to like? If you had any doubt, just go on over to their stats page and see for yourself why it is something you want as part of your marketing strategy.
The best place you can place your brand on Facebook is through a Facebook Page (that’s with a capital “P”, not to be confused with your personal Profile). As of the time of this writing, over 10 million users become fans of Fan Pages every day. This number should be no surprise — when people “fan” your Page, their friends see it, and your brand spreads organically. What most don’t know is that you can customize this experience for your users. With just a little work, and either some knowledge of simple HTML or the ability to hire a developer to do the work for you, you can have a custom Page up for your business in no time. Here are some tips you can apply to your Facebook marketing strategy that will put your Facebook Page leaps and bounds ahead of the competition:
Maximize Your Avatar Visibility
Profile pictures on Facebook can have a maximum size of 200×600 pixels. This applies to Pages as well. Facebook Pages do not allow background images like Twitter, Myspace, and other services. What you can do, however, is take advantage of that full 200×600 real estate and get your brand in front of the eyes of your fans. This will make sure, regardless of what part of your Page they are on your brand is front and center.
Install the Static FBML App and Add a Custom Tab
Do a search for “static FBML” on Facebook (or just click here), and click “Add to my Page” in the upper-left. A dialog pop-over will appear with a list of Pages you administer. Select the Page you want to customize by clicking the “Add to Page” button next to the Page, and when you click the button it will disappear from the list. Now click “Close”.
Now what you want to do is create your tab. To create the tab, just go to your Page and click the link, “Edit Page” in the upper-left below your main Page image. Now when you scroll down you will see a subsection called “FBML”. Click on the “Application Settings” link for that subsection, and another popover dialog will appear. Click “add” next to the Tab field and click Okay. You’ve now just added a blank Tab called “FBML” to your Page. Now you need to customize it.
Add Content to Your Custom Tab
If you go view your Page now, you’ll notice when you click the “>>” tab there is now an “FBML” option in the drop-down. If you click on it, that tab appears in the list of tabs at the top, and you can drag it around (to the extent that Facebook allows you). You’ll notice the tab is completely blank. Let’s add some content to it.
To add content, click on “Edit Page” again on the left below your Page image. Go to the “FBML” subsection again, but this time click the “Edit” link. Now you’ll be taken to a very simple form with a “Box Title” field and an “FBML” field. This is your Canvas.
Let’s start by changing the title of the tab. As I mentioned earlier, the tab, by default gets called “FBML” when you add it. You probably don’t want to keep that name, so I recommend changing it to something productive, like “Welcome”, or “Introduction”. You can name it whatever you like, depending on your purpose!
Now you’ll want to enter some content. The “FBML” field will take almost any basic HTML. You don’t need to include any <html>, <head>, or <body> tags, as the HTML you enter will only take the place of that whitespace you just saw. All the header stuff is taken care of for you. Play with it and see what you can do.
Customize Your Tab With FBML
Beyond simple HTML you can also enter very simple FBML tags to simplify some of the process. FBML stands for “Facebook Markup Language”, and is meant to be a shortcut for use in Facebook applications. Facebook has also enabled the use of a subset of FBML in the Static FBML application. FBML can be a great way to reduce the amount of HTML you need to enter, while at the same time keeping Facebook’s own look and feel. The format is very simple, and if you are familiar with HTML or XML you’ll pick it up very quickly.
To learn FBML you’re going to want to check out Facebook’s documentation and reference on FBML tags. There is a large reference of these tags on their developer wiki. I recommend you look around and see what’s available, then try them out and see how they work. You can also purchase my book, FBML Essentials, which will give you a little more details on FBML (as well as the Facebook developer platform in general).
Keep in mind that the Static FBML application only supports a subset of what the full FBML reference indicates is available. Unfortunately there is no documentation stating what is, and isn’t supported. Tags that have been confirmed working and are my favorites are:
<fb:name> – displays a specific user’s name in the standard Facebook format
<fb:profile-pic> – displays a specific user’s profile picture in the standard Facebook format
<fb:swf> (great for Youtube videos or other video display) – allows you to include Flash applications in your tab
<fb:live-stream> – posts a Facebook live stream widget on your Tab (you must create a new application to do this)
<fb:comments> – adds a Facebook comments box to your Tab
If you read the Facebook wiki documentation keep in mind that “loggedinuser” does not work for the uid on the Static FBML App, but “profileowner” does. Beyond that, if you specify the specific user id in that field it should show properly. Here’s an example of a simple tab I set up:
<h1>Welcome!</h1>
<p>
<fb:profile-pic uid=”profileowner” size=”square”/>
Hi! My name is <fb:name uid=”profileowner”/>.
</p>
<fb:fan name=”stay”></fb:fan>
<fb:live-stream width=”700″ height=”400″
event_app_id =”293151070252″></fb:live-stream>
That produces something that looks like this:
Set Your Page to Default to Your New Tab
Now that you’ve created your custom tab using the Static FBML App you may want to set your Page to default to the new tab. This can give you a nice welcome message for your fans. To do so, just click “Edit Page” as I mentioned above. Under “Wall Settings”, click “edit”, and under “default landing tab for everyone else” select your new tab in the drop down. You’re done! Keep in mind that this default tab is only visible as a default landing page for those that are not yet fans of your Page yet.
SEO for Facebook Pages
Your Page is visible to search engines! Now that you’ve created your custom landing page, keep in mind that search engines see the page layout in the same way that someone who is not a fan of your page would see.
If you haven’t yet created a Facebook Page, you should also keep in mind that the Page title can be one of the best places to create a search-engine friendly title for your brand. Be sure this is something that describes yourself and your brand, and that you think others will be searching for. It should also, at the same time, be something familiar to other Facebook users, as this is what they will see in their News feeds as their friends become fans or you post updates. Keep in mind your Page name can not be changed once you create it, so get it right the first time! It can be a pain to have to re-create a new Page and re-establish months of work building your Page if you get it wrong early on.
Conclusion
As you can see, a Facebook Page is a powerful tool that you can use to enhance and strengthen your brand naturally using the tools Facebook provides. Be sure to leverage this tool, customize it, and make it work to get your brand in front of as many people and their friends as possible. Facebook is growing massively at the moment — is your brand a part of that momentum?
Giveaway
Jesse has agreed to give away two copies of his book (in eBook or paper format — your choice), FBML Essentials, for the best use of FBML for any fan page. Criteria are that the Facebook Page has to use the Static FBML app and will be judged by best use of FBML as a complement to HTML. If you have a Facebook Page to volunteer, just hop on over to the comments and share your favorite page. You have until December 10th to enter. Good luck!
Jesse Stay is a consultant who specializes in the integration of social APIs such as Twitter and Facebook. You may know him as founder and CEO of the social stream clean up and automation tool, SocialToo.com, but Jesse has also written two books on the subject of Facebook. His first book, “I’m on Facebook–Now What???” focuses on the beginner Facebook user and teaches you how to use Facebook as a productive tool rather than a toy. His second book, “FBML Essentials” takes you from the ground up on the Facebook developer platform, serving as a reference to Facebook’s Markup Language.
Update: Dave Dugdale of RentVine.com has graciously provided a video tutorial on how to create a “Fanbook page” (it has a nice ring to it, right?). Thanks Dave!
Get Techipedia on your iPhone or iPod touch!
Tamar Weinberg is a social media enthusiast with a passion for all things tech and productivity. She provides consulting in internet marketing and manages Community Support & Advertising at Mashable. Tamar is also the author of 
{ 54 trackbacks }
{ 201 comments… read them below or add one }
Terrific article. I am not a programmer and can’t say whether this page I admire uses the FBML . However, I think Harley Davidson has a terrific grasp of the potential of social media. This page which was created by friends of mine at Overdrive. I don’t work for them or Harley, I just think they are doing smart work.
http://www.facebook.com/#/harley-davidson?ref=search&sid=643423954.2412610955..1
Cheers.
@sarahmontague
GREAT POST
USING YOUR TIPS AND TRICKS HERE: http://www.facebook.com/pages/CarbonPig/229820542432
http://Carbonpig.com
THANKS,
CARBONPIG
I’d be interested to hear your thoughts about ways I could improve this page, as I am planning a redesign soon. http://www.facebook.com/sunyplattsburgh
awesome tip. thanks, tamar. i’m trying this out today.
I would have to say that my favorite Facebook fanpage that uses Static FBML is The Social Blade Fanpage. It gives me easy access to their other sites.
Thanks for the opportunity to share, Tamar. Everyone, if you can share links with your entries that will help me look at your stuff. Can’t wait to see what everyone produces!
Wow! I want to employ all these great ideas. I’m still a little scared to start playing around with the html on Facebook, but maybe this article will calm my fears =)
Still working on Pages. I have a couple set up for books that I work for the publishing company.
http://www.facebook.com/pages/The-Light-on-the-Hudson/163673034022
http://www.facebook.com/pages/The-When-Diet/176008235137
Your impressive article moved me and I will create my 1st Facebook Fan Page soon! Looking forward win!
Great comments! I have tried using straight html and many things don’t work properly – would love your book!
This is a great article… working in the marketing biz I understand how valuable this information is.
Thanks for the info!
I like your tip about utilizing the Page image size, but when I try to upload a picture that is 200×600 or less, it tells me that I should pick something smaller, closer to a square shape! Is there a special hack I need to use?
Thank you for the great tips. Check out what we did with FBML on the HyperArts Page (http://facebook.com/hyperarts), and my other favorite is Room 214 (http://facebook.com/room214)
Ah sorry … http://companies.to/socialblade/ to go with my entry above. Choosing Social Blade and all. I have had to hear my daughter speak of this, and I not understanding, but I think this is an article she could have really used when creating the show page. I shared this with her, and she had said that it would have saved her much time, if she had this prior …thanks
@Analisa Room 214 is sweet! I love what they have done. How did you make the contact form on your fan page?
@Justin My boss added that contact form and he says that he used fbml & a form-handling script hosted on our http://hyperarts.com home site.
I wasn’t able to get to the (http://facebook.com/hyperarts )
Christine, it works here – did you go to http://facebook.com/hyperarts? It will immediately capitalize itself and show you an upcoming event.
Great info, Jesse. I purchased your O’Reilly FBML book and it’s been very helpful in getting our HyperArts Fan Page into shape. We used a combo of HTML and FBML in creating show/hide row of tabs along the top of our “HyperArts” tab, in essence creating a website on that one page, and your book was essential in getting a contact form working. We have also experimented with embedding Flash into Static FBML pages.
On our HyperArts blog, we have detailed how-tos for embedding YouTube videos and other Flash objects, as well as for adding and working with Static FBML. This app has exploded what is possible within the confines of Facebook. We are very excited about Facebook’s evolution.
Thanks! Seemed to work that time. Great post.
Great post, Tamar. As always, you share your knowledge and expertise in terms that people who aren’t programmers can use and understand. Thanks!
I use FBML to capture email addresses for Feedburner email subscription, see http://www.facebook.com/pages/Singapore-Part-Time-Jobs/151363290844 on the left column for my part time job portal fan page. I have had over 100 sign ups from that little FBML code plonked there
Fantastic Dipankar – how did you achieve that? Would love to do something similar for my own page….
I can’t take the credit, Betsy. Jesse is the one who made this possible.
Sure, I gave him the idea, but he wrote such a great piece!
Analisa, I wonder if Facebook is having issues right now. I can only recommend to keep trying – my Page at http://facebook.com/stay has a 200×600 image. It should work, unless Facebook has changed the rules recently.
Hi Tamar and Jesse,
I’m an intermediate techie and was playing with my page two weeks ago. Specifically, I gave fb:swf and fb:flv a whirl. In both cases the video played fine but the video controls did not appear. Any thoughts on how to remedy this?
Lakshman, I’m guessing it had to be some attribute you were missing preventing those from showing up. I’d have to spend some time looking at it to figure out what’s wrong.
Just try uploading a non-youtube flv or swf file from your hard drive. Do the controls appear?
Check out my own Facebook Page Tab http://www.facebook.com/SociaLingua?v=app_4949752878
Nice post Jesse / Tamar – even just knowing the optimum size you can make your avatar is a great tip, let alone all the other great ideas.
Wonderful post Jesse, I would like to know more about facebook check my facebook profile http://www.facebook.com/home.php?ref=home . Thnaks
Asheesh – do you have a Facebook FAN Page? Everyone’s “home” page is unique to them based on their news feed.
An example Facebook fan page I created for a client is here…
I used the FBML to create the custom tabs
http://www.facebook.com/JRLeisure
Only relatively simple, feedback appreciated
Thank you so much for your very clear information. I just now have to learn a little more about HTML & the world is my oyster! – OK, Facebook is. I have read other articles before and none explained it in the way you have. This is just fabulous, thank you!!
I just added a link to the booking-engine on the fan-page of a friend who owns a hotel.
At this moment I have to use a link you have to click on because the engine works in a iframe. I hope to find a better way later on so I can show the bookingmodule directly. Any idea somebody?
http://www.facebook.com/Pandhotel?v=app_4949752878
Renaat I don’t think tabs support iframes so I don’t think that’s going to be possible without reproducing the HTML right on the tab itself. You can probably do some interesting stuff if you set it up as a custom app (which FBML Essentials shows you how to do).
I’m pretty certain that you can’t use iframes in Static FBML pages. Sometimes you can get it to work in Preview mode, but it doesn’t save over. We had a discussion about this on our HyperArts blog, because a user pointed out this FB page: http://www.facebook.com/ChelseaFC?v=box_3&ref=search
that certainly appears to be using iframes. But I couldn’t figure out how they were doing it! I’d love to know if there’s a way to use iframes.
Tim, you may be able to do it with your own App, pointing a custom tab to an HTML page on a server somewhere. I need to test it, but may be supported in that case.
I just wanted to know how do i get my page URL as this
http://www.facebook.com/sunyplattsburgh
I get it to be as
http://www.facebook.com/pages/pagename/
Can someone please help me with this?!
Thanks for the wonderful tip! Will have to try this out when I try creating my first Facebook Page.
Farghana, go to http://www.facebook.com/username and you can change your username and the “usernames” of your Fan pages too.
Farghana,
As long as you have 25 fans on your page you can change the vanity URL. It used to be that you had to have 1000 fans… luckily they changed that rule
http://www.facebook.com/express
I used FBML to create a tab “chat” for our library’s facebook page: http://www.facebook.com/ltulib
Hello Tamar, in these days without sleep as I’m reading your book “Marketing in the social web” and I’m finding very useful
soon begin a marketing project on the social for a newspaper online that talks about economy
which social network you advise me how to use and more strategy?
thanks
Alex – not sure this is the right place for this since this is an ongoing Facebook contest, but check out the sidebar of this site for some ideas. Tip’d and Business Exchange might be up your alley.
Tamar / Jesse – Wow, thanks for taking something that could have been crazy complex and making it seem approachable and doable
.
Quick question: Is it possible to get your Twitter feed to automatically port over into your status update on the wall of your Fan page the way you can on the wall of a regular personal profile page? I’ve been able to find applications for selective inclusion using #fb but not an “always on” option for Fan pages. Any wise words?
Thanks again for such an informative post!
@Tamar
thanks a lot for your help!!
However one needs to acquire at least 25 fans to get a username for my Fanpage.
Great tips! I’m going to be busy this a.m. checking out everyone’s links and suggestions to see what I can add to the CSL site http://www.facebook.com/CTStateLibrary
Farghana, you’ll get there
I have been using Involver http://www.involver.com/ to put my twitter feed to a Fan page. Seems to work well. Question….Does any platform allow you to update multiple facebook fan pages from one dashboard? ie. seesmic,yoono,peoplebrowser?
My learning curve is still going straight up!
Also, this may be a dumb question but what is the fastest way for me to get up-to-speed on FBML is there a video?
Christine
Christine – HUGE thank you for the heads up on http://www.involver.com/, what a great resource. So kind of you to take the time to pass along. Best of luck on that vertical learning curve… sound like you are nailing it! With gratitude, Manisha
Excellent tutorial!
Thank you!!!
Hey, great tips. My son has a Facebook page for his Webpage so he knows about this already. He is a big help to me. Not only does he build links for me but he is an expert at HTML.
Jesse, thanks for the tip about creating an application.
I worked it out and can see it on canvas:
http://apps.facebook.com/bookatthepandhotel/
And I even have made a tab on the page for it, but I can’t see it in the tab. Any idea?
http://www.facebook.com/Pandhotel#/Pandhotel?v=app_228582677781
Any idea?
would luv to win book on FBML! Stumbling thru…
check out our Fan Page http://www.facebook.com/goldenknightspizza
you can order a pizza right thru this page!
Looking to clean it up quite a bit…learning how to code raw html (not a strength)…
I’m in a college town & so far folks like/understand the on-line order process…
What’s great about FBML is that you can do really great pages using just knowledge of CSS/HTML. Here’s an FBML page we developed for a client who operates a ski rental business in Park City, Utah:
http://www.facebook.com/skisontherun?v=app_4949752878
Cheers. Tim
I was following the directions and came to this part:
Now when you scroll down you will see a subsection called “FBML”. Click on the “Application Settings” link for that subsection, and another popover dialog will appear. Click “add” next to the Tab field and click Okay.
When I go into the Edit Page I see the app, but the applications settings for the link isn’t there. Any suggestions?
Dee,
I had already a FBML-tab so I didn’t follow the above instructions.
As far as I remember the tab was there directly after adding the FBML-application. Check it at your page by clicking at the double arrows at the right of your tabs. There should be a FBML-tab and a box-tab. You can switch their position between the other tabs by clickin on them. By editing the application (on the Edit Page) you can rename the tab and add content. If you don’t need the box-tab you can delete it on the page itself by selecting the tab and click on the pencil that appears next to the tab-name.
Sometimes you have to try a bit around, for me it is also sometimes not all that clear
thanks Renaat for the response, but I don’t see the application and I don’t have the option to edit the tabs. I hate being frustrated. I am trying to do this on my company fan page and I dont see the pencil for the boxes tab either.
Dee, First you said you saw the app, but not the options for editing. But then you said “I don’t see the application and I don’t have the option to edit the tabs.”
If you see the app in the list when you click on “Edit Page” then you really should see the options below the name of the app. If you don’t I’m not sure what the issue is.
If you don’t see the app FBML listed there, then you haven’t successfully added it to your Page. Remember, you have to be logged in as an admin (which you are, because you have the “Edit Page” option) and the Page has to be tied to a FB personal account, and you have to be logged in under that account.
As mentioned above, I posted a very detailed article on working with Static FBML.
Tim
OK, maybe you have to choose “add tab” instead.
I made some print-screens and put them on
http://users.telenet.be/renaat/temp/fbml.htm
I hope it helps (and otherwhise, Jesse’s book can help I think)
I have the company page for work to which I assigned my personal page as admin. I logged in to my personal page. This is what I see:
More Applications
Browse More
Applications you might find useful:Static FBML
For example what I see for the other options is:
Discussion Boards
Edit · Application Settings · Link to this Tab · Remove Application
Discussion boards enable your fans to get their ideas out into the open. Discussion boards let you know exactly what your fans and customers think and want. Get the conversation started now!
Renaat – the add tab option doesn’t help either.
The application looks really nifty and I am sure I would be able to use it, but right now it is not so useful. Any help from anyone would be appreciated.
Dee, it sounds like you need to add the application first. Check my blog post (URL in my previous response) for specific instructions and, actually, following them to the letter should bring you FBML happiness
Wow just made it .. great post HOPE I WIN!!
Favorite FB — because its true to the brand and completely functional is 1-800 flowers facebook fan page.
Thanks
MaryK
Just beat the deadline… whew…hope I win the book..
My Fav. FB Fan page is 1-800-flowers they do a great job of bring a consistant brand to fb and offer great functionality!
Thanks!
Mary Killelea
I’m sure the news that Facebook will be reducing the application tab width from 760px to 520px is going to affect this conversation. The change, according to their Developer Roadmap, takes effect “late 2009/early 2010.” My blog post about this:
http://www.hyperarts.com/blog/facebook-to-limit-app-tabspages-to-520-pixels/
Every FBML page presented in this comments thread is going to have to be overhauled so that it fits a seriously reduced width. I find this “land grab” by FB to be rather disturbing, but probably just another reason why you can’t bet the farm on external sites for your extended Web presence, because they give and they take away.
And what does Facebook intend to do with this additional 240px of screen real estate they’ve reclaimed? I, for one, don’t know. But I’ve got a lot of work on my plate reducing my clients’ application tabs, that much I do know!
Hey all, Jesse has announced the winners of the contest. They are Analisa who suggested HYPERARTS and Overkast who suggested Express. Winners will be contacted shortly! Thanks everyone!
Tim and Renaat,
Thanks for your assistance. I was able to get the application to work. I have three FBML pages actually now. Check them out if you would like at facebook.com/KCDEE5 we are a workforce development agency in a collar county of Chicago.
Thanks again.
Check out some interesting stuff you can do on your Facebook Fan page. Steps & code provided. Click on “Fan Page Utilities” tab and become a fan to check out the contents of the page
http://www.facebook.com/webwhispers
We can’t seem to upload photos the size you recommended on profile pages. Do you know if Facebook has changed their restrictions on image size? The error specifically noted “choose a size closer to a square” when we tried to replace the profile pic.
Margie – I just had a Facebook page created a few days ago and had no problems getting the 200×600 dimensions. What’s the size of your pic?
Great article. Congrats.
Check out my page, it includes video as well.
Page: http://www.facebook.com/#/BudgetPulse
Help! I have searched and searched. I am looking for a five star rating system that can rate each comment on a Facebook Fan Page. I would really like the individual who made the post to be able to request (by forwarding the post to friends) more ratings on their post. I found a rating system but can’t figure out how to do it. Has anyone seen such a thing?
Christine
christine@jtmar.com
Hi Tamar, I have just finished my first fan page thanks to your article. It’s not fantastic but it’s a start:
http://www.facebook.com/StevenPAitchison
Still pretty good, Steven
I should really make one someday!
Looks good Steven! My only recommendation is that you invite visitors to become a Fan somewhere on your welcome page. That will be the first place they see so you want to give them a request to take action! Keep up the good work!
“My only recommendation is that you invite visitors to become a Fan somewhere on your welcome page.”
My Executive Director doesn’t want us to use personal credit cards to pay for things. How can I:
A. add the become a fan to my welcome page
B. “get more fans” without using a credit card? I have suggested it to my friends and asked our fans to suggest to theirs. but…
check mine please http://www.facebook.com/KCDEE5
Dee, you can’t add a become a fan button to the tab itself, but it’s already at the top so you just have to point them to that.
As far as getting more fans, I could write an entire post on just that (and there are already several around the internet if you search for them) – the key is to post semi-frequently (but not too much), and engage your audience. If you post interesting and unique content they will follow. Be creative!
Thanks for the advice Jesse I appreciate it. I will get a fan me put on at the top somewhere.
Hi
I hope that someone can help me here.
I have just given my Fan page ( Organicdreams – cosmétiques bio ) a URL ( http://www.facebook.com/organicdreams.cosmetiquebio ) but it dosen’t work.
I cant get in the fan page, from the url or from my personal account, where all my Fan pages are. Nothing is working.
I cleared cookies etc in all my browseres it dosent help. Sometimes I can get in for 2 min and then it dosent work again??
I know that some peopel can get on the Fan page without any problems. And some can’t….
I cant get in no mather the browser I use or windows / OSX. I tryed other FB accounts nothing is working?
Yes sometimes I am lucky but then the minut after I can get in again??
Whats going on???
And I tryed to find som contact/support for this FB without any luck..
A big company like this you should think that they clould afford to give SUPPORT to there clients.. !!
Thanks
Anders
I’m not sure I understand that you can’t get into your fan page, Anders. I can see all parts of your page just fine. What happens when you can’t get in?
And as for Facebook, I’m not sure it’s that big. The number of staffers it has definitely doesn’t scale with the 430 million (!) members it boasts.
Hi
When I try to go to the fan page from my personal account or any other account i get this message:
“The page you requested was not found.
You may have clicked an expired link or mistyped the address. Some web addresses are case sensitive.
* Return home
* Go back to the previous page”
Also if I try to loog on direct in the browser with the nes URL.
But sometimes I am lucky and I get in but next time I try I get the message again that and can get in..
Most people can get in but some get the same message as I.
Sorry for my english
best regards
anders
This has not happened to me and I loaded it several times. I have no idea why that is happening on your end but the issue sounds more specific to a Facebook error versus a FBML coding problem which is what this article is about.
Ideally, you should open a support ticket with Facebook and be clear about what happens (since you didn’t tell me what the issue was until I asked). There IS a help area — and deep in there, there’s a way to contact Facebook.
Good luck!
Thanks for sharing! Adding a second FBML box in the sidebar is also pretty cool idea.
I didn’t read EVERY comment but I couldn’t find anything on this…
People are having a hard time finding my fanpage! Some find it with out a problem but some cant see it even after I invite them directly. Is a fan page under the same privacy settings as the creator’s main Profile Page? I also am not a fan of my fan page. Does that matter? Any suggestions and feedback on whether or not you can reach my page is appreciated.
Hi James,
I’m not sure if this is a specific coding issue; it sounds more like a technical issue. When you say “some can’t see it,” what happens. Does the page not show up? Does it give an “unavailable” error? This information would be helpful.
If you’re not a fan of your fan page, it’s no big deal – there are some pages where I’m a fan and some where I’m not.
btw, I searched for James Patton Realtor and your page came right up.
Great post.
Thanks for sharing.
I created several fb pages with this inspiration.
Thanks again.
How about this one?
http://www.facebook.com/pages/LETS-SEE-IF-YOU-HAVE-A-SENSE-OF-HUMOR/333205119938
anyone know if you can insert javascript into a facebook fan page?
Thank’s
Can you add more than 1 FBML page to the same fan page
Gary, yes, you can add more than one tab – in the static FBML app, I believe there is a link in your settings to add another. If you are writing your own using the Facebook API you have to do it through a second application you would create.
Ana Cristina, you may be able to get away with some FBJS, but I don’t know if the Static FBML app supports that. You may have to do it via your own custom application to get the full effect. Look up FBJS on http://wiki.developers.facebook.com to learn what you can do.
Gary, You can add multiple instances of FBML pages/tabs with one installation of Static FBML. When you are in edit mode in the FBML tab you’ve created, you’ll see at the bottom of the page “Add another FBML box” – this will create a new tab. You might check out our Static FBML Tutorial. Cheers….
thank you very much for answering my concern.
hello all
greetings from Rio de Janeiro, Brasil!
It’s amazing how Facebook can help us promoting our institution, and I’m really enjoying the post and comments, thanks a lot for sharing!
i’m already working with FBML with HTML, now it’s time to learn about FBML language, hope i’m success! please take a look at the Fan page i created to a project I’m working with: http://www.facebook.com/?ref=home#!/pages/Pacto-pela-Cidadania-Favela-e-Cidade/139858726236?ref=ts
cheers
I am in the process of learning all this fun stuff. is it possible to take one of the photo albums and placing it in its own tab?
Hi Ourania, You might want to set up a Flickr acct, upload your photo album there, then read our new tutorial on how to embed a Flickr slideshow on a Static FBML tab page. Cheers….
Thanks, it was easy as can be.
Hey, how do you make it so only fans can see photos?
Jake:
You can use this FBML to show content only to fans:
At the top of your Static FBML page:
<fb:fbml version=”1.1″>
Wrap the content you want to hide from non-fans with:
<fb:visible-to-connection></fb:visible-to-connection>
Then end your page with:
</fb:fbml>
and that should do it!
Tim, it isn’t working. What I have is this:
Step 1: Suggest to friends.
Step 2: Go to info.
Step 3: Learn to make the coolest cake!
http://www.facebook.com/*********************
And when I do that, I log on to my other facebook account to see if anything had work, and on my FBML tab it shows nothing. I don’t know what I’m doing wrong.
Wait that didn’t come out right.
I have what I want covered in the thing () and when I had the thing at the beginning, and ending, nothing shows up.
It’s not letting me use the FBML on this because I can’t see it for some reason. So basically I did what you told me and it shows my FBML tab blank.
Jake, I can’t help if I can’t see the code, and your description isn’t clarifying it for me. Perhaps you post the code you used on your Static FBML page?
Try pasting only this into your Static FBML tab, in the text area (as opposed to the “title”:
<fb:fbml version=”1.1″>
Here is some content visible to all.
<fb:visible-to-connection>And here is some content for fans only.</fb:visible-to-connection>
</fb:fbml>
If you still see nothing, I’m not sure what the problem is. I assume:
Your Static FBML is added to your Fan Page.
You’ve set it up to show up as a tab.
It’s not allowing me to paste my codes in, and I do all of that in the text box, not title. It just isn’t working.
I seem to be having the same issue. I copied and pasted
Become A Fan
BODY
When I paste the above I see nothing on the page at all.
All the text and images in the body are gone.
sorry the code I just pasted did not show up. LOL
You can’t just dump code into a comment. You have to replace each “<" with "<" (no quotes). Otherwise, the blog tries to parse your code, can't do it, so shows nothing. That's why my code shows up …. because I replace those characters. Try it!
Oops. It rendered my substitute for the “<" character.
Substitute < for <.
There….
Jeez. It really isn’t letting me get in what to substitute for the “<".
It's: &+lt; (without the "+").
Sorry!
Ok Tim, I’m just going to show you what I have, but I won’t have any ”
h1>u>Step 1:/u> Become a fan. h1>
h2>u>Step 2:/u>Suggest to friends. h2>
h3>u>Step 3:/u>Go to profile pictures and LOLOLOL ! h3>
fb:visible-to-connection>http://www.facebook.com/********************/fb:visible-to-connection>
/fb:fbml>
When I do this, it shows my FBML tab blank.
Ok, here is what I have then:
Step 1: Suggest to friends.
Step 2: Go to info
Step 3: Learn to make the coolest cake!
http://www.facebook.com/*********************
http://www.facebook.com/album.php?profile=1&id=348121097682
I really can’t do this. I have like no idea what I’m doing.
Could you please make me a FBML thing with my information in it, then can you send it to me via email?
Thanks for this amazing and crystal clear tutorial on how to use Facebook for branding purposes.
This tutorial could easily be turned into a course or ebook, because it is very easy to follow and apply.
Any tips on embedding a video?
Hey Gary,
Here’s everything you need to know about embedding video & flash in Static FBML:
http://www.hyperarts.com/blog/how-to-embed-youtube-videos-flash-facebook-static-fbml-pages/
Will this method also work for a flash audio podcast player?
Here is my newest FBML project http://www.facebook.com/SoftballDrills
I just finished http://www.Facebook.com/FastpitchTV I embedded the flash player in this one.
How to make a fanpage like this ? anyone tell the fbml code for this page
http://www.facebook.com/ifan.page.design
How do you email fans?
You have spotted the biggest gripe I have about Facebook Pages (versus Groups). There’s no way to do it.
Actually, I think there is a way to do it. If you use the
<fb:share-button class="url" href="http://www.facebook.com/HYPERARTS?v=app_7146470109" />
You’ll see an option in the popup, bottom left, next to the envelope icon, “Send as a message instead”. Selecting this option for your share will generate an email from Facebook to your selected friends, notifying them of the message. Of course, any of your friends that opt out of this type of notification, via in the top left corner:
Account > Account Settings > Notifications
won’t receive the email. However, by default the option is to receive these emails.
My gripe is I cannot fan a page with my fan page, I can only add it to my favorites. Most of the pages that I add as favorites would add a benefit to my fan page (and fans) if they would appear in my fan page stream. I also cannot figure out how to share something from my personal page recent feed to my fan page. Any ideas?
Yup! Those are other gripes specific to Facebook Fan pages. I can’t code a Facebook page at all but I do see a lot of shortcomings in how Fan pages were set up. The fact that Fan Pages cannot Fan other pages is a shortcoming. The fact that if I admin a fan page and send a status message, it shows up as the admin and I never have the option to reply as myself is another huge gripe. And what about fan pages with thousands (or hundreds of thousands) of members? I can’t even search for them.
Facebook gives you a nice opportunity to customize your page via FBML. That’s what this article by Jesse was about. But the core functionality of Facebook’s Fan pages leaves much to be desired.
@Tim Ware,
Tim,
Thank you and further question, under which tab that I insert the code?
Don
Don Don, Strange question…. You can insert the share button code anywhere on a Static FBML page.
Actually the maximum size allowed for profile picture is 180*540 instead of 200*600…I’ve just tried it
Mileage varies as to max image size for profile pic. The other day I uploaded a 200×600 image with no problem. But I’ve had trouble uploading images that were less than 200 and no taller than 600, so it almost seems arbitrary, although I’m sure there’s some Hidden Facebook Logic at work.
I’ve been attempting to upload a 200×600 image to FB with no success. Did you save it as a jpg, gif, or something else?
Martha – later on in the comments, someone mentioned that 180×540 is better.
is it possible to change the order of the tabs, once they have been created?
I was happy to read that I had already done most of your tips and will go and try out the ones I missed.
thanks
I had no idea this much cool stuff could be done on Facebook
http://www.facebook.com/pages/Page-One-Business/140365725662
Folow the steps to search for “STATIC FBML” then add to my page but now i do not see the “FMBL” application. All I see is “Static FBML” and it does not enable the settings.?????
My page is @ http://www.facebook.com/pages/edit/?id=376852176849#!/pages/edit/?id=376852176849
Thanks for sharing and any help on this department.
Great information. I’m tackling the FBML next however I wanted to know if there is a way to edit the information under the info tab? I’d like to expand into more detail instead of just hours, website, address. I’ve seen it on other fan pages but I’m at a loss on how to get there.
Thank you!
I just created a fan page on fb and dont know how to see all the comments and posts left by my fans. Why dont they come to me via email or pop up like the ones on my personal page do? Is there a setting I’m missing to make this happen? Thanks!!!
Same problem as Shannon. How do I make this happen!
Do I use a FBML page to have my RSS/Blog feed? I tried to find one in the apps section and my anti-virus went nuts because the one I picked was chock full of trojans and viruses. If I don’t use FBML is there an app someone could suggest? Or another post somewhere that I can read?
Does anyone know if there’s an easy way to rate fans by the following two criteria?
a) Time spent on the fan page
b) Provided the largest number of answers
TIA.
me too make 1. check it here. http://facebook.com/eNewszFans
Hi,
Sorry for bothering you with such a problem but it’s anoying me. I just made a test fan page to try out this FBML feature. But i can’t add to my page. It’s showing just Add to my page’s favorites.
. What should i do?
Thanks a lot!
Thank you for this!
Have you ever looked at your site in Firefox? You probably should. It doesn’t speak well for a “tech” consultant to have a site not optimized for Firefox. Good article though
“Brian,” I’m approving your comment since your email bounced. Thanks for making it impossible for me to follow up for specifics.
First of all, I’m writing my response to your comment on Firefox. Second, based on my analytics, exactly 49% of my site’s readers use Firefox, which is the browser of choice.
Since I don’t see any issues while using FF right now and I’ve never received reports of this prior to your complaint, well, there are no issues to report and it’s probably specific to something you’re running on your end. Or maybe the page didn’t render properly when you were loading it.
If you’re interested in writing off topic comments without any detail, that’s fine — it’s not relevant to this article, though, and I really should not thus be approving it. If you want to give me more detail, that would be appreciated. I have a contact form for a good reason, and often because comments like yours don’t have a place on the blog posts themselves. You probably knew that.
Further, I’m not a “tech” consultant. I’m a marketing consultant. You can read more about me here.
Have a nice day.
FYI; i’ve had this issue with my company’s website; FF for MAC = EL BROKE-O; something with the CSS interpretation of the MAC OS w/ FF that it just doesn’t like.
Thanks for the tips on creating a Facebook Fan Page using Static FBML.
I’ve already created one for an small company that manufactures analog effects and stompboxes.
Although a bit basic, Static FBML is a nice tool to improve one’s company brand presence in Facebook.
Can any one tell me how can i show my website to my fanpage like this:
http://www.facebook.com/sunyplattsburgh
Good little guide. Thanks for putting together. Ted
Editor’s note: Your name is Ted, and you were asked to provide that instead of trying to rank for Yorkshire Web Design. My blog policy is here in case you were wondering if I had a right to do that.
This is very helpful for me.. Thanks
This is the most comprehensive write i have ever read about creating a fan page on facebook now i need to follow these instruction to create a fanpage for my new website
I am trying to get the hang of FBML and pasted in this code that works great on my blog:
For Assistance Contact Laura Morris Asea Gold Executive 801-676-9335 <A HREF=http://www.CellularDiscovery.net CellularDiscovery.netYet the hyperlinks do not display on my fan page. The rest looks fine.
How do you create Hyperlinks that display with FBML?
Really great article! my only question though; as i only briefly skimmed this and have added it to my “come back and fully read” list; is what are the MAX dimensions (width-wise) to the FBML “boxes”? I’ve added one myself and put an image in it, and the thing chops off on the right hand side as it is obviously too big.
Everything I could possibly want is in this article, i’m excited for my blog reading session tonight.
Thanks for this article. I have been working all day on my Static FBML pages. This answered a lot of lingering questions I had.
However there is one question I am still confused about. I understand that once someone “Likes” a page, the default landing pages changes from the Static FBML tab to the Wall. Is there no way to change this? I really don’t want the first thing my fans see to be the Wall. Eventually I would like it to be banner ads or promotions for our on-line store.
Also is it possible to turn a custom image into a Like button? I have an image that ask fans to like the page. I put it in a custom FBML box on the Wall and on my Welcome page. A friend of mine suggested making it work like the “Like” button at the top. I thought it was a great idea, but I can’t figure out how to do it.
Here is my page if you would like to take a look.
http://www.facebook.com/pages/KirbySupplycom/121815797829037
Thanks for any help you can give me.
Again I really enjoyed your article. Lots of help for this newbie.
Hi Kandra,
I had the same question as you and what I did was I went to the hellp center, then type default in the search area and I did get the answer to it. Good Luck!
great tutorial. learnt a lot. going to implement it on my fan page at http://www.facebook.com/pages/wizBUZZ/324013417350
What great information. I am new to IM and facebook but do wish to increase my visibility. With the information you have provided, I will print it out and implement it myself or with the help of a webmaster. Thanks.
The FBML application is indeed a powerful tool for businesses that are trying to expand their customer base. It turns an otherwise dull page into something that potential customers will remember to come back to. This is an excellent tutorial, Tamar.
If I might suggest an even simpler way to customize your fan page, FaceItPages ( http://www.faceitpages.com ) is a DIY service that allows one to create designer business pages, which reaps the full benefits of the FBML app. It’s a great tool if you’re not familiar with FBML or HTML, or if you just want a quicker way to get a great looking fan page.
Thanks for a very useful article! I just finished writing a blog post about “How to Create the Perfect Facebook Profile for your Business” and I was pleasantly surprised to see you also offer great tips on this topic.
Some people make it so you have to like the page to see something in a tab, for example a video, How do i do this?
Here’s a tutorial on doing exactly that:
http://www.hyperarts.com/blog/facebook-fan-pages-content-for-fans-only-static-fbml/
This is a great tutorial, I utilized this for my own company The “Adholics” a couple of months ago and just remembered that I never thanked you for posting this great info. I created a custom welcome and partners page as well as a larger Avatar.
Check it out when you get a moment, would love to hear what you think. http://www.facebook.com/pages/Minneapolis-MN/The-Adholics/276466962727?v=app_4949752878
Cheers,
Josh Fedie
The “Adholics”
@TheAdholics
Why my gif pic wont move ?
I don’t think Facebook supports animated GIFs.
Hi…Nice Info And I was Make it to my fan Page in http://www.facebook.com/Kirana.Group Thank you for sharing……
Cool Post!
Thanx!!
How do I add a link to my profile Picture?
Create an avatar here and it will follow you from site to site: http://en.gravatar.com/
I am going to follow these directions to the letter when I set up the Facebook fan page for Health and Safety Source.com. Thank you.
Great tutorial and I’ve used lots of it to benefit my FB page.
What I can’t seem to get working is the fb comments.
Do I just add to my FBML box and that its. Or do I need to create a box elsewhere, upload it and then connect it in like I did with my .swf??
Any help gratefully appreciated!!
U
Tamar,
Thanks for sharing this. I’m hoping to see more current updates soon. perhaps a follow up to this where you go deeper on exactly how, why and whats working in a marketing and engagement sense to create the perfect fanpage.
Having the simple tab, invite friends and some pretty design is a nice start but there seems to be alot of great stuff out there, many companies really having great results, but how exactly are they doing it still eludes most of the people trying.
Are you possibly working on another book where you can share some more of your hard won and time tested results, strategies and insights?
For me a perfect page is one that really inspires participation, collaboration and ultimately leads to sales and building and reinforcing good customer relationships.
Naturally such a “how to” would be really valuable, timely and probably a hell of alot longer than your average blogpost.
Thanks and take care,
bryan
p.s im glad i read through some of the comments, there’s some good code + questions/answers in there.
pss this page renders just fine for me in firefox v.3.6.6 for mac osx 10.6.4 . not sure what that guys prob was.
No book being written right now — I have more plans for other things. But this post was really well received.
Hello Tamar,
This is a great tutorial. I have not been able to fix an issue. This i regarding the flash. The flash does not appear/load unless I click on the part of the design where I have placed design.
http://www.facebook.com/pages/Dynast/113866025324760?v=box_3
The code below, I am not sure where I have gone wrong
var swf = document.createElement(‘fb:swf’); swf.setId(‘fbcharacters.swf’); swf.setWidth(’100′); swf.setHeight(’100′); swf.setSWFSrc(”http://thedynast.com/fbcharacters.swf’); document.getElementById(‘swfContainer’).appendChild(swf); document.getElementById(‘fbcharacters.swf’).callSWF(‘asMethod’, ‘one’, ‘two’);
I guess FB must have changed something as for me not even Steven’s first basic example works.
I dont seem to get anything else than “welcome” and the further reading suggestion.
Any hints please. I am a html dummy.
Thanks for the tutorial. I want to give a specific username for my fan page but facebook is not allowing me. Maybe after I have some fans.
You need 25 fans, Kavita
Thank you Tamar. I just need to get 25 fans for my fan page.
Nice post, i must appretiate , but still i guess the big task will be optimising graphics, the size , FBML layout and knowledge of all the available apps that you can add in your page. If its just a graphic, its fine, BUt if you have a complex page, i guess it would be good to leave it to expert facebook fanpage customisation companies like SOCIONIKS for deleveloping your professional custom facebook landing page in fbml. Additioanally they also help you to get good amount of fans. Not only i got my landind page up and running, also my current fans count is 12332. The best part is that they are replying to my posts.I would suggest to better go for professional companies if you are very serious about business, for simple and normal pages, you can do it yourself.
I wish I knew how to find my FB URL. Can someone help?
Otherwise, this has been a great tutorial. I was able to add two separate tabs about our business: “Who we Are” and “Our Clients.” Still have work to do but it’s a start. I plan on adding “Our Services” and a tab for “policy/disclaimer.”
You can find us under PreEmpt Career Solutions.
By the way, I still have an old FB account with a separate email address that I’m using for my current account. It is inactive but I still get invitations to connect. Anyone know how to quit this?
All the best to everyone and don’t forget to visit us on Facebook!
Debra Fitzwater
PreEmpt Career Solutions, LLC
“It’s Not a Job. It’s a Federal Career.”
Office: 540.327.7527
LinkedIn Profile: http://www.linkedin.com/in/boxer1
VisualCV URL: http://www.visualcv.com/boxer1
Follow us on Twitter: http://twitter.com/Fed_Career_HR
Interact with us on Facebook!
Not sure I understand the question. Do you want to *assign* a URL or do you want to find the URL on the top of your browser address bar?
If the former, I actually addressed this earlier in the comments.
if u meant fb usename.. goto facebook.com/username and select ur username
Yes sir, that’s what I said.
p.s. As per my blog policy, please use your real name. Clearly you wanted to be totally anonymous but I like talking to people, not gibberish names
haha, sorry for that.. i am too lazy
anyways real name mohit and i am facebook expert.. feel free to ask any qustions regarding facebook or any other social media
ha, thanks
Nice to meet you, Mohit!
There are still a ton of Facebook questions that are on this post if you wanna chime in
Hello people.. very nice post to get started on FBML pages,
however , there are many features that you can add to your FBML page for getting lots and lots of leads, attention, signups and lot more.
From shopping carts to music players … videos to twitter integration and much more is possible.
see a page that i made :: http://www.facebook.com/Miss.Diamond.DJ
you can see how you can use variety rich features and customization to make your page appear exclusive!!
Also , many pages that people listed here, they forgot to set up default landing page to the fbml page!!
Just to tell you importance of fbml landing page , it was found in a research that conversion rate of visitors to “fans” was 70% with landing page compared to 35-40% without it!!
see another simple design of mine :: facebook.com/clevertonmarketing” .. use graphics with texts like “clik like above to get deals ” etc . This will attract more people to become fans of the page..
if you want to add a free shopping cart to your page rather than paying people like me (:P) try app called ecwid (http://www.ecwid.com) . You can start selling products on fb page!
similarly , use involver.com , appbistro.com etc to get more free apps to integrate to facebook pages.
Some asked about forms, well for that either you can use readymade web forms like jotforms(http://www.jotform.com/ — it provides FBML code to embed) or you can built your own style forms if you know some basic html things.
Another good thing that you can do with FBML page is make it tabbed, like http://www.facebook.com/pages/BrandAdvance/131117663581548?v=app_4949752878 , so that you can get a complete mini site inside that!!
Though there are many possibilities, but the FBML landing page..i feel must not be such that it tends to redirect visitors to main website, twitter profiles etc.. as Your ultimate aim is to get more facebook fans
So add as many feature as u want in separate FBML pages..but the default tab..keep somthing that helps you to get more fans!!
Hello Mohit and others,
I am looking for the basic FBML code to create the tabbed landing page that you mentioned. Any ideas? If I see a sample I can usually figure it out:)
Christine
Christine, You might check out the code templates we offer for sale at HyperArts. They’re professionally coded to work across all browsers & platforms: http://www.hyperarts.com/fbml
Cheers!
We present to your attention our series of FREE Facebook Page Templates. Facebook FBML page templates is a good way to make your page attractive on facebook. Social Media have a big influence on all of us and our days it is not enough to have an attractive web site. If you want to be really successful then you need a strong page on Facebook. You can find here good quality facebook page templates that you can use to create your own page on facebook.
I tried uploading a 200X600 wide image, but Facebook tells me “Your picture is too tall or too wide. Try to pick something closer to a square.” I’ve also reduced the height and width and gotten the same error message. Why is this happening and what can I do?
Thanks
Ilene, some people note that 180×540 is the maximum size — I’m not sure what today’s recommendation is.
Thanks for the quick reply, Tamar. I actually tried loading an image that is 115×350, so according to those new dimensions, it should still work. I looked on Facebook help and didn’t see anything there either.
I see other pages with quite large, vertical images, so this is puzzling. Maybe I’ll contact some of them directly.
Creating a page for your business on Facebook is a way to reach potential customers all over the country. Thanks for Useful Information Shared here..
Editor’s note: I have a strict blog policy and you didn’t follow the Commenting rule. As such, no traffic for you. Thank you, Offersking.
does anyone know if you could set up your facebook page (business page) so that only those who ‘like’ your page can see the content on it? i have heard of something like this before, but don’t know anyone who knows exactly how to do it. any help would be very much appreciated! thanks
Here’s a clear tutorial on displaying different content to fans and non-fans: http://bit.ly/94Hpq6
Cheers.
Thanks a lot Tim!
Hello,
I just need assistance for the following thing : i would like to remove the left column on the FBLM page. I would like to have a big image. Actually my image is cut.
http://www.facebook.com/pages/Papangue-Project/407921840440?v=app_4949752878
Jeff,
FB has made the announcement that all middle columns will be limited to 520 pixels. SO those of us who have pages already designed will have to work on making our width only 520 pixels. You may be experiencing the smaller image because of the pixel change.
Thanks for your answer.
Thank you for the tips. I just created my first facebook fan page, but I don’t have any fans yet, so this will help me.
i want to give a prize to mi 1000th fan on my fanpage… but how do i know who was the 1000th fan?? how do i know his/her name??? how do i find him/her??
There’s no easy way to tell, but the last person who joined is listed first under “See All,” I believe.