Important Basic FBML Codes

1-Basic text Codes

-To make a word clickable to another website or a page: ------------------------------------------------------- <a title="whatever the name of the linked page is" href="http://www.whateverwhatever.com/">word you want clickable</a> -Italicized Text: ----------------- <b> TEXT </b> -Colored Text: ---------------- <font color="red"> TEXT </font> -Different Fonts : ------------------ <font face="Berlin sans fb"> TEXT </font> -Font Size: ------------ <font size="5"> TEXT </font> -Underlined Text: --------------------- <u> TEXT </u> -New line: ----------- <BR> 2-To insert a picture

<img src="PICTURE URL"> 3-Invitation box

<fb:request-form method="post" action="YOUR URL" type="YOUR PAGE NAME" invite="true" content="Check out YOUR PAGE Here on Facebook!<fb:req-choice url='YOUR PAGE URL' ' label='GO' /> "> <fb:multi-friend-selector actiontext="Tell your friends about us"cols="3" rows="3" showborder="true" /> </fb:request-form> 4-welcome with the name of the visitor

<center> <font face="monotype corsiva"><font size="6"><font color="#FF0080"> <br><B> welcome </B><fb:userlink uid="loggedinuser" /> <br> </center> 5-Comment box

<fb:comments xid="PUT ANY UNIQUE NUMBER_comments" canpost="true" candelete="false" returnurl="YOUR PAGE UR"> <fb:title>say your word</fb:title> </fb:like> </div> 6-Insert YouTube video

<center> <fb:swf swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;" swfsrc='http://www.youtube.com/v/XXXXXXXXXXX' imgsrc='http://img.youtube.com/vi/XXXXXXXXXXX/2.jpg' width='340' height='270' /> </center> (whrere XXXXXX is the ID of the youtube video) 7-Insert mp3

<fb:mp3 src="URL OF THE MP3" title="name of song" artist="name of band" album="title of album"/> 8-Share Button

<fb:share-button class="url" href="YOUR URL" /> 9-like Button:

<style type="text/css"> #wrapper {background-image: url('http://freedomdefined.org/upload/thumb/9/98/Blank_button.svg/424px-Blank_button.svg.png'); background-repeat: none; width:520px; height:30px; display: block; overflow: hidden;} </style> <div id="wrapper"> <fb:comments xid="00_comments" canpost="false" candelete="false" returnurl="PAGE URL"> <fb:title></fb:title> </fb:like> </div> 10-Background Color

<div style="background-color:#00FFFF;width:520px;"> <p> <BR/> Write what you want (TEXT& CODES) <BR/> </p> </div> 11-Background Image

<center><div style="background-image:url(IMAGE URL); background-repeat:no-repeat;border: 2px solid black; background-position:50% 0%; width:500px; height:1000px;"> <p> <BR/> <BR/> IF YOU WANT TO WRITE SOMETHING INSIDE THE PIC <BR/> <BR/> </p> </div></center> 12-Hide contents of the tab

<fb:visible-to-connection> PUT YOUR CODE </fb:visible-to-connection> 13-To insert a picture so that it is linked to a website

<a href="http://www.whatever.com/linktoexactpage.html" target="_blank"><img src="PICTURE URL" alt="whatever this is a picture of including a keyword or two" border="0"></a> 14-Invite your online friends

<CENTER> <fb:chat-invite msg="WHAT DO YOU WANT TO WRITE FOR INVITATION" condensed="false" exclude_ids="1,2,3"/> </CENTER> 15-Button linked to URL

<CENTER> <a href="URL"><input type="submit" value="BUTTON NAME" name="B1"></a> </CENTER> 16-Facebook Search Box

<CENTER> <FORM method=GET action="http://www.facebook.com/search"> <TABLE bgcolor="#FFFFFF"><tr><td> <A HREF="http://www.facebook.com/"> <IMG SRC="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs624.snc3/27535_20531316728_5553_q.jpg" border="0" ALT="Google" align="absmiddle"></A> <INPUT TYPE=text name=q size=31 maxlength=255 value=""> <INPUT TYPE=hidden name=hl value=it> <INPUT type=submit name=btnG VALUE="Search In FaceBook"> </td></tr></TABLE> </FORM> </CENTER> 17-Google Search Box

<CENTER> <form action="http://www.google.com/search" method="get" target="_blank"> <table height="28" cellSpacing="0" cellPadding="0"> <tbody> <tr> <td height="24"><a style="COLOR: #2e5295; TEXT-DECORATION: none" href="http://www.google.com/"><img alt="Google" src="http://www.google.com/logos/Logo_40wht.gif" align="absMiddle" border="0" width="128" height="53"></a> <input maxLength="255" size="25" name="q" style="color: #800000; border: 1 solid #000000"> <input type="submit" value="Search" name="btnG" style="color: #FFFFFF; font-family: Tahoma; background-color: #333300; border: 1 solid #000000"></td> </tr> </tbody> </table> </form> </CENTER> 18-Open a site inside the Page

<font size="6"><b><center><a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">NAME OF SITE</a> <div id="outside_location"></div> <fb:js-string var="link_1"> <fb:iframe height="500" allowTransparency="true" frameborder="0" scrolling="yes" width="500"; border:none" src="SITE URL"></fb:iframe> </fb:js-string> <script type="text/javascript" charset="utf-8"> var outside_location = document.getElementById('outside_location'); </script> </center></b></font> 19-Make scrollable Box

<CENTER> <style type="text/css"> div.scroll { background-color:#6DBBE0; width:400px; height:200px; overflow:scroll; } </style> <div class="scroll"> WRITE WHAT YOU WANT </div> </CENTER> 20-Microsite Code

<!-- This Wrapper box limits the width to 560px --> <div style="width:560px"> <!-- navigation elements --> <a href="#" clicktoshow="nav1" clicktohide="nav2,nav3,nav4"><img src="http://png-5.findicons.com/files/icons/2140/vista_inspirate/128/home.png" alt="Home" /></a> <a href="#" clicktoshow="nav2" clicktohide="nav1,nav3,nav4"><img src="http://www.vmworld.com/images/social-icons-youtube.png" alt="About" /></a> <aref="#" clicktoshow="nav3" clicktohide="nav1,nav2,nav4"><img src="http://www.iconshock.com/social-icons/slide_share-icon.png" alt="info" /></a> <a href="#" clicktoshow="nav4" clicktohide="nav1,nav2,nav3"><img src="http://rssblog.whatisrss.com/wp-content/uploads/2007/07/feed-icon-128x128.gif" alt="tactCon" /></a> <!-- Content to display when user clicks on the Home tab --> <div id="nav1"> <br /><br /> <img style="width:540px" src="http://www.followthewomen.com/towerextranet/htdocs/images/pageContent/Image/ist2_3171215-peace-dove-flying.jpg " alt="Home" /> <br /><br /> <span style="font-size:3em"><strong>WRITE WHAT YOU WANT</strong></span> <br /> </div> <!-- Content to display when user clicks on the youtube tab --> <div id="nav2" style="display: none;"> <br /><br /> <span style="font-size:3em"><strong>WRITE WHAT YOU WANT 2</strong></span><br /> </div> <!-- Content to display when user clicks on the info tab --> <div id="nav3" style="display: none;"> <br /><br /> <span style="font-size:3em"><strong>WRITE WHAT YOU WANT3</strong></span> <br /> </div> <!-- Content to display when user clicks on the Contact tab --> <div id="nav4" style="display: none;"> <br /><br /> <span style="font-size:3em"><strong>WRITE WHAT YOU WANT 4</strong></span> </div> <!-- end of the wrapper --> </div>