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
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