FBML Fanpage Creation Part 2

In this tutorial I am going to provide you different codes you can use in your FBML page you already created.

This is meant to help even noobs who have no basic idea of HTML


Adding a Link

To add a link to your fanpage use the HTML code below. Replace the text in red with your URL and change the anchor text to your desired text

<a  href="YOUR URL">Anchor Text</a>

For example, using the code

<a  href="http://www.lazyncrazy.in">My Websiste</a>

will result in My Websiste

Adding a Picture

To add a picture to your fanpage use the HTML code below. Replace the text in red with your picture URL

<img src="YOUR PICTURE URL"/>

For example, using the code

<img src="http://www.9mb.com/forums/images/smilies/smiley_rolling.gif"/>

you can display this smiley image

Adding a Video

We can also embed videos from YouTube on  fanpages using the below code

<fb:swf 
 swfbgcolor="000000" 
 imgstyle="border-width:3px; border-color:white;" 
 swfsrc='http://www.youtube.com/v/xxxxxxxxxx' 
 imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg' 
 width='340' height='270' />

Replace the green URL with your video URL
Here we have to add an image file in addition to the video URL because facebook pages don't play video unless the user clicks on the video. So it is better to place an image of a video player in the red link
You can get video player images here

To see how the page will look like with a video player click here

Comment Box

Now that you have a wonderful page your vistors would like to appreciate its beauty! So let's add a comment box where your fans and visitors can leave their feedback.
This code is:

<fb:comments 

numposts="4" 

title="My Page Comments" 

</fb:comments>

 All the text in red can be replaced with your own.
numposts means the number of comments to show in the page.

You can make the comment box a little more advanced by adding a title, unique identifier and options to delete comments and share URL. Then the code is becomes

<fb:comments 

xid="UNIQUE NAME"

numposts="4" 

canpost="true" 

candelete="false"

title="My Blog Comments" 

returnurl="http://www.facebook.com/FrndzCafe?v=app_4949752878/">

</fb:comments> 

Pop-up Dialog Box

To make a pop-up dialog when a user clicks on a link or picture on the fanpage use the code below

  <!-- FBML LINK -->
<a href="#" clicktoshowdialog="dialog">[NAME OF LINK]</a>
<!-- END FBML DIALOG LINK -->
<!-- FBML DIALO -->
<fb:dialog id="dialog">
<fb:dialog-title>INSERT DIALOG TITLE</fb:dialog-title>
<fb:dialog-content>
INSERT HTML CONTENT
<fb:dialog-button type="submit" value="Close" close_dialog=true />
</fb:dialog-content>
</fb:dialog>
<!-- END FBML DIALOG -->

 At first we create a link which when the user clicks the dialog should pop-up. The code in green does the job.When the user clicks on the text  in [NAME OF LINK] the dialog box pops up. You can replace [NAME OF LINK] with your required text. Next is the dialog box which can be created by adding the code in red. Replace INSERT HTML CONTENT with your desired content.