Enhance your Facebook Page – Add HTML Landing Page Look and Functionality

Last time we discussed how to add images to your Facebook Fan Page and make this the landing page. We also added the “a href=” feature to link the image to your website.

But why stop there?

Did you know that you could use some basic HTML functions to make it look more like a website landing page?

That’s right! You can definitely add extras to your Facebook Landing Page to make it look and work like a mini website.  Here were thinking HTML pages with images and some basic CSS. This issue we will not address the CSS yet, next issue will feature this.

Some ideas are to add a special feature (banner ad) for a specific topic you want your Fan Page visitors to see and a few others, mixing and matching linked images to add some light functionality.

What we are going to do in this article is add a table of 2 rows and 3 columns. (you can freely change this to suit your needs by adding more <td>text</td> for columns and <tr> “td-elements </tr> for rows, remember to add an equal amount of td’s in each tr so the tables are even).

In each cell we will place an image and we will make a few images link to your website and another tab. This is also used to add a “become fan” button in this landing page.

Remember the previous post? We are going to use the same FBML box we used previously to place that single image and link. (If you have not read that article yet read how to add images to a Facebook Fan Page tab on my blog)

This time we will use the following code:

<table>
<tr>
<td>picture</td>
<td>picture</td>
<td>picture</td>
</tr>
<tr>
<td>picture</td>
<td>picture</td>
<td>picture</td>
</tr>
</table>

A word of caution, although you can change the orientation (merge cells and insert a single image) easily in an HTML editor like Dreamweaver and test the look in advanced, if you are so inclined, be aware that the FBML features are not exactly like HTML and might not look exactly like the preview in Dreamweaver.

I have yet to test the CSS features at length, so for this issue we are just going to explore the steps to adding a three-slice banner with two areas that need to be “clickable”.  (See Example Facebook Fan Page Landing Page)

Take the image you want to use and slice it in your favorite image editing software into 3 equal segments. Make sure of course that the fragments have text that encourages clicking like “click here”, “ Subscribe NOW” or “read more”.  These are what we call call-to-action buttons.

IMAGE WEBSITE EXAMPLE

To place images in each cell and row use this code:

<img src=”IMAGE LINK” width=”ENTER HERE IMAGE WIDTH” height=”ENTER HERE IMAGE HEIGHT” border=”0″ alt=”" />

To make them link to a URL use this:

<a href=”YOUR DESTINATION LINK”> “image scr code here”</a>

NOTE: For the images to show correctly; make sure you enter the image width and height. For best results use the actual image dimensions.

The finished table code should look like this:

<table>

<tr>

<td><a href=” IMAGE LOCATION URL”><img src=”IMAGE LINK” width=”ENTER HERE IMAGE WIDTH” height=”ENTER HERE IMAGE HEIGHT” border=”0″ alt=”" /></a></td>

<td> < img src=”IMAGE LOCATION URL” width=”ENTER HERE IMAGE WIDTH” height=”ENTER HERE IMAGE HEIGHT” border=”0″ alt=”" /> </td>

<td><a href=”YOUR DESTINATION LINK”><img src=” IMAGE LOCATION URL” width=”ENTER HERE IMAGE WIDTH” height=”ENTER HERE IMAGE HEIGHT” border=”0″ alt=”" /> </a></td>

</tr>

<tr>

<td> < img src=” IMAGE LOCATION URL” width=”ENTER HERE IMAGE WIDTH” height=”ENTER HERE IMAGE HEIGHT” border=”0″ alt=”" /> </td>

<td> < img src=” IMAGE LOCATION URL” width=”ENTER HERE IMAGE WIDTH” height=”ENTER HERE IMAGE HEIGHT” border=”0″ alt=”" /> </td>

<td><a href=”YOUR DESTINATION LINK”><img src=” IMAGE LOCATION URL ” width=”ENTER HERE IMAGE WIDTH” height=”ENTER HERE IMAGE HEIGHT” border=”0″ alt=”" /> </td>

</tr>

</table>

No time to do this yourself?

As an IMVA, I offer the service to make these for you, the look, the codes and the FBML input. I also add a google analytics tracking code to it so you can see how many people visit it, you can also opt to see how many people click and what they do on it?

Curious? Just message me, tweet me or email me for a quote and lets see what Beth the IMVA can do for your website, Facebook Fan Page and Inbound Marketing Campaigns.