Lorraine Siew – The FBML Blog

Facebook Pages: Introduction to FBML

Posted in Facebook Pages by rainysiew on July 4, 2009

Hi all. This is my first in a series of posts about FBML and how to use it to customize your facebook page / public profile.

This post was taken from one of the messages I previously sent to a friend while teaching her to set up our page. Just go through the steps and leave me a comment if there’s anything you need help with.

I will be setting up my blog together with adding more how to-s for Facebook customization, FBML and such in the coming weeks. Stay tuned.

OK. To get you started on FBML, try this:

1) Go ‘edit page

2) Click ‘browse more applications‘ and search for ‘fbml‘, add ‘static fbml

basic fbml 1

3) On the left you’ll see ‘Add to my Page‘ – Add to your Page.

basic fbml 2

4) Go back to ‘edit page‘, look for the fbml app and ‘edit

basic fbml 3

5) Here’s the html I inserted to add an image, a short paragraph of text, etc. If you know html, you’ll find that fbml is quite similiar.

_____________________________________________________

<div align=center>
<a href=”http://www.facebook.com/group.php?gid=53608588426” target=”_blank”><img src=”http://i656.photobucket.com/albums/uu281/sqstars/Final_Squash_Star_Logo.png” width=”95px” height=”160px” border=”0″ alt=”” />
<br>
<br>
<h2>Who is Squash Stars?</h2>
<br>
<p> Squash Stars! The freshest face in the world of Squash is founded by Nicol David, the current World Champion…to champion the game that she loves. Squash Stars is currently represented in Malaysia, Mexico, Netherlands, New Zealand, USA, Ireland, Canada, Italy and Denmark by a group of professional women Squash players. </p>
</div>
—————————————————————————

6) Save changes

7) Go back to your page, a box in your ‘boxes’ tab would have appeared.

8) To move your box to the main sidebar, just click on the blue pencil and ‘move to wall tab

basic fbml 5

That’s it.

You can pick out the html for text and images from this piece right here.

To add another box, just go back to editing mode of your first app, and click ‘add another fbml box‘.

To give it a tab of it’s own. Go to your edit page, look for the app, click the blue pencil, ‘application settings‘, and ‘addTabs.

basic fbml 6basic fbml 8

Some applications don’t allow you to have their own tabs, but we’ll get to that later. ๐Ÿ™‚

Quite the same as using Blogger innit? It’s like hitting ‘add a gadget’ and ‘html/javascript’ and then adding it to your layout. Except this one doesn’t let you ‘upload’ photo, you need to upload it to picasa/flickr or host it on your own site, and take the link from there.

I’ll be getting into more details on the fbml and other things you can do with your facebook pages soon.

This is my first how-to post, hope I did OK. If you have any questions or suggestions, just leave me a comment on my Facebook Page.

Advertisements

58 Responses

Subscribe to comments with RSS.

  1. […] If you’re wondering how to install the fbml app to your page, you can visit my previous post here. […]

  2. Alicia said, on July 14, 2009 at 11:40 pm

    thank you! found you from the fbml static application discussion board. i plan to use more of your tutorials. many thanks for taking time out of your day to help others!
    ๐Ÿ™‚

    • rainysiew said, on July 15, 2009 at 12:36 am

      Thanks Alicia.
      I will try to update my blog as often as possible ๐Ÿ™‚

  3. Azuan said, on July 15, 2009 at 10:12 pm

    i see Winning Jobs! Thanks ๐Ÿ™‚

    • rainysiew said, on July 15, 2009 at 11:29 pm

      haha. thanks.
      you have an awesome book. i’m proud to have been involved in your project. ๐Ÿ˜‰

      btw, i keep forgetting to send you the Honda OCS pics, will send them over soon!

  4. Tara Benwell said, on July 16, 2009 at 2:20 am

    Thank you so much for this info! It has been so helpful for work.

    • rainysiew said, on July 16, 2009 at 6:25 am

      Thanks Tara. Glad it helps ๐Ÿ™‚

  5. D said, on July 18, 2009 at 12:04 am

    Hi Lorraine!

    Quick ‘dumb’ question, my img src is not working. My image gives me an error. How and where should I grab mny image from???

    • rainysiew said, on July 18, 2009 at 12:08 am

      Hi D,
      I usually upload my photos to flickr or for those taken from other websites, I would ‘right click’ and ‘copy image url’.

      • D said, on July 18, 2009 at 12:16 am

        Thanks for replying!

        I have done this, I even uploaded them to hosting sites but it still doesn’t work. Would you mind taking a look at what I have and let me know where I am messing up? Thank you so much! I am so close I can taste it… ๐Ÿ˜‰

        Test!

        Random Text here!!

  6. rainysiew said, on July 18, 2009 at 12:28 am

    Hi D,
    Your html doesn’t seem to show up in the comments.

    Could you please either email me lorrainesiew@ymail dot com or put it up on the FBML Discussion Board?
    http://www.facebook.com/topic.php?uid=4949752878&topic=10468

    Thanks ๐Ÿ™‚

  7. Jonathan said, on July 18, 2009 at 4:26 am

    Awesome post, thanks very much for contributing.

    • rainysiew said, on July 22, 2009 at 12:19 am

      Thanks Jonathan. Will be using the tips from your blog as well. ๐Ÿ™‚

  8. Debbie said, on July 20, 2009 at 10:57 am

    Your first instruction to install FBML is to go “edit page”
    I don’t see ‘edit page’ anywhere on my FB page.
    Where do I find it?

    Thanks,
    Debbie

    • rainysiew said, on July 20, 2009 at 11:59 am

      On the left side of your page, just under your profile picture. Found it?

      • Debbie said, on July 22, 2009 at 12:08 am

        Yes, that is where I clicked before – where it says “Edit my Profile”, but once I do that nowhere do I see ‘browse more applications’

      • rainysiew said, on July 22, 2009 at 12:20 am

        ‘edit my profile’? the fbml app only works on facebook pages/ public profiles.

  9. Susan said, on July 21, 2009 at 2:34 am

    Thanks for your wonderful explanations! I find the app click on add to my page and I get a screen saying add to your page and then it says no results under which page????

    Help

    Susan

    • thegreenracquet said, on July 21, 2009 at 8:36 am

      Hi Susan,

      Quite a few people are getting the same error at the moment. I have written to the developers and have yet to receive a reply.

      Keep trying ๐Ÿ™‚

  10. D said, on July 21, 2009 at 11:20 pm

    Hi again Lorraine!

    Quick question. Let’s say I finally create my custom fbml based page under ‘Boxes’. Do you know how to make this Tab my landing page? for users that visit the page?? Thanks!

    • rainysiew said, on July 21, 2009 at 11:57 pm

      Hi D
      Edit Page > Wall Settings > Default Landing Tab for Everyone Else
      Did i answer your question? ๐Ÿ™‚

      • D said, on July 22, 2009 at 12:44 am

        YES! Thank you so much!!!

  11. Lindsey said, on August 5, 2009 at 3:16 am

    Brilliant! Thanks for sharing this, it really cleared some things up for me!

    • rainysiew said, on August 7, 2009 at 8:28 pm

      Thanks for reading Lindsey. Glad it helps.

  12. Sathya said, on August 6, 2009 at 3:47 pm

    Hi, what tags in HTML are not supported? I’ve tried frameset and iframe and it doesnt work. Any idea how to create a frame or a duplicate of a webpage?

    • rainysiew said, on August 7, 2009 at 8:27 pm

      Hi Sathya, sorry but I’m not good with iframe.

  13. Bella said, on August 7, 2009 at 1:22 am

    What is the maximum length for images? Can I use this to import (display) a purely graphical image? And if so what is the maximum width for this?

    • rainysiew said, on August 7, 2009 at 8:26 pm

      Hi Bella, the maximum width for images in a tab is 760px.

  14. Mamma Mia! el musical said, on August 7, 2009 at 3:52 pm

    Hi!.

    Please, need some help here! :-). I dont know why, but it doesnยดt change anything in my facebook pages. When I edit and then save changes, it doesn’t work. The title is still showing FBML and at the tab boxes dont show anything, it’s empty.

    Did i miss something?

    • Bella said, on August 7, 2009 at 7:46 pm

      I’m having the same problem here, it’s on a page, not a profile.
      I insert the code, save changes, but nothing is there. I haven’t published the page yet, does the page need to be published in order to work??

    • rainysiew said, on August 7, 2009 at 8:21 pm

      Hey, I think it’s a problem with the FBML app itself. A few other people (from Facebook’s FBML Discussion) seem to be facing the same problem.

      • get your water tested said, on August 7, 2009 at 11:48 pm

        I too am experiencing this – I get a blank canvas page (when viewing my result) regardless of what I put into the fbml box while editing. This is VERY frustrating, especially when I’m just learning and I think I’m the one causing the errror.

        It’s like trying to learn math from a book that tells you 2+2=5.

  15. Amanda Record said, on August 18, 2009 at 8:18 am

    Having some headaches! I’ve used this app before but when I added it to a new page nothing shows up on my screen! So I can’t see the box or save button to copy and paste the code into. I would appreciate your help if you have run into this problem before.

    • rainysiew said, on August 24, 2009 at 11:58 am

      Hi Amanda,
      is your problem solved?
      you can edit the fbml by going to ‘edit page’ and then editing your app from there.

  16. Greg said, on August 18, 2009 at 11:35 am

    In step 4. in your tutorial, you show a window to enter the FMBL/HTML that I assume comes up as a result of clicking on the FBML FBML in the “edit page”. However, all I get is a jump to the Applications profile page. What is wrong here? I have the FBML box installed but how do I add the code to it?

    • Greg said, on August 18, 2009 at 11:55 am

      I figured out part of the problem….the edit box won’t come up until you move this application to the wall tab with “move to wall tab” on the “edit page” pencil icon drop-down menu.

      Now this application is removed from the boxes tab and a new option is added to the pencil icon dropdown for this app on the “edit page”. The new option is “Edit” which allows you to enter the HTML/FBML and a title for the box.

      However, once I do this….I STILL do not see it appear anywhere on the page. It does not show up under boxes tab. Does not show up on left side of Wall or anywhere else that I can find.

      ?????

      • Greg said, on August 18, 2009 at 1:08 pm

        Ok, i figured it out FYI… you have to go to “edit page”, then click on pencil (dropdown menu) for FBMLFBML. Then select “application settings”, then click on “Add” Tab. Then it shows up on the page.

  17. Stanley Ng said, on August 24, 2009 at 11:43 am

    Hi,

    I am confused with the step 1. The ‘Edit page’ is located in Home Or Profile feature? Totally ‘stupid’ question…

    Thanks
    Stanley

    • rainysiew said, on August 24, 2009 at 11:56 am

      Hi Stanley,
      the fbml app can only be added to facebook pages/public profiles, not personal profiles.

  18. Anne-Marie Provost said, on August 27, 2009 at 1:02 am

    Thx, really usefull!

  19. Denise Medved said, on August 29, 2009 at 10:45 am

    thanks so much for creating this. I am new here and have a stupid question. If I find a Box someone has created, and I like it and want to duplicate it on my page, how do I find the code to copy it?
    Many thanks, Denise

  20. Denise Medved said, on August 29, 2009 at 11:16 am

    Lorraine:
    there are 2 features I would like to add to our fan page (The Metropolitan Cooking & Entertaining Show):

    1. I like the way 1-800-FLOWERS added an e-commerce feature:

    http://www.facebook.com/1800flowers#/1800flowers?v=app_89569512162&viewas=615253224&ref=mf

    2. I like their Special Offer Tab as well:

    http://www.facebook.com/1800flowers#/1800flowers?v=app_4949752878&viewas=615253224&ref=mf

    Any idea how I can find the code to add this to my page so I can customize it?
    Many thanks

  21. bambie said, on September 10, 2009 at 6:18 am

    Hi How many tabs can you add using FBML?
    thanks

  22. newbie said, on September 12, 2009 at 3:08 am

    First let me say that I have had a facebook page for a while but didn’t really use it. I am starting to mess around with it more now and I would like to add your application. I have a very basic question though. Are there any special privacy settings that you have to change to add this to you page? When I click “Add to my page” the box comes up but it says “No Results”. I don’t know if I am doing something wrong or if I have something set incorrectly. Any help would be nice.

    Thanks

  23. Alan said, on September 12, 2009 at 4:04 am

    I have looked all over my facebook page, and I dont see an ‘edit my page’ link anywhere, I was hoping to use some of the examples of FBML but I cannot even get through the first step, which is to ‘edit my page’ link that I cannot find.

  24. […] embedded in a tab, and decided I had to know how it was done. I found a good forum thread and a succinct introduction to FBML. Learning FBML has always been on my list anyway, so I dug […]

  25. […] Facebook Pages: Introduction to FBML ยซ Lorraine Siew […]

  26. Natarlia said, on September 25, 2009 at 8:06 am

    Hey I was wondering if you can make the links added in this active so when people click on it it goes straight to that page?

  27. […] facebook-pages-introduction-to-fbml […]

  28. links for 2010-02-22 « General Musing said, on February 23, 2010 at 9:07 am

    […] Facebook Pages: Introduction to FBML ยซ Lorraine Siew (tags: fbml facebook pages profile programming) […]

  29. […] Facebook Pages: Introduction to FBML ยซ Lorraine Siew โ€“ The FBML Blog. About Elizabeth:Elizabeth Neumaier | White Gazelle delivers practical business applications for […]

  30. […] Facebook Pages: Introduction to FBML ยซ Lorraine Siew โ€“ The FBML Blog […]

  31. Quora said, on October 10, 2010 at 5:26 am

    Will it be possible to add “company overview” and “mission” to local business pages in the near future?…

    While this is true in many instances, and would most likely make Facebook Pages a little more business friendly. The way I would do this is utilize Facebook Markup Language (FBML). If you download the FBML application to your Facebook Page, you will be…

  32. […] Facebook Pages: Introduction toย FBML […]

  33. Learning fbml | Zwazwa said, on April 12, 2012 at 3:48 am

    […] Facebook Pages: Introduction to FBML « Lorraine Siew – The FBML …Jul 4, 2009 … This is my first in a series of posts about FBML and how to use it to customize ….. Learning FBML has always been on my list anyway, so I dug [. […]


Comments are closed.

%d bloggers like this: