Adding Custom HTML Box To My Facebook Profile


valik1

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.

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.

If you liked this post, share it with your friends!

18 Comments

  1. Anrkist says:

    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 says:

    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. ace says:

    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. 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 says:

    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 says:

    Thank you, it’s working !

  9. jeff says:

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

  10. SUMA says:

    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 says:

    thanks for the help!!

  12. cataylor says:

    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 says:

    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 says:

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

  15. andrea says:

    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

  16. novelist99 says:

    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.

  17. Ian Mega says:

    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.

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

Please Leave Your Comment

Please make sure to enter the required information where indicated. We moderate all comments so please no link dropping; do not spam, and do not advertise!
 

Name (required):

Email (will not be published) (required):

Website:

Comment: