Adding Custom HTML Box To My Facebook Page


0-papp

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.

1-papp

On the top, to the left of the green “Create an Ad” button click Pages.

2-papp

Adding the Application to the Page.

The Application is called My Profile Box.
Here click on Edit Page right under the page name.

3-papp

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

4-papp

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.

5-papp

Click Add To Page and follow the prompts to allow this Application to install.

6-papp

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.

7-papp

Now you need to go back to the Page management area. Click the Ads and Pages icon in the bottom toolbar.

1-papp

Click Pages at the top.

2-papp

Click Edit Page under the page title.

3-papp

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.

8-papp

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.

9-papp

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.

10-papp

Now we go to the page itself. Scroll up and click View Page under the title of the page.

11-papp

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.

12-papp

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.

13-papp

Editing the Content.

To edit the HTML code just click Ads and Pages button in the bottom toolbar.

1-papp

Click Pages at the top.

2-papp

Click Edit Page under the Page Title.

3-papp

Find My Profile Box application and click the pencil icon to the right of it and choose Edit.

14-papp

Update the code and click Update.

7-papp

You’re done.

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

31 Comments

  1. rreece says:

    Thanks so much for this info…it was exactly what I was searching for. However, when I added the application, it only gave me the option of adding the tab (no option for the box). Know why that might be?

  2. valiik says:

    Unfortunately I don’t know why it did that. You just need to play with it and see if you can get it to work. Maybe start over and try again?

  3. rreece says:

    I found my error. Thanks! So next question (and I’m really new to all this)…is it possible to change the title of the box so it says something other than “My Profile Box” at the top?

  4. valiik says:

    As far as I know, no, there is no way. I tried to find how to do that but did not have any luck.

  5. annamal82 says:

    I’ve been looking for something like this, except I would like it without the words “My Profile Box” at the top too! Ahhh..

  6. curious says:

    Hey,
    Your article was very helpful but I’m pretty sure there is another way to do this that allows you to add multiple boxes AND name them whatever you like. Check out Garage’s Fan page… they have 3 custom boxes on the side and each have a custom title with NO links to any apps:
    http://www.facebook.com/pages/Garage/60620847134

    Does anyone know what they used or how I can accomplish this too.

  7. Pete says:

    I had trouble with sizing and found the Static FBML application to work better: 1) go to http://www.facebook.com/apps/application.php?id=4949752878&ref=s&ref=s and click Add to my Page (if you are an Admin on more then one Page then it will ask you which Page to add it to–you probably want to add it to each Page)
    2) compose and select the code and copy it into memory
    3) go back to Facebook and go to the Page for the product (click the Ads and Pages icon at the bottom of the page to the right of Applications, click Pages, and then click the name of your product), click Edit Page, scroll down so you see the FBML application, click on the pencil icon to the right (you may need to click 2 or 3 times), and select Edit, and a page should open with a box for entering the HTML code
    3) enter the heading that you want to appear above the widget on your Page (or you can also leave it blank to eliminate some clutter), paste the code in the box, click Save Changes, and you should see a message above the box indicating “Changes Saved”
    4) click your Page’s name above box and it should take you back to your Page where should now be a Boxes Tab
    5) click the Boxes Tab to open it
    6) click the pencil icon for your code’s box and select Move to Wall tab and the box should now appear on your Page!

  8. Dave says:

    I’m not seeing a link to “Add to my Page” on the above Static FBML application page.

    I only see “Add to my Page’s Favorites”.

    It sounds ideal for what I have in mind, just not sure how to get it added.

    Thoughts?

  9. valiik says:

    Dave, I made this tutorial as detailed as possible and also followed it multiple times and was able to replicate it so I know that if you follow the tutorial to the dot, it should work. If it still doesn’t, you probably have a unique situation and I don’t think I can help. You’ll need to contact Facebook or the plugin designer.

  10. Hey. I was really searching for these for a long time. And you have done a great thing for me. Thanks for sharing. Its really working

  11. Hilary says:

    THANK YOU, THANK YOU, THANK YOU! I can’t tell you how many gray hairs I gave myself trying to figure this out via facebook help. You are AWESOME!

  12. valiik says:

    You’re welcome!! I am glad this helped you out. Sweet domain by the way (brownies.com)!

  13. Pascal says:

    Thanks for this post – and especially thanks to Pete for posting the comment on the Static FBML application (http://www.facebook.com/apps/application.php?id=4949752878&ref=s&ref=s). this is EXACTLY what I have been looking for. After messing around with My Box (which unfortunately can only be used for profiles and not for fan pages).

    It’s always comforting to know other people are going though the same circumstances like yourself trying to find a solution.

    Great I finally got there :-D

  14. Paul Carbo says:

    I just started creating a Facebook page and couldn’t find the My Profile Box application because the name of it has changed.

    It is now called My Info…

    http://www.facebook.com/apps/application.php?id=62088208022&ref=appd

  15. Elo says:

    Hi,

    How can I add a customized box in my boxes sections, such as:
    – «Welcome to my official page»
    – My favorite links
    – My favorite video ( with links to video…)

    These applications cannot be founded in the browse section…

    Thanks.

  16. Cindy says:

    The FBML app will work on your Fan Page. When you set it up you have to choose your fan page to add the app to it. I have used it on mine. My question what is the code to add an RSS feed? I want to use a box for my blog without adding another tab to my fan page from the RSS apps.

    Anyone know how to do this?

  17. stk says:

    Pete, Great thanks!

  18. maf says:

    The name is now My Info.

    I was hoping I could use HTML in posts that go to fan’s newsfeeds. Maybe that’s not what this is for. Either way it’s not working for me.

  19. Mark says:

    Newbie here. Succeeded w/the assistance of your super tut. Wondering, is it possible to create additional html entries with this ap for a single page? Specifically, I’m trying to achieve what California MVD did within its boxes tab on fb. I’m thinking this may be the ap they used. Here’s the link to the CA MVD fb boxes page:
    http://www.facebook.com/search/?q=california+department+of+motor+vehicles&init=quick#/pages/Sacramento-CA/California-Department-of-Motor-Vehicles/76429183804?v=box_3&viewas=1828967025&ref=search

  20. teak says:

    I experienced the same thing as Dave.

    I didnt find “Add to My Page” button, instead only “Add to My Page’s Favorite”

    The strange thing also…at the top left of my page, there’s a button “Create My Profile”, which is different with your Page screen shot.

    Could you help me in solving this problem? I’ve been daysssss searching how to add customs tab on Fan Page.

    Thanks

  21. Edin Shaba says:

    The most efficient Custom HTML tab, with naming of the tab also available is:
    Facebook Static FBML application.
    Browse Facebook application and find it.Then ‘Add to your Page’, then on your page click ‘Edit’, find ‘Static FBML’ click ‘Edit’, enter the name of your tab and your HTML, save and see the result on your page.

  22. Victor says:

    Wow, thanks for your post and effort of putting this post , it really help me a lot :> at least i wont get lost

  23. artbrat says:

    Dave and Teak and others who can’t find an “Add to My Page” button at the application site: this may be because your PAGE does not yet have a PROFILE (an individual) set up for it. So, go to the “create a Profile” page and put your info in and then try again to add the ap.

    Meanwhile…. I’m still struggling trying to figure out how to rename my boxes tabs! Thanks for the info here!

  24. mkom says:

    Question on artbrat’s last post. So I ran into the same problem of not finding the \add to my page\ button. So I then set up the individual profile. Now the HTML button is appearing on my \personal page\ when I am trying to add it the my business page? Help?

    P.S. Thanks everyone for all the guidance..wish I found this page days ago!

  25. mkom says:

    Ok ignore my last post. Not sure how I did it but I did it! I just don’t understand why you have to set up a personal profile under a page. Since it’s for my job I’d prefer not to have my name attached to the account! :)

  26. hreekie says:

    Terrific info! Many thanks, Is there ANY way to change the box title from HTML Profile Box to another name?

  27. hobo says:

    I LOVE THIS! its the only one that acctually works right!

  28. Just what i was looking for, thank you, simple to follow.

  29. Princess Mae says:

    I can’t find it… I cant find the Ads and Pages button… Please help me..

  30. valiik says:

    When logged into Facebook, click the facebook logo to take you to your wall, then on the left in the sidebar you should see Ads and Pages in the list.

  31. I think that Facebook withdrew the application “My Profile box” of air! I could not find him.

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: