This article is updated. If you are reading this in 2011, please see the new how to build a perfect Facebook page article.
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!
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?
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? 🙂 My learning curve is still going straight up!
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.
🙂 thanks Tamar
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.
Here is a neat example with the code.
http://www.facebook.com/webwhispers
Check it out under the drop down “Ajax form”
well better than taking so much pain..
i guess you guys must check this out !!
http://t.co/Vze10WN
i used this business package from socioniks and page is nice..
Tamar you are an expert but i guess we can better go for paid options
if we need it to get done fast
Sorry for my suspicion, Robert, but that looks really spammy. Did you really use it or are you promoting your own wares?
Also, please see my blog policy as I do not allow shortened URLs.
Thanks for a truly amazing post! I am really into social media and Facebook Marketing! It’s a challenge to keep up with this ever changing concept known as social media, so thanks to posts like your and resources like http://www.facebook.com/thefanpagefactory I am able to keep up as best as possible! Thanks again! Enjoy.
Aaron
I’m conducting a contest in my facebook page to attract people. I’m already using the FBML. I also wanted my visitors to be redirected to the “contest tab” when they visit my page. Facebook is really cool in promoting your stuff. This gives small businessmen the equal opportunity to promote their business. Thank you for sharing this very helpful information.
I want a Fan page with multiple custom tabs. Under each tab would be a wall for posting. ( can create the tab using FBML) but I don’t know how to create the walls.
To have comments that are similar to your Wall, the closest you can get is the fb:comments FBML tag: http://on.fb.me/9YCh5e
Click on “Documentation” to get more details on using it.
Hi Tamar,
First I wanted to thank you for your amazing article! I was wondering if there is any way to make sure that the default fbml tab remains the default tab for those who clicked “like”. Right now it automatically redirects them to the wall after clicking “like” how can I keep them on the same fbml tab?
I saw this is working on the WSJ page and was wondering if you know what they did to get this done, here is their link:
http://www.facebook.com/wsjonline?v=app_4949752878
Thanks,
AK
You need to thank Jesse for this article. I didn’t write it 🙂 I’m not the FBML expert so I’ll let someone else chime in.
AK: Once someone Likes a page, the default landing tab for that user will be the Wall, and there’s no way (at this time) to change that.
I think you’re confused about the Wall Street Journal page. Once you Like the page, the default landing tab is the Wall: http://www.facebook.com/wsjonline
You may be accessing that URL with “?v=app_4949752878” at the end of it, and this will take you directly to the News tab.
But the URL for the WSJ page, by default, is simply: http://www.facebook.com/wsjonline
I hope this answers your question.
Hi Tim,
Thanks so much for the clarifications!
Have a great day!
AK
it is great, i still can’t bulid my facebook well, if anyone here can help me, pls contact me. i want use the facebook to improve my business. thanks!
Hello. I am hoping someone can help me with a tables issue. If you view our page in Firefox or IE8, there are white lines or gaps between each table row. I coded the FBML in IE7 (gaps don’t show up) and didn’t realize the gaps were showing up until I viewed it in Firefox.
I’ve done Google searches galore, but can’t seem to find an FBML fix that will work. Any thoughts?
Thanks!
Hi Josh. Add this to each
<img />tag: style=”display:block”<img src="URL-TO-IMAGE" style="display:block" />that will cure this known Firefox issue. Cheers. Tim
Hi, I’m having an issue being able to do anything with the FBML tab. I can add or delete it, that seems to be it. Can’t rename or edit contents. Am I missing something?
I suggest you check out this great Static FBML Troubleshooting resource: http://www.hyperarts.com/fbmlguide
HELP.
I went through all of the steps, but can set the default page. I’m not presented with that option. It’s missing. I see the “Default view for wall” pull down menu. and the “Wall Spam Filter” but the default option is NOT there.
What do I do?
I had to kill that page and start over
This is a great article! I was debating on buying software for $67, but I think you answered all the questions I had.
I would love to win the book!
I just started using fbml and just look at what I did: http://www.facebook.com/#!/pages/Graphic-Design-by-Robert-Hazelrigg/129805600410821
Sorry Robert, that was December 10, 2009 – this post was from last year. 😉
It is a great article. Earlier I was using paxxxxxo’s free service which show a footer line as credit to them below the page.
I landed on this page from Mashable (Build a Facebook Landing Page for Your Business). Thanks to them for referring to this article. Thanks to you also.
Thank you for sharing your insight on getting started customizing my FB fan page. Also great to see other people leaving links to their Facebook pages so I can see what they have done with your tips and anything else they have done beyond. Makes me so shy to share mine…thanks to your tips it be “perfect” soon enough.
cool article… Thanks!
Great article for those of us that have both a website and a facebook fan page. Always looking for the latest information so my wofe Carole can add to my page as well as her pages.
Keep up the good work keeping us informed
Thank you for the article, very informative. I am very new to HTML, and thusly FBML. I would love to design a fan page for my clients like the HyperArts page (it’s amazing), but I’m very new and don’t know where to start really. What are some good resources that I can either find code to use, or that will direct me on how to write the code myself. Also, I’ve read that FBML is dying…is that true, and should I be focusing my efforts somewhere else? Thanks for any help you can give me!
Hi Dash, HyperArts sells the multabbed subnavigation template on its website. You should know at least some CSS and HTML to work with them. And, for your CSS styles to render in Internet Explorer, you’ll need to host your stylesheet file on a server.
As for FBML “dying”, the concensus among developers is that Static FBML and the popular FBML tags should be around for some time to come. You can read my article on the future of Static FBML for more info on this.
Thank you for the information. Here is the difficulty I am having. When I clicked your link to go to Static FBML it tells me No Results. I get this same thing when attempting to use Free Templates by Facebook. There is a Religious one (the only one) and I like it. Would love to have it as my page. I have lots of informative Religious information to offer the world. How do I get this to work when it won’t recognize my christian page or Welcome page?
Very exciting!! I’m going to work on using FBML right away and get a fan page set up.
Editor’s note: Thanks for your comments. However, as stated in my blog policy, I have asked you to use your real name. I do not think your name is “Pensacola Bankruptcy Attorney” and have edited your comment and URL as explained in the blog policy. Oh, and I stole your link.
Thanks..its very informative article
Hi… nice blog post, but I’m still struggling getting my facebook set-up. I find it very complicated and half the time when you try to do something, it just doesn’t work. For instance, I didn’t know that when you “like” someone’s facebook your full name comes up right on their public page. I’d like to change that to show just my first name… but from what I can see, it does not let you do that. Plus the ‘permission’ settings are not all customizable. … I’m not a tech savvy person, so I find it very time consuming and frustrating to keep up with all the features. There are lots of writings about how to use it, but I’ve never come across one on how to set-up as a 1-2-3- steps. Does anyone know of any?
Hi DrDiane,
This is hard to really answer as I don’t know a good privacy settings article. As far as full names, I don’t think there’s an option to opt in with your first name only. Unfortunately, Facebook didn’t foresee this as a problem.
I’m trying to create a FBML page, which I’ve done, and have created the ‘picture’ I want to drop in. But, I want to be able to have a type of ‘hot link’ that when someone clicks on the “Click here to be taken to our….”, it takes them to my store. This is not an area outside of the ‘picture’ – the Click Here is within the picture. Do you know what I’m saying?? How would I do that?
My FB page is either LaurieL Photography or Maternity and Newborn Photography Prop Shop – if you want to see what I’m trying to do. Thanks!
Tamar
What is the fix for our fbml pages now that the new pages are being implemented? Do you have a tutorial for iframes?
Can’t say I know – I had my Facebook developer gurus help out on this post and on the comments here. You’re not the first one to ask, though, and I’ve asked the others to write comments on this post (they haven’t; guess they didn’t see I didn’t write the post!). I encourage the developers to help out 😉 (I’ve actually asked one of the resident gurus to contribute a guest post! Let’s see if he takes the bait!)
Hi Dee, At HyperArts we’ve just posted a detailed tutorial on creating an iFrame application for a Page tab: http://bit.ly/fn4TFJ
Cheers! Tim
Effective 3/11/2011 you will no longer be able to install the static FBML application. I suggest using http://www.facebook.com/revealtab as an alternative. It supports much of the functionality of the Facebook application and provides some additional functionality including placing the like button in your image.
Thanks for the post, I’ve recently made a fanpage and was trying to figure out how everyone else has theres looking so nice.
they hire a graphic artist like me;-)
http://www.facebook.com/thegraphicsguy
This is all old news now that FB has changed everything. Why don’t you update the information??? Most of it doesn’t even pertain any longer
Laurie, I’m not the Facebook coder. 😉 I’m waiting for Tim to write his guest post!
Thanks for the advise! http://www.facebook.com/claytoy
With the new fan page is easier to create facebook page,
just type in “Static HTML iframe” in the facebook search bar and follow the instructions. It’s free
Editor’s note: Your name is not a bank, so I removed it. Next time, please follow my blog policy.
I did make a discovery that if you have the static FBML on your page, you are still able to make edits. I tried to add a new FBML page and was unable to do so. I am going to explore the iframe, thanks Tim for the link.
Hi Dee,
Check out TabPress, our new iFrame tab creator tool that works much like Static FBML, except easier. Fan-gating (Reveal) is much easier — just pasting content for fans in one text box and content for non-fans in another. And we offer a multi-tabbed template to turn one tab into four tabs. Example.
And, yes, stay tuned for my guest tutorial here on Tamar’s great site 🙂
please I am having problem using the STATIC FBML app.I cann’t find it on my apps list.
wale, fbml is no longer supported on facebook since march. facebook now allows adding apps through iframe. so you need upload the app to the server, and then give facebook a link to that so it will be opened in the iframe. at hostfb we provide free hosting for your facebook applications, great step-by-step tutorials on how to set up your fan page app and free facebook templates.
I have learned some much here.
Thanks.
FBML is gone. Its the i-frames now and that makes much more easier for us to design the fan pages. Having a custom fan page design has become mandatory these days for small to medium sized businesses.
Editor’s note: Thanks for your comments. However, as stated in my blog policy, I have asked you to use your real name. I do not think your name is “Facebook Fan Page Design” and have edited your comment and URL as explained in the blog policy. Oh, and I stole your link.
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.
my welcome page is not the first page to come up when people visit my buisnesses page. The regular “wall” comes up first… how can I make my welcome page be the first thing to appear?
Is there a way to put a background on all pages of your fan page. I can’t find a way. Can someone help me please?
Thanks!
No backgrounds allowed. That’s what differentiates Facebook from MySpace 😉
Now, there are other simplified ways to design fan page too. I used an app, TradeableBits to design my page: have a look: http://www.facebook.com/pages/Nargis-Fakhri-Fan-Site/159561204109569
Hey guys, thank you for all the infos. But I think facebook changed something to I-Frame? right? Do you have more infos to that? Thank you!
Yes, Facebook will not support fbml. Now they will support iFrames. For this you can use templates from http://facebook-iframe-templates.com/ and also you can find some editors like fbpager.com to create page your self and then install to Facebook.
It look good. we are also around burbank USA . A large format printer distribution company
We also deal with OKI procolor910/920WHT/930 and GO printers(Go ecoMax )
WE have a face book page at here : http://www.facebook.com/GraphicsOneNews
facebook doesnt support static FBML now. what is the alternative?
FBML is outdated now… Try other stuffs as I used here… https://www.facebook.com/Cddsin
I hope you read the article rather than came here to self-serve, Purushothaman. The first sentence tells you that this article is out of date.
oops…. I apologize…
I wrote this script, to manage your facebook page custom tab. You can customize the icon, and edit your content in WYSIWYG mode.
http://www.facebook.com/FanshipDetect
Awesome tips….very usefull information…now am using fbml…..thanks for sharing
Some how, i would like to achieve
<input name=userName value="” >
no php code im FBML working now.
Any help/suggestions appreciated.
Some how, i would like to achieve
no php code im FBML working now.
Any help/suggestions appreciated.
Some how, i would like to achieve
<input name=userName value="<fb:userlink uid=loggedinuser />" >
no php code im FBML working now.
Any help/suggestions appreciated.
sorry for the previous 2 posts.
You could do that with FBML but FBML is going away soon. You can’t do it with iframe tabs without displaying the Allow prompt to the visitor, which sort of ruins the concept, eh?
I tried with FBML. since input is an html tag and fb is an fbml tag, how can we have an fbml tag as html attribute? it gives me en empty textbox.
<input name=userName value="" >i need to have the value automatically displayed in the textbox without
prompting the user to enter their name. I hate the iframe apps that shows "Powered by ......" at the bottom of the page.
Guys, I’d suggest you to try iFrame Tab Plus app from HostFB and build a tab with custom content easily. Get the app from http://hostfb.com/apps
Yes, “Karen”, there are a number of free apps for adding iFrame tabs.
I prefer TabPress, but perhaps that’s because my company HyperArts developed it. 🙂
Happy holidays for everyone! Now, back to business 🙂 there are so many apps out there, and I tried literally all of them. All I can say is that these guys who developed them are cool. Facebook apps has made the life easier for for newbies and regular users. To my opinion, the only thing all apps are missing is nice design. I started learning Photoshop and designed my own simple fan page in PSD format. But then I faced few troubles with coding it to Facebook friendly type. I searched the web and found PSD2FanPage service. Now awaiting my project done. Fingers crossed 🙂
Nice guideline for Facebook fan page lovers. now i can also create my own Facebook fan page.
I just did a google search for the static FMBL app and read that as of June 1, 2012, these apps will no longer work? Do you have any input/suggestions?
Thanks!
Katelyn, please see the first link in this article. This is an outdated article.
Isnt much of this article obsolete due to the new Facebook Timeline?
AJ, I’ll say it again: I addressed this at least three times now in the article and comments.
I’m not reading this in 2011, and the new links still appear to be outdated. That’s why I commented. Your answer implies I didn’t read it. The new timeline changed everything, obviously, and I’m just trying to make my page better, as timeline ruined it. Oh well. I will find something else. Thanks though.
We’re working on a revision post for Timeline, but the comment should be left on the newer post or else I guess it’s implied that you’re looking at this one as the total guideline (it’s not). I guess I should close comments on this one…
I hope you can make another post for the new timeline, and thank you anyway 🙂
“i don’t know if someone would agree with me or not , but facebook timeline is very bad for us as FB fan page admins :(“
This is one of the best site which inform and help the people to create a real fb fan page.
Go check it out and like or give me some tips#
http://m.facebook.com/profile.php?id=3
63671507043178&refid=1