New Backgrounds

Another Thirteen Codes Of Fb Page Tutrial

Another Thirteen Codes Of  Fb Page Tutrial

Hide contents of the tab

<fb:visible-to-connection><br /> PUT YOUR CODE<br /> </fb:visible-to-connection>

To insert a pic 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><br />

Invite your online friends 

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

Button Linked To Url 

<CENTER><br /> <a href="URL"><input type="submit" value="BUTTON NAME" name="B1"></a><br /> </CENTER><br />

Google Search Box

<CENTER><br /> <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><br /> <input maxLength="255" size="25" name="q" style="color: #800000; border: 1 solid #000000"><br /> <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><br /> <br />

Facebook Search

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

Open a Site Inside a Page

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

Make Scrollable Box

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

Microsite Code

<!-- This Wrapper box limits the width to 560px --><br /> <div style="width:560px"><br /> <!-- navigation elements --><br /> <br /> <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><br /> <a href="#" clicktoshow="nav2" clicktohide="nav1,nav3,nav4"><img src="http://www.vmworld.com/images/social-icons-youtube.png" alt="About" /></a><br /> <a href="#" clicktoshow="nav3" clicktohide="nav1,nav2,nav4"><img src="http://www.iconshock.com/social-icons/slide_share-icon.png" alt="info" /></a><br /> <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><br /> <br /> <!-- Content to display when user clicks on the Home tab --><br /> <br /> <div id="nav1"><br /><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 /><br /><br /> <span style="font-size:3em"><strong>WRITE WHAT YOU <br /> WANT</strong></span><br /> <br /><br /> <br /> </div><br /> <!-- Content to display when user clicks on the youtube tab --><br /> <div id="nav2" style="display: none;"><br /><br /><br /> <span style="font-size:3em"><strong>WRITE WHAT YOU WANT <br /> 2</strong></span><br /><br /> </div><br /> <!-- Content to display when user clicks on the info tab --><br /> <br /> <div id="nav3" style="display: none;"><br /><br /><br /> <br /> <span style="font-size:3em"><strong>WRITE WHAT YOU <br /> WANT3</strong></span><br /> <br /><br /> <br /> </div><!-- Content to display when user clicks on the Contact tab --><br /> <div id="nav4" style="display: none;"><br /><br /><br /> <span style="font-size:3em"><strong>WRITE WHAT YOU WANT <br /> 4</strong></span><br /> </div><br /> <!-- end of the wrapper --><br /> </div><br />

Fbml Text Code And Colour

<center><FONT COLOR="#3388a0"><FONT SIZE="5"> Text </FONT></FONT></center>

Fbml Comment With Image

<center><img src=" You image here " /><br /><br /> <br /> <center> <br /> <fb:comments xid="Username page_comments" canpost="true" candelete="false" returnurl="Your Page link/"> <fb:title>Say any thing here</fb:title> </fb:comments><br />

Snow on Your Page

<!-- This Script is from www.htmlfreecodes.com, Coded by: Krishna Eydat--><br /> <script> // Set the number of snowflakes (more than 30 - 40 not recommended) var snowmax=35 // Set the colors for the snow. Add as many colors as you like var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD") // Set the fonts, that create the snowflakes. Add as many fonts as you like var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS") // Set the letter that creates your snowflake (recommended:*) var snowletter="*" // Set the speed of sinking (recommended values range from 0.3 to 2) var sinkspeed=0.6 // Set the maximal-size of your snowflaxes var snowmaxsize=22 // Set the minimal-size of your snowflaxes var snowminsize=8 // Set the snowing-zone // Set 1 for all-over-snowing, set 2 for left-side-snowing // Set 3 for center-snowing, set 4 for right-side-snowing var snowingzone=3 /////////////////////////////////////////////////////////////////////////// // CONFIGURATION ENDS HERE /////////////////////////////////////////////////////////////////////////// // Do not edit below this line var snow=new Array() var marginbottom var marginright var timer var i_snow=0 var x_mv=new Array(); var crds=new Array(); var lftrght=new Array(); var browserinfos=navigator.userAgent var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/) var ns6=document.getElementById&&!document.all var opera=browserinfos.match(/Opera/) var browserok=ie5||ns6||opera function randommaker(range) { rand=Math.floor(range*Math.random()) return rand } function initsnow() { if (ie5 || opera) { marginbottom = document.body.clientHeight marginright = document.body.clientWidth } else if (ns6) { marginbottom = window.innerHeight marginright = window.innerWidth } var snowsizerange=snowmaxsize-snowminsize for (i=0;i<=snowmax;i++) { crds[i] = 0; lftrght[i] = Math.random()*15; x_mv[i] = 0.03 + Math.random()/10; snow[i]=document.getElementById("s"+i) snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)] snow[i].size=randommaker(snowsizerange)+snowminsize snow[i].style.fontSize=snow[i].size snow[i].style.color=snowcolor[randommaker(snowcolor.length)] snow[i].sink=sinkspeed*snow[i].size/5 if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4} if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2} snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size) snow[i].style.left=snow[i].posx snow[i].style.top=snow[i].posy } movesnow() } function movesnow() { for (i=0;i<=snowmax;i++) { crds[i] += x_mv[i]; snow[i].posy+=snow[i].sink snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]); snow[i].style.top=snow[i].posy if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){ if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4} if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2} snow[i].posy=0 } } var timer=setTimeout("movesnow()",50) } for (i=0;i<=snowmax;i++) { document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>") } if (browserok) { window.onload=initsnow } </script><br /> <br />

Rain on your page

<body><br /> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var no = 50; var speed = 1; var ns4up = (document.layers) ? 1 : 0; var ie4up = (document.all) ? 1 : 0; var s, x, y, sn, cs; var a, r, cx, cy; var i, doc_width = 800, doc_height = 600; if (ns4up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } x = new Array(); y = new Array(); r = new Array(); cx = new Array(); cy = new Array(); s = 8; for (i = 0; i < no; ++ i) { initRain(); if (ns4up) { if (i == 0) { document.write("<layer name=\"dot"+ i +"\" left=\"1\" "); document.write("top=\"1\" visibility=\"show\"><font color=\"blue\">"); document.write(",</font></layer>"); } else { document.write("<layer name=\"dot"+ i +"\" left=\"1\" "); document.write("top=\"1\" visibility=\"show\"><font color=\"blue\">"); document.write(",</font></layer>"); } } else if (ie4up) { if (i == 0) { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: "); document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: "); document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">"); document.write(",</font></div>"); } else { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: "); document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: "); document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">"); document.write(",</font></div>"); } } } function initRain() { a = 6; r[i] = 1; sn = Math.sin(a); cs = Math.cos(a); cx[i] = Math.random() * doc_width + 1; cy[i] = Math.random() * doc_height + 1; x[i] = r[i] * sn + cx[i]; y[i] = cy[i]; } function makeRain() { r[i] = 1; cx[i] = Math.random() * doc_width + 1; cy[i] = 1; x[i] = r[i] * sn + cx[i]; y[i] = r[i] * cs + cy[i]; } function updateRain() { r[i] += s; x[i] = r[i] * sn + cx[i]; y[i] = r[i] * cs + cy[i]; } function raindropNS() { for (i = 0; i < no; ++ i) { updateRain(); if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) { makeRain(); doc_width = self.innerWidth; doc_height = self.innerHeight; } document.layers["dot"+i].top = y[i]; document.layers["dot"+i].left = x[i]; } setTimeout("raindropNS()", speed); } function raindropIE() { for (i = 0; i < no; ++ i) { updateRain(); if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) { makeRain(); doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } document.all["dot"+i].style.pixelTop = y[i]; document.all["dot"+i].style.pixelLeft = x[i]; } setTimeout("raindropIE()", speed); } if (ns4up) { raindropNS(); } else if (ie4up) { raindropIE(); } // End --> </script>

How To Add Background Image

How To Add Background Image

Copy the code and belo you see Image Url Put Your Image Direct Link Then Copy It and Go to Your Fbml coding area and paste it on the top of your Fbml coding

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 /> <BR/><br /> IF YOU WANT TO WRITE SOMETHING INSIDE THE PIC<br /> <br /> <BR/><br /> <BR/><br /> </p></div></center><br /> <br />

How To Add A Background Colour

How To Add A Background Colour









First of all here is the Background Code Replace the IMAGE URL with image code under the image and expand the the space from here width:520px; height:5000px;">

Background Colour

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

All Colour Codes

How To Add A Like Button

How To Add A Like Button

 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><br /> <div id="wrapper"><fb:comments xid="00_comments" canpost="false" candelete="false" returnurl="PAGE URL"><br /> <fb:title></fb:title><br /> </fb:like><br /> </div><br /> <br />

I have named this post “Facebook “Like” Button html Tutorial For Fan Pages“, but as you can see from the like button I have inserted above this post, this Facebook “like” button can in fact be inserted into any html coded page. So why have I felt the need to share this particular button with you I hear you ask?   There are two reasons why I like this button….pardon the pun 

1.  It gives the option to include the faces of some of your fans or “likes”. When someone sees the face of someone they like, respect, trust and whose opinion they value, they are far more likely to “like” your page….it essentially validates your page in the eyes of your visitor.  The pictures also give the button far greater prominence and it is therefore less likely to be overlooked by new visitors.

2.  When someone ‘likes’ your page, it automatically brings up a box asking that person to share your page with a Status update on their Facebook Wall, including a link back to your page.  A status update with your page’s image, a comment from the person “liking” your page and a link to your page, is going to attract far more attention on their Wall than the small grey text that says…. “Jo Blog likes xyz page” and that currently appears on the Wall when someone ‘likes” your page.

The following short video is a Facebook “Like” Button html Tutorial for Fan Pages that will walk you step by step through the process of creating the html code you need for the button and then show you how to insert it into a Facebook Fan Page. In the tutorial I am using the Static “html:  iFrames Tabs” Application to add the code to my Fan Page.  My previous post will walk you through setting up this Application on your Fan Page if you need assistance with this.

Alternatively, if you are wanting to add the Facebook “Like” Button somewhere else, such as a blog post like this one, you simply take the same code and copy and paste it to the html editor of your choice.

Facebook “Like” Button html Tutorial For Fan Pages

The Facebook Developers Page mentioned in the video is… http://developers.facebook.com/docs/reference/plugins/like/

I hope you have enjoyed this “Facebook “Like” Button html Tutorial For Fan Pages”. As always I welcome your comments and please remember to “like” my page, if you haven’t already done so 

How to add Share Button Code

How to add Share Button Code

FBML provides the code to include a little share button, like the ones you see on the bottom right of the wall, on your customized fan or business page.

When you are on any tab on a fan page other than the wall, there isn’t a share button, so it’s useful to be able to add one so that visitors can share the page with their friends or even post your page to their own wall.

And this little bit of FBML is super easy to use.

The little share button at the bottom left of the wall page looks like this:

Unfortunately, the button can not be customized. It’s going to look just like that. But, it can be added.

The code is:

<fb:share-button class="url" href="http://facebook.com/
Anti.Social.Development" />

The only thing that you need to change is the the url after http:// to the one for your own fan page.

When the button is clicked on the share box looks like the following:

It’s pretty basic and includes the general information that Facebook has about your fan page.

If you want to make the share box a little fancier you would use the fbml that includes the meta class rather than the url class. With the meta class you can specify the image that is displayed rather than using the default logo and include a description that contains more information about the content of your 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/Anti.Social.Development"/>
</fb:share-button> 

• meta name=”title” content=”"name of fan page” – the name of your fan page
• meta name=”description” content=”description of fan page” – the description you want to use.
• link rel=”image_src” href=”url to image location” – if you are using an alternative image, this would be the location on your server
• link rel=”target_url” href=”http://facebook.com/Anti.Social.Development” – the url to the fan page that you are sharing

The message box when using the meta class looks like the following.

You can see that a different logo is being used and that the description that I specified is providing more detailed information about the page.

Just one more little thing you can do with FBML on your fan page.

How to insert mp3

How to Do It

1. Locate the music file URL. You need to have the file uploaded to your server in order to create the link to it. For example, the one I am using for testing purposes is located at http://kimwoodbridge.com/We Were Promised Jetpacks_01_It’s Thunder And It’s Lightning.mp3
2. The music file must be an mp3. This does not work with .wav files.

  3:The fbml code used is:

Insert mp3

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

How to Embed a YouTube Video in Static FBML

How to Embed a YouTube Video in Static FBML

As with images, I would recommend a maximum width of 520px for a tab. After uploading your video, you want to use this code:

<fb:swf swfbgcolor=”000000” imgstyle=”border-width:##px; border-color:white;” swfsrc=”http://www.youtube.com/v/xxxxx” imgsrc=”http://img.youtube.com/vi/xxxxx/2.jpg” width=”520″ height=”400″ />

Replace the xxxxx with your YouTube’s video ID. In both examples below, “MqqKPWhY4es” is my YouTube ID.

Example 1: In this YouTube link: http://www.youtube.com/watch?v=MqqKPWhY4es, all the characters after the “=” are the YouTube ID.

Example 2: If your YouTube link looks like this: http://www.youtube.com/watch?v=MqqKPWhY4es&feature=player_embedded, all the characters after the “=” and before the “&feature” will be the YouTube ID.

Insert Youtube Video

<center><br /> <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' /><br /> </center><br /> (where XXXXXX is the ID of the youtube video)<br /> <br />