Facebook Fan Pages Customization tutorial (FBML) ~ Hacking Arena

Recently facebook fan pages have become a great portal for showing your products to the world present at facebook. I too have a facebook fan page of my site but i haven't customized fbml of that pge to a great extent because i don't find time to do so. But i will share these small tricks to my loyal reader here. Read post to learn things and also subscribe to us.And yes we are here with a new theme. I made this for those who have a slow internet connection. Well sorry i am going of the topic. So here we start :

1. Embedding YouTube Videos in your Fanpage :
In case of embedding YouTube video on Facebook page, the default embed HTML code doesn’t works. The video on Facebook can be only embedded using the lash. Copy-Paste the code below into the FBML box of your page to embed the video. Remember to replace VIDEO_ID with the YouTube Video ID before you save.

    <fb:swf swfsrc=”http://www.youtube.com/v/VIDEO_ID” imgsrc=”http://img.youtube.com/vi/VIDEO_ID/default.jpg” width=”480″ height=”360″ />

2. Separate contents for Fans and non-fans:
Showing Separate contents for the Facebook Page fans and non fans can also help you gain more fans for your page. You can use the FMBL below and show separate content for the fans and non-fans.

    <fb:fbml version=”1.1″>
    <fb:visible-to-connection>This part is visible for fans only!
    <fb:else>This part is visible for non-fans</fb:else>
    </fb:visible-to-connection>
    </fb:fbml>

3. Invite to Friends box:
Adding an Invite to Friend box below the main Content of your welcome Tab will also help you increase the fans of your page as it makes your fans easier to invite their friends on Facebook. Use the following code in FBML box to insert the Invite box in your page :

    <fb:request-form method=”post” type=”[your organization]” invite=”true” content=”Check out [your organization]<fb:req-choice url=’http://www.facebook.com/YOURPAGE’ ‘ label=’GO’ /> “>
    <fb:multi-friend-selector actiontext=”Tell your friends about [your organization]” rows=”3″ showborder=”true” />
    </fb:request-form>

4. Adding a Comment Box:
Adding a comment box will allow the fans of the page to give a reply easily at you fbml page. Thats a gooe feature use the code below to enable it :

    <fb:comments xid=”YOUR_PRODUCT_UNIQUE_ID” canpost=”true” showform=”true” candelete=”false” numposts=”3″ returnurl=”http://YOUR_PRODUCT_HOME_URL”>
    </fb:comments>

5. Adding podcasts and MP3 Audios:
Like YouTube videos you can also embed podcasts or any Mp3 Audio on your Fan page using the Fbml. You have to provide the direct link to the mp3 audio file or Podcast in the Fbml.

    <fb:mp3 src=”http://example.com/podcast.mp3″ title=”Our new Song” artist=”This Week in Facebook” />

6. Adding pop-up Dialog Box :
The Pop-up dialog box is used to give the short description of the link with on a Popup dialog box whenever a user clicks a specified link in your fan page.
For instance,You have used pop-up box for the ‘About’ Link on your page then it will show the popup box as above when your fan click on the link and the ‘learn more’ link can be even redirected to your About page.

    <fb:dialog id=”dialog” cancel_button=1>
    <fb:dialog-title>About Us</fb:dialog-title>
    <fb:dialog-content>Hackers Thirst is a blog on hacking an tech.
    Would you like to learn more?</fb:dialog-content>
    <fb:dialog-button type=”button” value=”Yes” href=”http://www.hackersthirst.com” />
    </fb:dialog>
    <a href=”#” clicktoshowdialog=”dialog”>Click here</a> to learn more.

7. Inserting Flash Content:
Inserting Flash Content on your Facebook page is also like inserting YouTube video in your Page. Use the Fbml to insert Flash content n your page. Use the Flash file URL in the swfsrc and use the image URL on imgsrc as the source of the image that is being displayed, before your flash.

    <fb:swf swfbgcolor=”000000″ swfsrc=’http://domain.com/file.swf’ imgsrc=’http://domain.com/picture.jpg’ width=’760′ height=’920′ />

8. Adding a Chat Room:
Adding a chat room on your Fan page enables you to chat with your Fans when they are on your page. Firsth thing yopu need is to create a Flash based chat widget for your Facebook page using MeeboMe and then embed that Chat widget on your Facebook Fbml box usng the code below.

Remember to replace CHAT_ID with your widget chat Id provided by Meeome before you save the code.

    <fb:swf swfsrc=’http://widget.meebo.com/mm.swf?CHAT_ID’ width=’515′ height=’425′ imgsrc=”chat-thumbnail.jpg” />

9.Adding a share button:
A share button on your Facebook page lets your fan to share the provided link on their Facebook profile easily. You can use the following code on Fbml Box of your Page to insert the ‘Share’ button on your fan page.

    <fb:share-button class="meta">
    <meta name="medium" content="mult"/>
    <meta name="title" content="name of fan page"/>
    <meta name="description" content="description of fan page"/>
    <link rel="image_src" href="url to image location" />
    <link rel="target_url" href="http://facebook.com/hackersthirst"/>
    </fb:share-button>

10.Showing Visitor’s name
Its good to welcome user on your page with his name and in0rder to show name use following script :

    <fb:userlink uid="loggedinuser" />

Hope it may help you someday! for further reference go to Facebook Developers.

Facebook Fan Pages Customization tutorial (FBML)

Recently facebook fan pages have become a great portal for showing your products to the world present at facebook. I too have a facebook fan page of my site but i haven't customized fbml of that pge to a great extent because i don't find time to do so. But i will share these small tricks to my loyal reader here. Read post to learn things and also subscribe to us.And yes we are here with a new theme. I made this for those who have a slow internet connection. Well sorry i am going of the topic. So here we start :

1. Embedding YouTube Videos in your Fanpage :

In case of embedding YouTube video on Facebook page, the default embed HTML code doesn’t works. The video on Facebook can be only embedded using the lash. Copy-Paste the code below into the FBML box of your page to embed the video. Remember to replace VIDEO_ID with the YouTube Video ID before you save.

<fb:swf swfsrc=”http://www.youtube.com/v/VIDEO_ID” imgsrc=”http://img.youtube.com/vi/VIDEO_ID/default.jpg” width=”480″ height=”360″ />

2. Separate contents for Fans and non-fans:

Showing Separate contents for the Facebook Page fans and non fans can also help you gain more fans for your page. You can use the FMBL below and show separate content for the fans and non-fans.

<fb:fbml version=”1.1″>
<fb:visible-to-connection>This part is visible for fans only!
<fb:else>This part is visible for non-fans</fb:else>
</fb:visible-to-connection>
</fb:fbml>

3. Invite to Friends box:

Adding an Invite to Friend box below the main Content of your welcome Tab will also help you increase the fans of your page as it makes your fans easier to invite their friends on Facebook. Use the following code in FBML box to insert the Invite box in your page :

<fb:request-form method=”post” type=”[your organization]” invite=”true” content=”Check out [your organization]<fb:req-choice url=’http://www.facebook.com/YOURPAGE’ ‘ label=’GO’ /> “>

<fb:multi-friend-selector actiontext=”Tell your friends about [your organization]” rows=”3″ showborder=”true” />

</fb:request-form>

4. Adding a Comment Box:

Adding a comment box will allow the fans of the page to give a reply easily at you fbml page. Thats a gooe feature use the code below to enable it :

<fb:comments xid=”YOUR_PRODUCT_UNIQUE_ID” canpost=”true” showform=”true” candelete=”false” numposts=”3″ returnurl=”http://YOUR_PRODUCT_HOME_URL”>
</fb:comments>

5. Adding podcasts and MP3 Audios:

Like YouTube videos you can also embed podcasts or any Mp3 Audio on your Fan page using the Fbml. You have to provide the direct link to the mp3 audio file or Podcast in the Fbml.

<fb:mp3 src=”http://example.com/podcast.mp3″ title=”Our new Song” artist=”This Week in Facebook” />

6. Adding pop-up Dialog Box :

The Pop-up dialog box is used to give the short description of the link with on a Popup dialog box whenever a user clicks a specified link in your fan page.
For instance,You have used pop-up box for the ‘About’ Link on your page then it will show the popup box as above when your fan click on the link and the ‘learn more’ link can be even redirected to your About page.

<fb:dialog id=”dialog” cancel_button=1>
<fb:dialog-title>About Us</fb:dialog-title>
<fb:dialog-content>Hackers Thirst is a blog on hacking an tech.
Would you like to learn more?</fb:dialog-content>
<fb:dialog-button type=”button” value=”Yes” href=”http://www.hackersthirst.com” />
</fb:dialog>
<a href=”#” clicktoshowdialog=”dialog”>Click here</a> to learn more.

7. Inserting Flash Content:

Inserting Flash Content on your Facebook page is also like inserting YouTube video in your Page. Use the Fbml to insert Flash content n your page. Use the Flash file URL in the swfsrc and use the image URL on imgsrc as the source of the image that is being displayed, before your flash.

<fb:swf swfbgcolor=”000000″ swfsrc=’http://domain.com/file.swf’ imgsrc=’http://domain.com/picture.jpg’ width=’760′ height=’920′ />

8. Adding a Chat Room:

Adding a chat room on your Fan page enables you to chat with your Fans when they are on your page. Firsth thing yopu need is to create a Flash based chat widget for your Facebook page using MeeboMe and then embed that Chat widget on your Facebook Fbml box usng the code below.

Remember to replace CHAT_ID with your widget chat Id provided by Meeome before you save the code.

<fb:swf swfsrc=’http://widget.meebo.com/mm.swf?CHAT_ID’ width=’515′ height=’425′ imgsrc=”chat-thumbnail.jpg” />

9.Adding a share button:
A share button on your Facebook page lets your fan to share the provided link on their Facebook profile easily. You can use the following code on Fbml Box of your Page to insert the ‘Share’ button on your fan page.

<fb:share-button class="meta">
<meta name="medium" content="mult"/>
<meta name="title" content="name of fan page"/>
<meta name="description" content="description of fan page"/>
<link rel="image_src" href="url to image location" />
<link rel="target_url" href="http://facebook.com/hackersthirst"/>
</fb:share-button>

10.Showing Visitor’s name
Its good to welcome user on your page with his name and in0rder to show name use following script :

<fb:userlink uid="loggedinuser" />

Hope it may help you someday! for further reference go to Facebook Developers.

- See more at: http://www.hackersthirst.com/2011/01/facebook-fan-pages-customization.html#sthash.ni2TOMVg.dpuf