You can give your page more professional look by: - Using CSS.
- Showing visitor’s name on your page.
- Adding like button on your page.
- Adding share button.
- Adding videos and mp3 files.
To do all these things you have to add "Static FBML" application to your page, Check Static FBML tutorial.
Using CSS
CSS can give your fan page more professional look and it will make your page more presentable.
You can use Inline CSS or external CSS, as Inline will not work in IE(Internet Explorer), so I would recommend you to go for external CSS .
To add styling sheet add the following code to your static FBML tab:
<link ref="stylesheet" type="text/css" href="http://yoursite.com/style.css" />
Showing Visitor’s name
I think it is a good idea to welcome user on your page with his name, it will be more attractive. To show visitor’s name use the following code in Static FBML tab:
<fb:userlink uid="loggedinuser" />
Note: Although this method has been depreciated but it still works for fan pages.
Adding like button on your page
Although like button is there on the top of your page, but this would be useful if you have more than one page so that you can add like buttons with comments for your other pages too on your page. To add like button with comments use the following code:
<fb:comments xid="test" width="300" returnurl="http://www.facebook.com/you-page-url "></fb:comments>
<table width="520" border="0">
Adding share button
Share button is also there on your page, but most visitors don't pay attention to it because it is located at bottom left of your page, and also if you want to add share button to share something else then this extra button would be useful. Use the following code to add share button to your static FBML tab:
<fb:share-button class="meta">
<meta name="title" content="onlytipsandtricks.com"/>
<meta name="description" content="All tips, tricks and tutorials about computer, web and social networking sites!"/>
<link rel="image_src" href="http://yoursite.com/images/fbthumb.jpg"/>
<link rel="target_url" href="http://www.facebook.com/youpage"/>
</fb:share-button>
Adding videos and mp3 files
You can add videos and mp3 by using following codes to your static FBML tab.
To add mp3:
<fb:mp3 src="http://site.com/song.mp3" title="Song Name" artist="Song Artist" album="Album Name"/>
To add swf or youtube videos:
<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' />
To add flv:
<fb:flv src='http://www.site.com/video.flv' width='373' height='399' title='my video' color='#FFBB00' salign='r' img='http://www.site.com/pic.jpg' scale='showall'/>
Note: Facebook is in the process of depreciating FBML, but I think it will continue to work for fan pages.
Thanks for the tutorial. I am having a problem though which is that I can't seem to get my css to work properly. What I did was to link to an external style sheet and use absolute positioning of my content but I can't seem to get it to work at all- have any suggestions? Is the absolute positioning supported?
ReplyDeleteHope you have an answer for me on this question (problem). Thanks for your help on this if possible!
Best Regards,
abbe
I think absolute positioning is not supported, but you cant use relative positioning like this:
ReplyDelete[code]<div style="position:relative; left:100px; right:100px;">
content to be positioned
</div>[/code]
but here "top" and "bottom" positioning may not work
Excellent site! I'm trying to use which displays the name, but how do I put a thumbnail graphic next to the person's name? I tried but I suppose it's not as easy as this??
ReplyDeleteOh my post left out the html. I was trying out Showing Visitor's Name, but I'd like to put a graphic next to it. How would I do this?
ReplyDeleteYou can use this code with user id (id of user whose pictures you want to show):
ReplyDelete[code]<fb:profile-pic uid="100000656665784" linked="true" />[/code]
but "uid=loggedinuser" will not work. And also keep in mind that you would not be able to add "Static FBML" after March 10. Check this article for details.
Real brain power on display. Thanks for that anwser!
ReplyDelete