Adding Custom HTML Box To My Facebook Profile


 

 

valik1

After spending some serious time on Facebook trying to do a few things on my profile I realized that Facebook’s navigation between different Facebook applications and elements are less then perfect. It took me hours but I finally found some patterns and figured out how certain things are done.

One of the things I needed to do was to add a custom HTML box to my Facebook Profile, but then I also wanted to do the same to my Facebook Pages that I’ve created. This document is the complete instructions on doing exactly that. So let’s dive in. We’ll first start with Facebook Profile page. I also did a post on adding custom HTML box to Facebook Pages, notice – Facebook Page, not Facebook Profile, these are different – read about the differences in this article.

Here are the instructions to get the custom HTML box onto the sidebar of your Facebook Profile.

For the Facebook Profile you will use an Application called HTML Profile Box.

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, click on it.

2-app2

Click Find More at the top-right of the little window that popped up.

3-app

Click the little minus at the top-right of the little window to close it.

4-app

Now in the Search Applications box up top, search for an application called HTML Profile Box.
Locate it in the results and click on it.

5-app

Click “Go to this application” link at the top-right.

6-app

On this page enter this <a href=http://www.yourdomain.com>Your Name’s Website</a> (replace yourdomain with Your domain and Your Name with your name), uncheck Announce Update and click Update HTML Profile Box.

7-app

Now to get to the applications to organize them you need to click the Applications button in the bottom toolbar and click Edit at the top-right.

8-app

Here you will see the list of all the applications that are installed on the profile.
Look for the one called HTML Profile Box and click Edit Settings to the right of it.

9-app

Click over to the Profile tab in this little window and set Box to say Added, then click Okay.

10-app

Now click Profile at the very top of the page – for the Facebook Profile page and click to the Boxes tab.
Here you will see HTML Profile Box listed. Click the Pencil icon at the top-right and choose “Move to Wall tab”.

11-app

It will take you to the Wall tab automatically and you should see HTML Profile Box show up in the sidebar.

12-app

Editing the custom HTML content.

Now to get to the Application to edit the content is very easy, click Applications button in the bottom toolbar and click the Edit button at the top-right.

8-app

This will give you the list of all the applications, click on the HTML Profile Box, right on the title.

13-app

And this is where you add the HTML code. Just edit your code, uncheck Announce Update and click Update HTML Profile Box.

14-app

You’re done.

You Might Also Like:

14 Responses to “Adding Custom HTML Box To My Facebook Profile”

  1. Anrkist  on April 23rd, 2009

    Nice, did not know this was even possible. That’s basically the only thing MySpace has over Facebook, the ability to completely redo your own page.

  2. Ruth McClain  on May 28th, 2009

    Did not work for me. I was trying to paste in some java script; is that why? I wanted to add a countdown calendar in my sidebar boxes.

  3. Facebook Developers  on May 29th, 2009

    I was using MySpace because of its HTML features and quite fiendly option to change pages. Its quite good that facebook also implement this features. Thats really great. Thanks

  4. Kim Woodbridge  on June 4th, 2009

    Thank you for this detailed tutorial. I was trying to add fbml to my profile and then realized it only worked on pages. This app is exactly what I needed :-)

  5. ace  on June 16th, 2009

    Awesome job man, thanks, I totally needed this tutorial…I haven’t used facebook since they changed the layout. Nothing is where it once was…you are a gentleman and a scholar, Cheers

  6. Facebook Applications  on June 25th, 2009

    Hey its really and awesome tips. This is really working for every profile. Is there any other way to change the layout by HTML coding.Thanks

  7. Kristi  on June 29th, 2009

    Thanks for this– the application page does a poor job explaining how to get your box onto your profile. Following your directions worked perfect. Thanks.

  8. Sz  on July 16th, 2009

    Thank you, it’s working !

  9. jeff  on July 30th, 2009

    the self-serving ad at the top of the box all but ruins its usefulness.

  10. SUMA  on November 5th, 2009

    THANK U! I REALLY APPRECIATE THIS TUTORIAL, I COULDN’T HAVE DONE THIS W/O YOUR EXPERTISE. I NOW HAVE ADDED THE HTML BOX ON MY FB PROFILE. GREAT!

  11. marilyn jimenez  on December 9th, 2009

    thanks for the help!!

  12. cataylor  on December 11th, 2009

    Thanks for this great information. I got my html profile box setup and even was able to get it to the boxes portion of my profile, but when I go to click on a pencil icon-there is not one. Can you tell me why I have no pencil icon to be able to post the box to my wall? PLEASE HELP.

  13. valiik  on December 11th, 2009

    I am sorry, I won’t be able to help out. After fighting with it my self for a long time I figured out the specific way which allowed me to do exactly what I wrote in this post, other than that I can not explain why it does anything or does not do something. If you followed the instructions exactly, step by step it should have worked unless Facebook has recently changed something. Maybe someone else has any input on this?

  14. Resmyrranda  on January 25th, 2010

    Wow you saved me HOURS of figuring this out, thank you!


Leave a Reply