UPDATED –> Thanks to facebook’s fast moving evolution, this article has become some what outdated. Please read the new Tutorial on how to add HTML to facebook that talks about creating a custom page on facebook.
In the previous post I wrote about adding a custom HTML box to my Facebook Profile, today I will talk about adding a custom HTML box to my Facebook Pages. I spent hours trying to figure out how this is done and realized after a while that Facebook is still having lots of navigation and usability issues. The navigation between the main Profile area and other elements of Facebook are not linked very well, at least no very intuitive and easy to get lost. Once you get something to work it is hard to find out how you did it and to replicate it.
After hours of surfing the help pages and forums I finally found some patterns and figured out how certain things are done.
Adding a custom HTML box to your Facebook Pages requires a different procedure and a separate Application from what was used in the previous post so to add an HTML box to Facebook Pages (not Facebook Profile) follow these instructions.
This is how you get to your Facebook Pages.
While logged into Facebook look at the bottom left corner of the window, there is a gray tool bar there. The first button on the left says Applications. The next icon to the right is Ads and Pages, click on it.
On the top, to the left of the green “Create an Ad” button click Pages.
Adding the Application to the Page.
The Application is called My Profile Box.
Here click on Edit Page right under the page name.
On this page you will see a list of things including Applications. Scroll to the bottom and click the little pencil icon where it says “More Applications” and click “Browse More”.
Up in the Search Applications box, search for “My Profile Box”.
It’s going to be about the middle of the page, with a brown box for an icon. Click on it.
Click Add To Page and follow the prompts to allow this Application to install.
Once you are at the place where you enter the HTML code, enter this <a href=http://www.yourdomain.com>Your Name’s Website</a> (replace yourdomain with Your domain and Your Name with your name) and click Update.
Now you need to go back to the Page management area. Click the Ads and Pages icon in the bottom toolbar.
Click Pages at the top.
Click Edit Page under the page title.
You should now see My Profile Box listed in the Applications list. This is where you can manage the Applications and delete them if you need to. Remember, this is only for the pages not the profile.
Click the pencil icon for the My Profile Box.
You will see 3 choices there, Edit, Application Settings and Remove Application.
If you click Edit, this is where you can change the content of the box, add or edit the HTML code in it.
If you click Application Settings, this is where you can change where you want the Application to show on the page.
Remove Application will delete the application from the page.
So, you already have the HTML code I gave you above entered so you don’t need to go into Edit, but if you need to edit it, this is where you are going to go to do that.
Click Application Settings.
Here you will have 2 choices, Box and Tab. Select so the Box says Added and Tab says Available, then click OK.
This makes the application show up in the Box tab on the Facebook Page.
Now we go to the page itself. Scroll up and click View Page under the title of the page.
Click the Boxes Tab at the top. Here you should see the My Profile Box listed. Click the pencil icon next to it and select Move to Wall Tab. Wait for it to take you to the Wall tab.
Once it transfers you to the Wall tab, you will see that it added the My Profile Box to the side bar. Now you can click and drag it to which order you want it to show up.
Editing the Content.
To edit the HTML code just click Ads and Pages button in the bottom toolbar.
Click Pages at the top.
Click Edit Page under the Page Title.
Find My Profile Box application and click the pencil icon to the right of it and choose Edit.
Update the code and click Update.