Facebook is rolling out some major changes to how Pages work. Some are good, some not. The good changes include the new layout of facebook Pages with the tabs on the left sidebar instead of at the top, and, starting March 11, 2011, the ability to use iframes, HTML, Javascript and CSS without the FBML App! This is going to totally change how you can develop facebook Pages! Party time!

One of the recent changes in the “not so great” category is facebook’s decision to remove the “Suggest to Friends” link on facebook Pages. Admins of a page can still access this feature in the Edit Page area, but fans cannot. So, we’ve been flooded with requests to add an Invite Friends Tab to facebook Pages.  Here are the steps for how to create the Invite Friends Tab on a facebook Page, but keep in mind that as of March 11, 2011, facebook will be deprecating the FBML App.

1. Go to  Static FBML App and click on Add to Page in the top left corner of the page. You will then see a list of your facebook pages. Click “Add to Page” to add the application.
2. FBML is now added to your page.
3. Go to the facebook Page you’re working on and click Edit Page.
4. Click on Apps.
5. Click on the FBML Apps and click on Go to App.
6. Give the Tab a title like “Suggest to Friends.”
7. Copy and Paste the below code replacing illuminea with your organization.
   Important! The action URL on line 3 of the code MUST be http://example.com and NOT http://www.example.com. No WWW welcome at this party.
   
   If you don’t follow these rules, you will get an error that says “Sorry, your request could not be processed. Please try again.”

   <fb:request-form
   method="post"
   action="http://facebook.com/illuminea"
   type="illuminea"
   invite="true"
   content="Connect with iluminea
   <fb:req-choice url=http://www.facebook.com/illuminea label='Go' /> ">
   <fb:multi-friend-selector actiontext="Invite your friends to connect with illuminea" rows="3" cols="3" showborder="true" />
   </fb:request-form>

8. Save Changes.
9. Go to Edit Page > Apps > Click on the Suggest to Friends App you created > Go to Edit Settings and click “Add” where it says Available (see screenshot).
   
10. You can see this in action on illuminea’s facebook Page.
11. When your friend receives the invitation it says “Friend has invited you to “Static FBML”. Not so pretty so for now make sure your message text is really good! I hope there will be a better solution for this.
    

When creating custom FBML tabs for facebook pages, it can often be helpful to use an image map. An image map is a flat image (like a jpeg or a gif) that has been coded with HTML that makes parts of the image into live hyperlinks. A custom FBML tab is a tab on a facebook page that has been coded with FBML and/or HTML to do something unique. Here’s an example of a custom tab on a facebook page on the The Wall Street Journal’s facebook page:

As you can see, the Wall Street Journal greets new visitors with a custom tab called News, which acts like a landing page.

I’m not going to get into how to create a custom tab on a facebook page here since there are tons of tutorials around the web on how to do so. What we are going to discuss here is how to put an image map in your custom fbml page.

Step 1: Get your image

First, find the image that you want to make linkable. Maybe edit it in Photoshop or some other editing program and add text. It’s recommended to underline text you plan to make linkable to make them look like links. Let’s use the following image as an example:

If you mouse over the image, you’ll see that nothing happens, and there are no links. I’m going to make the words Social Icons a link to an icon search engine, and each image will link to a similar icon online that you can download.

Step 2: Upload your image to a server somewhere

In order for your image to appear in your facebook tab, it must be hosted somewhere online. That’s the only way facebook can “call” it in to the tab – it can’t call it from your hard drive on your desktop (unless your hard-drive is a publically accessible server, which is usually not the case). Here are two great places for uploading images for free: Photobucket and Image Shack. I like Image Shack for quick and dirty image uploads since you don’t have to create an account there – it’s optional, which is helpful if you later want to remove an image or have control over your images, but not required.

So let’s use Image Shack as our example. Follow the directions to upload your image, and you will get to a page that looks like this:

We care about the field above called Direct Link (I put a green box around it). Select and copy the whole URL in that field.

Step 3: Create an image map

The image map must be created with CSS. If you use HTML it won’t work in facebook. Lucky for us, there’s a great free tool online for creating CSS image maps: Image Map Tool.

1. Go to http://image-maps.com.
2. Once you’re in the Image Map Tool, enter the image URL you copied from the Image Shack page into the field that says “From a URL”:
   
3. Click on Start Mapping Your Image. You’ll come to a page that says that your image was uploaded successfully:
   
4. Click on the link “continue to next step.” That’s where the fun begins.
5. You need to select the parts of your image that you want to make into links. Most parts of the image can be selected with the Rectangle tool, but unusual shapes can be selected with the Custom Shape tool. In our case I’m going to use the Rectangle Tool.
6. When you click on the Rectangle tool, you get this floating thing that you can move around and resize, and enter the link and link title/alt text:
   
   As you can see above, I moved the floating box thing over the words Social Icons and resized it so it covers both words. I entered a link to an icon search engine Iconfinder, and entered the alt text for the link. Next, click Save.
7. Click on the Rectangle button again and repeat this process as many times as you need until all hotspots are created. Since I want four links in this image, I repeated this process another three times.
8. Now, choose the options that you want from the sidebar under Advanced Tool Box. There are some useful and advanced options there, and I recommend you check them out, but take note of the options to Show Text Links and Allow Backlink. If you choose to show text links, text links will appear under your image with links to the places you’ve linked your image to. This could be good for usability since you’ll offer a text version of the links in addition to the image links.
   The Allow Backlink option will put a text link under your image map to the Image Map site. If you can, it’s nice to give credit to this site for creating such an awesome free tool. But if you can’t, make sure to deselect that option.
9. Now click Get Your Code. This takes you to a very confusing page with lots of text and tabs at the top. Click on the CSS Code tab at the top of the page:
   
   You will see a bunch of code. It’s basically ready to copy and paste into your FBML tab, but you need to make one change to it first. Image Map Tool adds a dotted black line that appears when you mouse over any of the links on the image, which is pretty annoying so you probably want to get rid of it. So you need to get rid of lines of code that look like this:

   a.LINKx:hover {background:transparent; border:1px dashed black; color:black;}

   The x above represents a number. The above line of code will appear as many times as links that you created in the image, and the x will be a number. So if there are three links, the above line will appear three times, and the x will be the numbers 1, 2, and 3 in each line.

10. Once that’s done, paste the code into your FBML tab and you’ve got yourself a working image map in an FBML tab!

Sources:

• Design Your Facebook Page Like a Pro – Image Maps Tutorial
• “Image Map” on the Facebook Static FBML forum