External Extensions

The following pages list external resources such as features you can mix between your website and sites such as Facebook or Squidoo.

It is important for SEO purpose to have links from websites such as Facebook to your business website. It generally increases the number of clicks and your credibility.

Adding HTML on your Facebook Page (all tags supported.)

To add any kind of HTML code, including JavaScript, IFRAME and OBJECT/EMBED tags, you need to use a 3rd party application.

Although the application allows you to add anything you want, remember that there are a certain number of things that are not allowed. For example, you cannot include a video that automatically starts (you can embed a video but the user has to click on Play if he/she wants to listen.

The authors of the Static HTML allow you to create up to 12 boxes. That should be a lot more than you need. It also supports FBML code (widgets from other pages, embed data, etc.)

To enter the HTML data in the Static HTML boxes, first click on one of the links presented here and install the application on one of your pages (you can re-use the same link for different pages, you can use only one link only once on a page.)

Once installed, you end up on your page and you see a little star with the word Welcome next to it. That means it installed properly on your page. Click on Welcome and the box opens an HTML editor. Enter your HTML there. Start with a small snippet if you have problems with a large page that doesn't want to save.

Once saved, you have links that let you view the tab as your users will see it. Make sure to always test!

The editor let you choose whether scrollbars should be added or not and whether your HTML code includes FBML. Also, you'll notice two boxes. When both are filled, one is only visible by non-fans and the other by fans.

At the top of the editor there is an orange bar that gives you help about the Static HTML. I suggest you read those information to change the word "Welcome" to you liking and other such things.

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.

  • 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.