Lorraine Siew – The FBML Blog

Facebook Pages: FBML Examples (Part 1)

Posted in Facebook Pages by rainysiew on July 4, 2009

Here are some FBML examples that I took from one of the pages I admin.

This is THE place to go if you want the real Facebook Style codes.

Some of them I take from there and tweak it. But for those of you who just want to add a image link to your website or things like that, you can just use these codes.

1) Box with image and text
fbml example 3

——————————————————————-

<center><br><a href=”http://www.squashstars.com/events/2009/06/olympic-2016-postcard-pledge.html&#8221; target=”_blank”><img src=”http://www.squashstars.com/events/uploaded_images/SquashBall-761011.jpg&#8221; width=”180px” height=”180px” border=”0″ alt=”” /> <br><br> <h2>FIND OUT WHO WON</h2> </centre>

——————————————————————-

2) Box with 2 images and no text

fbml example 4

——————————————————————-

<center> <br> <a href=”http://www.nicoldavidonline.com&#8221; target=”_blank”><img src=”http://profile.ak.facebook.com/object3/147/30/n7999401113_5343.jpg&#8221; width=”140px” height=”160px” border=”0″ alt=”” /> <br> <br> <a href=”http://www.facebook.com/group.php?gid=53608588426&#8243; target=”_blank”><img src=”http://i656.photobucket.com/albums/uu281/sqstars/Final_Squash_Star_Logo.png&#8221; width=”95px” height=”160px” border=”0″ alt=”” /> <br> <br> </center>

——————————————————————-

3) Box with simple quote

fbml example 2

——————————————————————-

<style type=”text/css”> blockquote { background:transparent url(http://www.facebook.com/images/start_quote_small.gif) no-repeat scroll -1px 0; color:#333333; line-height:14px; margin:14px 0; padding:0 0 0 16px; } blockquote span { background:transparent url(http://www.facebook.com/images/end_quote_small.gif) no-repeat scroll right bottom; padding:0 15px 0 0; } </style> <blockquote> <span>Nicol is a class act, when it comes to action, she is anyone’s nightmare. Nicol is a great ambassador of the sport and is one of the greats in WISPA! </span><br><br> -Natalie Grainger </blockquote>

——————————————————————-

4) Box with rows of text.

fbml example 1

——————————————————————-

<style type=”text/css”>

.forum table { width:200px; }

.forum table tr { background-color:#FFFFFF; }

.forum table tr.odd { background-color:#F0F0FF; }

.forum table td { padding:3px 3px 3px 9px; }

.forum table .subheader { color:gray; font-size:9px; }

.forum table h4 { font-weight:bold;margin:0;font-size:11px; }

</style>

<div class=”forum”>

<table cellspacing=”0″>

<tr class=”odd”><td> <h4>Nicol David</h4> <div>#1 – Malaysia</div> </td> </tr>

<tr> <td> <h4>Natalie Grainger</h4> <div>#2 – United States</div> </td> </tr>

<tr class=”odd”> <td> <h4>Rachael Grinham</h4> <div>#3 – Australia</div> </td> </tr>

<tr> <td> <h4>Natalie Grinham</h4> <div>#4 – Netherlands</div> </td> </tr>

<tr class=”odd”> <td> <h4>Alison Waters</h4> <div>#5 – England</div> </td> </tr> </table>

</div>

——————————————————————-

So those are some examples of simple fbml/html to get your started.

So, that’s about it for now. Look out for Part 2.

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

As always, if you have any questions or suggestions, just leave me a comment on my Facebook Page. Thanks for reading.



Advertisements

21 Responses

Subscribe to comments with RSS.

  1. […] You can get the html for an image link from my last post here. […]

  2. Becks said, on July 7, 2009 at 11:44 pm

    Hey Lorraine,

    I am trying to use your ‘Box with Rows of text’ code but cannot get the rows to alternate colors. Mine shows up all white when I use your exact code. Any ideas? Thanks.

    Becks

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

      Hi Becks,

      Sorry ’bout that! I’ve edited the tags. Hope it works now?

  3. Becks said, on July 8, 2009 at 3:05 am

    Hi,

    It’s still not coming up with alternating colors. The box is totally white. Hmmm.

    Thanks,
    Becks

    • rainysiew said, on July 8, 2009 at 6:05 am

      Hi Becks,

      Maybe you could paste the html here so I can take a look at it? 🙂

  4. Azuan said, on July 8, 2009 at 4:46 pm

    wahhh so good a you. can make business from this skill you know…

    • rainysiew said, on July 8, 2009 at 8:57 pm

      nah.. i don’t think i’m gong to charge people for little pieces of code.. but who knows, maybe in a few years..

      and if i ever do, YOU’LL be the first person i charge!! 😛

  5. […] Pages by rainysiew on July 9, 2009 Hi all. Here are some more examples of FBML Boxes for you. In Part 1, I gave examples mostly for a short paragraph of text or an image. Now in Part 2, I’m putting […]

  6. James said, on July 17, 2009 at 11:36 pm

    Love this. Great help. One question though, I am finding it works fine in FF, but for some reason my image will not show in IE. Any ideas?

    Thanks
    j

    • rainysiew said, on July 17, 2009 at 11:50 pm

      Hi James,
      I’m not too sure. It works fine on mine..

  7. Katie said, on July 17, 2009 at 11:53 pm

    I am also trying to do the alternate colors and the box shows up white. Thanks in advance.
    Here is my html:

    .forum table { width:200px; }

    .forum table tr { background-color:#FFFFFF; }

    .forum table tr.odd { background-color:#F0F0FF; }

    .forum table td { padding:3px 3px 3px 9px; }

    .forum table .subheader { color:gray; font-size:9px; }

    .forum table h4 { font-weight:bold;margin:0;font-size:11px; }

    Effect of Health Risk Appraisal Frequency on Change in Health Status. Pai, C.W., S.E. Hagen, J. Bender, D. Shoemaker, D.W. Edington. Journal of Occupational and Environmental Medicine. 51(4):429-34, 2009.

    Effects of an Incentive-Based Online Physical Activity Intervention on Health Care Costs. Lu, C. A.B. Schultz, S. Sill, R. Petersen, J.M. Young, D.W. Edington. Journal of Occupational and Environmental Medicine. 50(11):1209-15, 2008.

    The Association between a Tiered Pharmacy Benefit Plan and Medication Usage, Health Status and Disability Absence Days. Burton Wayne N., Chin-Yu Chen, Alyssa B Schultz, Dee W. Edington. Journal of Occupational and Environmental Medicine. 50(10):1176-1184, 2008.

    The Prevalence of Metabolic Syndrome in an Employed Population and the Impact on Health and Productivity Burton, W.N., C.Y. Chen, A.B. Schultz, D.W. Edington. Journal of Occupational and Environmental Medicine. 50(10):1139-48, 2008.

    Association between Behavioral Intention and Actual Change for Physical Activity, Smoking and Body Weight among an Employed Population. Pai, Chih-Wen, Dee W. Edington. Journal of Occupational and Environmental Medicine. 2008;50(9):1077-1083.

    Click here to access publicationsComplete list of HMRC publications.

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

      Hi Katie,
      that’s really weird. I just tried the code again and it the color doesn’t show up! But in my old box, the color is still there.

      I got the original code from here. Looks the same to me..
      http://wiki.developers.facebook.com/index.php/Facebook_Styles

      • Katie said, on July 18, 2009 at 12:20 am

        I figured it out from that site you just posted. Inside the div tag needs to raed:

        currently it only reads:

        After I made that change it worked! Thank you!

  8. rainysiew said, on July 18, 2009 at 12:30 am

    Hi Katie,

    So it’s the div tag! div class=”forum”?
    Your html doesn’t seem to be showing up in my comments.

    Thanks!

    • Katie said, on July 18, 2009 at 12:34 am

      sorry– the div should read div class=”subheader”

      Is there a way to arrange the boxes next to each other in the Boxes tab rather than in a vertical column or all in separate tabs?

  9. rainysiew said, on July 18, 2009 at 12:46 am

    thanks!

    well i think that it’s possible depending on the size of your box. then you could use the align left, right tags.

    here are the box dimensions for the boxes tab
    Box dimensions for Facebook fan page boxes tab

  10. Fav said, on August 6, 2009 at 3:13 pm

    Hi, have been trying the scripts but the images just doesn’t appear? What could be the problem? Have been figuring it out but nothing seemed to work

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

      Hi Fav,
      I’ve been hearing a few problems with the FBML app itself today. Please try again later and let me know if it still foesn’t work. Thanks.

  11. Emily said, on September 3, 2009 at 6:50 am

    Hi there!

    I’ve tried copying the above FMBL into a new FMBL box, but the content just shows up on the boxes page. How do I make it show up in the left hand column as shown in the images above?

    Thanks for the help in advance!

  12. maggot said, on September 11, 2009 at 2:06 pm

    Dear Lorraine,

    Thanks for the tips. Great write up.

    Cheers!

  13. Niklas said, on September 23, 2009 at 3:42 am

    Hi!

    Great site with some great examples.

    However when making the quote box, I can’t see the end quote.
    I have tried all sorts of tweaks, but nothing happens unless I type no more than two or three words?


Comments are closed.

%d bloggers like this: