Many businesses, music artists, television shows, celebrities and even creative types now have Facebook fan pages. The problem? Not many of them are customized and look like any other Facebook profile. It’s time to stand apart from the crowd and make your Facebook fan page look like a big deal. People think that customizing a fan page is really difficult. Some poor saps are even willing to fork over hundreds of well-earned dollars to companies who will customize your page for you. Well, save your money and do it yourself! Yes, customizing your Facebook fan page is no harder than creating a simple HTML page and in fact, I’m going to make it even easier for you by leading you through the process. So are you ready to pimp out your Facebook Fan page? Let’s get started.
What You’ll Need:
1. A Facebook Fan Page (Different from a basic profile, but still free)
2. Elementary HTML knowledge
3. Photo Editing/Creating Program (Adobe Photoshop, Illustrator, Corel Draw, etc.)
What we’re going to set out to do is create a new landing splash page. This simple addition to your fan page will easily set it apart from all the other simple fan pages out there. To begin, you’ll want to create an image that’s no larger than 520 pixels wide. How long it is really isn’t important but remember the old school rule of thumb of web design: 800 x 600. You’ll want to keep the height of the image somewhat short – you don’t want those users still using small monitors to have to scroll forever to view all of the image and content. Get creative with your image – it’s going to serve as the “cover” to your page. If you’re a media personality, go ahead and put up your best head shot, modeling photo, contact info, etc. If your page is for a business, put up an image of your product or basically create a miniaturized ad that’ll sell your product and image. This is going to be the first image someone will see when coming to your page on Facebook so make that first impression count.
Setting up FBML
Now that you’ve gotten your image that’s no wider than 520 pixels created, it’s time to get technical. Go to Facebook and in the search bar input “Static FBML” or just click here. Once you’ve located it, click “Add to My Page” underneath the (usually) missing profile image at the top of the page. A box will come up and you should see your fan page come up. Click the “Add to Page” box next to the fan page you want to customize.
Creating a New Welcome/Landing Page Using FBML
Remember that image (no wider than 520 pixels) you created earlier? Have up on your website or on a photo sharing/hosting service (I use PhotoBucket but you can use whatever strikes your fancy). Now, venture over to your actual fan page on Facebook and click the “Edit Page” tab underneath your profile picture.
This will take you to your page’s settings. Scroll down until you locate the FBML application. Click on “edit” within this box.
Clicking on “edit” will bring up a new box with two input areas: one will be “Box Title” and the other will be “FBML”.
“Box Title” is the name you want for your this new tab you will be adding to your fan page. I recommend keeping it short and simple such as “Welcome” or maybe the name of your business/product. “FBML” is where the HTML codes will come in. If you have a website, you’ll probably want to link your image to your site so people can easily navigate from your Facebook fan page to your actual website (this is just good marketing practice). In the “FBML” box input the following code:
<a href=”http://www.yourwebsiteaddress.com” target=”_blank”>
<img src=”http://www.photohostingsite.com/yourimage.jpg” width=”520″ height=”X” border=”0″ alt=”Image Title” />
</a>
Code explained: The “a href” address is your website’s address (if you have one). This is the address that if the Facebook user clicks on the image you will want them directed to. The “img src” address is the location of the host of your photo. If you’re hosting the photo on your own site, it’ll be your website’s address. If you’re hosting it elsewhere such as on PhotoBucket, it’ll be that address. You should also include this exact code because it will automatically size your image to fit the space. If you don’t specify your image’s size it could come out looking too large. This code will take care of that issue for you. Your image needs to be 520 in width but the height will vary; input whatever your image’s height is and be sure to name your photo after the “alt” tag at the end – that’s just standard and good Web design practice.
If you aren’t linking your image to another site and just want a plain, static image, use this code in the “FBML” box:
<img src=”http://www.photohostingsite.com/yourimage.jpg” width=”520″ height=”X” border=”0″ alt=”Image Title” />
Once you’ve put in the necessary HTML codes and have made the needed changes to it, click “save changes”.
Final Touches and the Big Reveal
Believe it or not, the hard work is really over. You should have saved your changes to the FBML edits in the last step if not, click “save changes” now. When ready, navigate back to your fan page and look amongst the tabs at the top. You should see that you now have a new tab and it should be named whatever you entered into “Box Title” in the last step. The next step is to make this new tab the first thing visitors to your page see. Why? Otherwise, they will automatically land on your fan page’s wall and your work to customize and create an exciting, beautiful new welcome and splash page would have been wasted.
Go back and click on “Edit Page” again (the tab right under the profile image. Scroll down to “Wall Settings”. In this section you will see “View Settings” and in those options you’ll see “Default Landing Tab for Everyone Else.” Click on that and in the pull down menu, choose the new welcome/splash page you just created. Click save and from here on, new visitors to your Facebook page will see the creative new page you’ve just created. In just a few minutes, you’ve set your fan page apart from many others on the crowded Facebook block.
Don’t Stop There …
This little FBML app allows you to do so much more than just create a snazzy landing page. Do you blog or have a newsletter? Get more subscribers by creating a new FBML tab/page and imputing the right HTML to create an easy “subscribe” tab right on your Facebook fan page. Do you sell things? FBML will allow you to sell your product via your Facebook fan page. Are you a Flash designer or want to add more dynamic content to your Facebook fan page so that it really looks professionally done and stands out? FBML and HTML will allow your page to support Flash files. Really, the list is endless and here are just a few sources of inspiration for you to look into:
7 FBML Examples to Rock Your Facebook Fan Page
Customize Your Facebook Fan Page: Tips, Trick and Application
How to Put a Contact Form on your Facebook Fan Page
Follow me on Twitter @antoinereid
LinkedIn http://www.linkedin.com/in/antoinedreid
“Like” Antoine Reid Designs on Facebook
Visit my Web site www.antoinereid.com/contact.html
ANTOINE REID - Graphic Design Blog 
Followed all the steps for using the FBML and got great results with the text.But my .jpg will not show up on the page. It is hosted on WordPress, can you help me solve this?
Great directions, everything worked and now I know some great stuff on making FB pages Rock. There is a problem with my update. The text shows but the image will not. It is located on wordpress, hhttp://gailnogle.files.wordpress.com/2010/08/gnfacebookwelcomepg.jpg
Here is the way it is coded in the FBML box:
Can you help me.
Thanks.
Mxp
Hello,
Thanks for checking out my blog! I had an issue with the image not showing up as well when I was first learning the FBML stuff. I believe your problem may be with where your photo is being hosted. If I were you, I’d open a free account at http://www.photobucket.com and upload your image there. You should have no issue with the image not showing up if it’s hosted on there (I’ve tried a few different hosting services and PhotoBucket always provides great results and it’s free, another plus). — Antoine
Antoine,
Signed up for Photobucket and placed the image there. This time the image appeared very quickly and then went away.
The space was there for it but it did not appear, then on
when I went through the steps again – same problem as before.
If you take a look at Gail Nogle Photography on FB and click
the Welcome tab you’ll see the problem. I also tried hosting
it on my website and got the same thing. Could it be the image, does it have a special config for this app?
Hey,
I hope I can help. Since you say the image is hosted on your website as well, I’m going to approach it from that angle. Try using this code for your image:
<img src="http://www.gailnoglephoto.com/yourimagename.jpg” width=”520″ height=”the height of your photo” border=”0″ alt=”Gail Nogle Photography” />
I believe your domain name/site is located at http://www.gailnoglephoto.com. If not, just replace that in the above code where appropriate. The first line of the code will link the image to your website automatically (basically, it’ll turn your image into a clickable link). The img src (image source) line is going to be your website addressed followed by where your image is located. If your image is in a specific folder on your directory then it’d be your website followed by the slash and the folder name then another slash followed by the name of your image. The image source line has to correctly identify where the image is and if it’s missing a folder name or if the image isn’t identified correctly, you may not see an image (as is happening now).
The last line of that code is the image’s size. It shouldn’t be more than 520 pixels wide and you will have to put in how many pixels in height your image is. This is the code I used for my page on Facebook and it worked so if everything is labeled and named/identified correctly, you should see your image.
Be sure, once the image does appear, to go into the “edit page” settings and within “Wall Settings” set the landing page for all visitors to your welcome tab – you’ll want to show off your hard work! Let me know if you have further issues. — A
actually the easiest way to launch a facebook page is using a template.. the number of facebook templates available is rather limided.. but there are couple great ones at http://facebook-templates.net/
Thanks for your help on my Facebook page. I finally got it to work. Did what you said and moved the image to Photobucket. From there everything was fine, still can’t figure out why it wouldn’t work from my website. It’s hosted by GoDaddy, do you know of any problems with their hosting server for this kind of thing? Anyway, your great and I really appreciate all the help and suggestions.
Marqueax Price /Gail Nogle Photography
Hi Gail,
I actually stopped by your Facebook fan page a few days ago to see if my tip helped and was glad to see you were already up and running. Sometimes I wonder if it’s the FBML application itself that’s a bit finicky because when I was first making my page, it wouldn’t display the PhotoBucket image correctly but then I was able to use the image hosted on my own site and it worked perfectly fine. I really doubt it has anything to do with GoDaddy or your site. Hope your revamped page brings in lots of new fans and business for you. — A
Ok, I’m having an issue where my picture worked like a dream in Photobucket, however the link I put in is not working. I have it set up so that when people click my pic, they will be taken to my blogspot blog. However, it doesn’t work. I checked the code and everything about the address is perfect. Is Facebook disabling the link?
I stopped by your Facebook page and it appears as if you have an image up and were able to create a new landing page. The only problem is that when you click on the photo on the “Xine Johnes” tab, you end up with an error page. You probably need to check the address part of the code because it doesn’t appear to be correct.
If that’s the image you’re using, the rest should be fine. Right now the link attached to that photo is “http://www.xtine.xn--bz-9o0a/” which is bringing up an error page.
Hi,I’m about to begin building a Fan Page for Gail Nogle Photography. My other pages are maxed out and I can’t accept an new friends. I’m told that a Fan Page can go into the millions so I won’t every have to worry about that. Right now between the two pages I have nearly 7000 and want to add all who want to friend me.
Do I need to start the Fan Page with another email address so it’s not linked to the one’s that are up. Right now Gail Nogle Photography is linked to Gail Nogle. I tested the Gail Nogle Fan Page I had started and found it too gives the too many friends error. So my question is what type of page can I start to build that will hold everyone I have now and then some?
You were go great with the Welcome Page I thought you might know what I need to do here. I’ve left messages with FB Support but they never respond.
Thanks – Marqueax [Gail Nogle Photography]
Hello, I’m not really familiar with the issue you’ve encountered but it sounds like a good problem to have (an excess of fans/friends). Before you go the route of creating a new page with a different account, I’d try what you (or someone) seems to have done: create a fan page just for Gail Nogle and have a secondary fan page for Gail Nogle “Photography”. If the issue is that one page is maxing out and not allowing for new members, then creating a second “house” for fans seems like it should work. You could post the same things on each or offer different types of posts/updates on either or go. I’ve seen artists or companies though have well over 7,000 fans on one page so I’m wondering if the issue you’ve encountered is just a technical glitch on the Facebook side. It sounds like it to me. The only problem is, as you’ve found, getting a response out of FB support to do anything is hard and takes a while to get a simple acknowledgment of your original E-mail. Hope this helps in some way.
Antoine
i’m hearing the FB has cut this option off(last may) unless you have 10,000 fans.
Isn’t that true?
m.
I just used the application mentioned in the tutorial the other day. As far as I know, unless something occurred overnight, this is still open to the public. Many specialized groups or businesses out there would like you to think it’s been cut off so they can charge you a ridiculous amount to go in and do what you can do on your own with this tutorial but it’s not true. Follow the steps and customize your page and pat yourself on the back for doing what few are aware they can do on their own.
Thanks Antoine, right now we’re doing the dual page thing and hoping to hear back from Facebook. I’ve seen Fan pages with thousands of fans so hopefully the Fan Page we just created will roll for a much longer time. The best case scenario would be to have all the fans/friends on one location. BTW, saw where someone thought you could not update your own page in the manner you’ve shown and we used on Gail’s page. As far as we know it’s working since we just did the same thing on two other pages.
Thanks for all the great help and keep putting out the wonderful tips and hints -Marqueax
No problem – I’m really glad the blog and these posts are helpful to you and others. I thought it was an extreme injustice and total bull crap that there are companies out there charging people $100 or more dollars to customize their Facebook page in the same manner of this tutorial. I hope to churn out more posts in the near future that’ll touch on all aspects and area of the creative field. — A
We will be keeping our subscription with you and hopefully as you grow you won’t lose touch with your fans like us.
I agree, places like North Social change that $100 per month.
That’s $1200 per year for apps that you can do without them.
It’s even sadder that some advertise on Facebook. BTW still not a peep from Facebook support – not sure why.
Hi Antoine,
I’m having a lot of trouble with this…my image just won’t display. It’s hosted here:
And our FB page is http://www.facebook.com/InspiringTravellers
Can you help?
Hello,
Not sure what the issue may be but looking at the link you provided, it appears that you may not be using the correct code. You need to find out what the”img src” code is for the image and input that into the code. Click on the image in photobucket and under share it will tell you. I’m taking a wild guess but your code will look similar to the code below:
You also need to define the width and the height of your image. If it’s wide, it won’t display right and inserting the exact dimensions will help your image display correctly. If all else fails, host the image within the server of your website so that the img src code reads something similar to
I have done exactly like you said in the FBML tab.
Here is the exact code:
However when I click on the image it is directed to slingshotcreativegroup.xn com 9o0a
Why is it doing that? Is there some setting in Facebook that scrambles up the .com part of the web link?
The link to your site should be something like:
Followed by the link to the image. You need to make sure you have quotation marks around the address and that the http:// part is also included, otherwise you will get an error.
awesome, thanks for the great tutorial!
Everything worked fine up to the part where you to click the Edit Page button and scroll to “Edit Wall Settings.” There is no “Edit Wall Settings” on that page. I can’t find it anywhere. I found a dropdown menu that had the “Welcome” page I had just created in FBML language, but selecting it made no change on my wall. Grrrrr!
http://www.facebook.com/pages/Writings-by-Author-Connie-Chastain/240453990322
I see the last comment here is from May 2011. Facebook has made major changes in the past month, and I wonder if they did away with the “Edt Wall Settings” function, and if so, is there a workaround?
Thanks for a great tutorial — it’s clear and easy; the problem is Facebook, not your instructions