Lorraine Siew - The FBML Blog

Facebook Pages: FBML Examples (Part 2)

Posted in Facebook 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 in a few examples for boxes for stuff like news updates or text links.

By the way, I know that this probably isn’t the best way for me to display html codes, but I will be getting my blog hosted soon, so hopefully things will be looking better then. Here we go:

1) Box with Links and Short Excerpts

The blue box on the right is the original. I took the code from Facebook’s Developer Wiki. Just wanted to show you that you can take something as boring as that menu, change it up a bit and make it interesting and ‘customized’. Here’s the code I used:

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

.menu {

background:#FFFFFF none repeat scroll 0 0;

border:1px dashed #BDC7D8

;

padding:5px;

font-family:”lucida grande”,tahoma,verdana,arial,sans-serif;

font-size:11px;

width: 600px;

margin-left:10%;

margin-right:10%;

}

.menu h3 {

margin-bottom:10px;

padding:5px 0 0 5px;

font-size:13px;

}

.menu ul {

color:#3B5998;

padding:0 10px 5px;

}

.menu li {

font-weight:bold;

list-style-image:none;

list-style-position:inside;

list-style-type:square;

padding:0 0 5px;

}

.menu .descrip {

color:#444444;

font-weight:normal;

padding:3px 0 0 15px;

}

h3 {color:#3b5998;}

<!–

a:link {color: #3b5998; text-decoration: none; }

a:active {color: #3b5998; text-decoration: none; }

a:visited {color: #3b5998; text-decoration: none; }

a:hover {color: #3b5998; text-decoration: none; }

–>

</style>

<div >

<h3>Squash in the News:</h3>

<ul>

<li>

<a href=”http://www.gamesbids.com/eng/olympic_sports_bids/1216134437.html”>IOC: Seven Sports Presentations “Interesting”, “Informative”</a>

<div>All seven sports vying for inclusion in the 2016 Summer Olympic Games presented their plans to the International Olympic Committee Monday. The sports are baseball, golf, karate, roller sports, rugby sevens, softball and squash…</div>

</li>

<li>

<a href=”http://www.timesonline.co.uk/tol/sport/olympics/article6473497.ece”>Times: Golf and sevens lead race for 2016 Olympics</a>

<div>The chance for a sport to join the Olympic Games comes around so infrequently, it pays not to miss the boat. The most recent welcomed to the top table were taekwondo and triathlon at the Sydney Games in 2000 and it will not be until 2016 when another two…</div>

</li>

<li>

<a href=”http://www.caymannetnews.com/news-16226–11-11—.html”>Cayman: Sponsoring squash success</a>

<div>Stepping Stones was one of the sponsors of the Cayman Squash Open, which ran from 5 to 10 May. The competition boasted some of the top male and female competitors ever to compete in the Caribbean…</div>

</li>

<li>

<a href=”http://www.telegraph.co.uk/sport/othersports/olympics/5534171/Golf-and-rugby-sevens-favourites-for-2016-Olympics.html”>Telegraph: Golf and rugby sevens favourites for 2016 Olympics</a>

<div>Baseball and softball, the two sports dropped from the Olympic schedule for the London games, are seeking readmission, with roller-sports, squash and karate completing the line-up of sports seeking approval that would transform their profile…</div>

</li>

<li>

<a href=”http://www.nytimes.com/2009/06/08/nyregion/08squash.html?ref=education”>NYTimes: Using Squash Court to Put Youths on Road to College</a>

<div>Using squash as a tool for academic advancement in urban settings occupies a small but growing niche, said Greg H. Zaff, creator of Boston’s SquashBusters, one of the first such programs in the country. With Mr. Polsky and the directors of CitySquash…</div>

</li>

</ul>

</div>

<br>

</tr>

</table>

.menu {

background:#FFFFFF none repeat scroll 0 0;

border:1px dashed #BDC7D8; padding:5px;

font-family:”lucida grande”,tahoma,verdana,arial,sans-serif; font-size:11px;

width: 600px; margin-left:10%; margin-right:10%;

}

.menu h3 {

margin-bottom:10px; padding:5px 0 0 5px; font-size:13px;

}

.menu ul {

color:#3B5998; padding:0 10px 5px;

}

.menu li {

font-weight:bold;

list-style-image:none; list-style-position:inside; list-style-type:square;

padding:0 0 5px;

}

.menu .descrip {

color:#444444; font-weight:normal;

padding:3px 0 0 15px;

}

h3 {color:#3b5998;}

<!–

a:link {color: #3b5998; text-decoration: none; }

a:active {color: #3b5998; text-decoration: none; }

a:visited {color: #3b5998; text-decoration: none; }

a:hover {color: #3b5998; text-decoration: none; }

–>

</style>

<h3>YOUR BOX TITLE HERE</h3>

<ul>

<li><a href=”YOUR LINK HERE”>Your Link Title Here</a>

<div class=”descrip”>Your Link Description Here</div>

</li> <li>

<a href=”YOUR LINK HERE”>Your Link Title Here</a>

<div class=”descrip”>Your Link Description Here</div>

</li> </ul> </div> </tr> </table>

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

2) Blog-style News Box

I pieced this one together with bits of codes here and there from the Facebook Developer’s Wiki as well. I don’t think this one looks as good as the first box(it hardly does), but just to show you that it can be done, even by a noob like me. So get creative!

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

.forum table { width:600px; }

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

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

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

.forum table .upd_on {

color: gray; margin: 0 0 0px 5px;

font-size:10px; font-weight:normal;

padding:0; text-align: right;

}

.forum table h4 {

border-bottom:1px solid #CCCCCC;

font-size:13px; font-weight:bold;

color: #999999; padding-top: 15px;

display:block; margin:0;

}

</style>

<td><h4>Whatever Title You Want To Put Here</h4>

<p class=”upd_on”>Updated on 1 June, 2008</p>

<p>Your Totally Awesome Content Here.</p> </td>

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

3) FB-Style FBML Box

Just a simple box here. I am clearly running out of ideas..

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

table td { width:360px;height:360px;padding:10px;text-size:11px; }

/* Facebook Box Header */

td h2

{

background-color:#D8DFEA; border-top:1px solid #3B5998;

color:#3B5998; font-size:11px;

padding:3px 6px; margin:0;

font-weight:bold; width:360px

}

.menu ul {

color:#3B5998; padding:0 10px 5px;

}

.menu li {

font-weight:bold; list-style-color:#999999; list-style-position:inside; list-style-type:square; padding:0 0 5px;

}

.menu .descrip {

color:#444444; font-weight:normal; padding:5px 0 0 15px;

}

</style>

<td> <h2>News from Newspapers</h2><ul><li>

<a href=”#”><b>It’s Jenny Duncalf for the final showdown</b></a>

<div class=”descrip”><img src =”http://i656.photobucket.com/albums/uu281/sqstars/Final_Squash_Star_Logo.png”

align =”right” width=”80″ height=”135″>It was a cool evening today on the glass court but both Jenny and I are fired up to get it going in this final.The ball was dying at the back corners a lot more today from my drives that came in well in the first game…</div>

</li> </ul></td>

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

So that’s three examples of fbml boxes for today. By the way, you can learn more about how to style your fbml like Facebook here.

Next up, I’ll be writing about real, practical ways to use your facebook page / public profile for promotion, as well as a few tricks to further customize your page.

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