Small Snap! Logo Snap! Websites

Work in progress
Snap! C++

Incredible Websites for Incredible People

Adding HTML on your Facebook Page

Introduction

By default, when you create a Facebook page, you are limited by what Facebook offers by default. This means no nice HTML to welcome your users.

Here I give you a few insights on how you can add HTML to your Facebook page. This HTML code will render nicely with whatever necessary colors, borders, images, videos, etc. Just don't over do it...

For images, it is smart to put them on your website first to make sure you can edit them as required.

Videos, I'd suggest YouTube or a similar website and use their Embedded Link feature.

All styles must appear inline or you will have to upload the CSS file on your website. Having it inline will give you an easy way to modify it in realtime. When in a CSS file, changing the CSS file is not seen immediately by browsers (because of caches.)

Adding an HTML box1

For some reasons, with my account I cannot currently search for an application to add it. In any event, you can add up to 10 HTML boxes to each one of your pages. Note that you can add a given box only once to a page. After that, it's there and it cannot just be duplicated.

The following 10 links allow you to add up to 10 HTML boxes to your pages. Note that Facebook calls it an FBML box. This is because you can include Facebook codes too. (i.e. to add Facebook buttons, gadgets, etc.)

HTML Box 1

HTML Box 2

HTML Box 3

HTML Box 4

HTML Box 5

HTML Box 6

HTML Box 7

HTML Box 8

HTML Box 9

HTML Box 10

Editing the HTML Box

Once you added the HTML box, it is empty and called FBML which is rather ugly.

1. Go to your Facebook page and click on Edit Info.

Screenshot of the Snap! page with the Edit Info link showing.

2. This shows you a list of editable data on the left side of the screen. Click on Apps.

Go to your page application settings.

3. Scroll to the FBML application and click on the Go to App. link.

Go to the application to actually make use of it.

4. Enter the box title and contents

The contents of the box can include HTML. There are limits to which HTML codes you can use, but most are acceptable. For example, you can include an anchor (A), an image (IMG) and many other codes that are often refused on other systems. You may even add a registration form to your HTML!

The FBML box title and contents.

I strongly advise that you create the HTML with a different tool (such as your Snap! website by creating a page on your site,) and then copy and past the HTML code to your Facebook FBML contents. It is not unlikely very difficult to find HTML errors in an edit box like this one!

Once the HTML was entered, click Save Changes.

To see the result, click on the name of your page at the top-left, then on the new title you gave to your HTML box. It should appear on the left side along Wall, Description, etc.

5. Make your new box the one users see first when they come to your page

Once your box looks good, it is time to move it as the first thing people should see when to find your page. This is easy to do but is currently in a rather strange location...

Click on Edit Info for your page (see 1.) and then click on Manage Permissions (got to think about that one each time!)

How to select your Landing Page.

In the picture, my Default Landing Tab: says "Wall". This is often the default. Some people set it to Info instead. Click the drop down and select your new HTML box.

Advanced Features

1. Adding a YouTube movie

As mentioned earlier, advanced HTML tags are refused for security reasons. Still, facebook allows for Flash videos to be inserted in your HTML pages. This actually requires a special feature called swf (which is the Flash format magic name.)

Unfortunately, your standard editors will not help you in entering this tag, so you'll be on your own to write it. It makes use of the FBML language extensions. The tag looks like this:

<fb:swf
  swfbgcolor="000000"
  swfsrc="http://www.youtube.com/v/<identifier>"

  imgstyle="border-width: <size>px; border-color: white;"
  imgsrc="http://img.youtube.com/vi/<identifier>/2.jpg"
  width="520"
  height="410"
/>

The size shown here is the maximum recommended (i.e. the width and height parameters.) The ratio of a movie on YouTube is generally 4/3. If you know the widget, multiply it by 3 and then divide by 4 and round the result to the nearest integer (no decimal in the size, it's in pixels and pixels cannot be divided for video.) Then add about 20 pixels for the bar at the bottom. Adjust until you're satisfied2.

The imgstyle attribute shows information about the image to show when someone accesses your Facebook page. It is used to display the image defined with imgsrc. Replace the <size> with the width of the border. In most cases, you want to use 1. If you want to actually see the border, make sure to change the color from white to something else (i.e. blue, green, red, orange...)

The swfbgcolor is the color of the background for the Flash player. For video it is usual to use black (000000) and some times white (FFFFFF).

The swfsrc attribute is the link to your YouTube video. Note that you probably want the shorter URL notation which uses the /v/ path and your video identifier. When you usually go to a video the URL ends with ?v=WeIrD-NuMbEr-HeRe what appears after the equal sign up to the end of the next ampersand (&) character. The best is to try your URLs before saving your code in your Facebook page to make sure they work.

Snap! SEO e-Book Index:
  • 1. Please, let us know if one or more of the following links stop working. Thank you.
  • 2. Note that YouTube will give you the correct sizes if you use their embedded code feature. That is generally the best way to define the width and the height parameters.