Adding Custom HTML Box To My Facebook Profile


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.

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.


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


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


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.


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


On this page enter this <a href=>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.


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.


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.


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


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


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


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.


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


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


You’re done.

Author: Valik Rudd

Valik (Valiik) Rudd is an Internet entrepreneur. He develops new online businesses and creates new websites. His other passion is writing about the those things. Web Design Ideas blog is the outlet through which his ideas and web design tricks and tips get recorded and shared with others.

18 thoughts on “Adding Custom HTML Box To My Facebook Profile”

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

  9. 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?

  10. Thank you for this great tutorial. The one thing I wish FB would do is allow the FBML on a profile and not just a Fan Page. I also wish I could change the name of the tab itself. If anyone has any suggestions, or if it is even possible, I would love to hear them! Thanks again, Andrea

  11. Thanks this helped, but profile boxes are being replaced by profile tabs.

    Here’s the message I received when I wss hunting for a way add the box to my profile:

    Please be aware that Facebook will no longer be supporting profile boxes very soon. You should move your content to a profile tab instead.

  12. Unfortunately, this info is now obsolete. Facebook has changed its pages and Facebook no longer supports profile boxes per se, although there is a “Profile Box” app. Now it’s “Profile Tabs” and the procedure above no longer applies.

  13. Would love to have gone through this but I got an error when I reached the App for HTML on Profile Box.

    Fatal error: Uncaught exception ‘FacebookRestClientException’ with message ‘Unknown method’ in /home/appnext/public_html/apps-fb/facebook-client/facebookapi_php5_restlib.php:1734 Stack trace: #0 /home/appnext/public_html/apps-fb/facebook-client/facebookapi_php5_restlib.php(696): FacebookRestClient->call_method(‘facebook.profil…’, Array) #1 /home/appnext/public_html/apps-fb/html-box/index.php(47): FacebookRestClient->profile_getFBML(‘100002093155495’) #2 {main} thrown in /home/appnext/public_html/apps-fb/facebook-client/facebookapi_php5_restlib.php on line 1734

Leave a Reply

Your email address will not be published. Required fields are marked *