<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Steve Mordue &#187; fbml</title>
	<atom:link href="http://www.stevemordue.com/tag/fbml/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.stevemordue.com</link>
	<description>The Professional Paraphraser</description>
	<lastBuildDate>Fri, 06 Jan 2012 15:44:52 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>How to Add a Micro-Site to your Facebook page (for Dummies).</title>
		<link>http://www.stevemordue.com/add-micro-site-facebook-page/</link>
		<comments>http://www.stevemordue.com/add-micro-site-facebook-page/#comments</comments>
		<pubDate>Wed, 07 Jul 2010 17:33:42 +0000</pubDate>
		<dc:creator>Steve Mordue</dc:creator>
				<category><![CDATA[Expert]]></category>
		<category><![CDATA[Facebook]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[fbml]]></category>

		<guid isPermaLink="false">http://www.stevemordue.com/?p=276</guid>
		<description><![CDATA[This is a step-by-step tutorial on how to make a custom landing page for your facebook business page]]></description>
			<content:encoded><![CDATA[<p>A Facebook guru and friend, <a title="Victoria Edwards" href="http://www.searchenginejournal.com/author/victoria-edwards/   " target="_blank">Victoria Edwards</a> asked me at at recent networking event if I had customized my Facebook &#8220;Page&#8221;, formerly called &#8220;Fan Page&#8221;. I had created one, but like many people, I was not aware of the level of customization Facebook allows on a page. In addition to the ability to customize the look, <a href="http://twitter.com/tallchickvic" target="_blank">TallChickVic</a>, as she is known, clued me in that another significant reason to have a page for my business is that it is not limited, like a profile to only 5,000 friends. My first thought was that I would never have to worry about that, but like she said, &#8220;What if some day you get there, then what?&#8221;.  So I decided to investigate this further.</p>
<p>I am sure all of you are aware of <strong>FBML</strong>&#8230;no? Well I wasn&#8217;t either, it stands for <strong>Facebook Markup Language</strong>. Already sounding confusing huh. If you have been to any of the really big companies&#8217; pages, you may have noticed that they seem to have a lot more going on than yours. My first thought was that FB made a special concession for them, that they were not likely to make for lil&#8217; ole me. That may actually still be true, but I did realize that some of what they were doing, or maybe even all of it, is available to anyone who discovers FBML.</p>
<p>Some of you may know that in addition to my presentation business, I also do some web development work. I am one of those &#8220;self-taught&#8221; developers, which means I don&#8217;t really understand how some things work, but if I can get it to work for me, I don&#8217;t care. I develop with the &#8220;Trial and Error&#8221; technique, and a lot of Copy, Paste, Edit of code snippets I find on the web, until I make things work for me. That is how I converted this website to a wordpress 3.0 platform, that still looks like the non-wordpress site that I started with. That is also how I figured out the really cool moving audience behind my head at the top. If you don&#8217;t think it is cool, then you are probably a &#8220;real&#8221; web developer, in which case you will be unimpressed with this entire post. But for the rest of you, I want to share how I made my <a title="Professional Paraphraser" href="http://www.facebook.com/pages/The-Professional-Paraphraser/114395895269255" target="_blank">micro-site on my Facebook page</a>. BTW, while you are there I would really appreciate if you would hit the &#8220;Like&#8221; button.</p>
<p>I did a lot of looking around on the web for instruction on this, and as usual, I could not find a single, simple complete answer. But from about 20 different sources, and my copy, paste, edit methodology, I was able to figure it out. In this post, I hope to save you all of that trouble. Hopefully, this will be a complete and easy to understand &#8220;step-by-step&#8221; to save you a lot of time.</p>
<p>I will explain each step below, but if you are like me, sometimes you would like to skip all the hows and whys and just copy and paste something that you can edit yourself. So here is the exact code I used for my micro-site. (BTW, if you copy and paste this as is, you will have &#8220;my&#8221; micro-site on your facebook page).</p>
<p>Copy all green text from below this line:</p>
<p><span style="color: #ccffcc;"></p>
<style type="type/css">
h1 {
font-size:19px;
color: #33FF99;
margin: 0 0 20px 0;
line-height: 1.5em;
font-style: italic;
text-transform:lowercase;
}
h2 {
font-size:15px;
color: #33FF99;
margin: 0 0 20px 0;
line-height: 1.5em;
font-style: italic;
text-transform:lowercase;
}
#mytext {
color:#ffffff;
font-size:14px;
}
#nav, #nav1, #nav2, #nav3, #nav4, #mytext {
background:#21353C;
padding:10px;
}
#nav1, #nav2, #nav3, #nav4{
height:562px;
}
.button, .button:visited {
background: #222 url(http://www.stevemordue.com/fb/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
.button:hover { background-color: #111; color: #fff; }
.button:active { top: 1px; }
.large.button, .large.button:visited { font-size: 14px; padding: 8px 14px 9px; }
</style>
<div id="nav">
<h2>If you like my page, please click the &#8220;like&#8221; button above!</h2>
<p><a href="#" clicktoshow="nav1" clicktohide="nav2,nav3,nav4">Home</a><br />
<a href="#" clicktoshow="nav2" clicktohide="nav1,nav3,nav4">About Me</a><br />
<a href="#" clicktoshow="nav3" clicktohide="nav1,nav2,nav4">Services</a><br />
<a href="#" clicktoshow="nav4" clicktohide="nav1,nav2,nav3">Consulting</a><br />
/div></p>
<div id="nav1">
<img align="right"  src="http://www.stevemordue.com/wp-content/uploads/2010/07/standing8.png"></p>
<h1>The Professional Paraphraser</h1>
<div id="mytext">There is an obvious disconnect between some of the truly innovative technologies out there and the potential client/users. If you are a developer or provider of such technologies, this is not news to you. So how do you<br />
make that connection?<br/><br/><br />
I am one of those unique individuals who can speak both languages. I can not only understand the complexities and nuances of your technology, but I can paraphrase and present these complexities and nuances to be understood and appreciated by your customer base. Connection Made!<br/><br/><br />
When you engage my services, I will dive deep into your offering to gain a thorough understanding which I will use to craft a user friendly presentation that I will professionally present to your clients in one or more of several formats.<br/><br/><br />
Why would you engage me to do this? Well, maybe you are not comfortable in front of crowds, or maybe you are not good at articulating your product features to laypeople, or maybe you are not a convincing spokesperson, or maybe you just have too much on your plate. Either way, there is no reason not to engage an expert presenter to help you make that critical connection, and create that &#8220;aha!&#8221; moment in your client&#8217;s minds for you.
</div>
</div>
<div id="nav2" style="display: none;">
<img align="right"  src="http://www.stevemordue.com/wp-content/uploads/2010/07/standing7.png"></p>
<h1>egomaniac, narcissist, megalomaniac, comedian</h1>
<div id="mytext">
Only my closest friends use these adjectives when  describing me. But since you don&#8217;t know me, you will have to make up your own mind. Granted, these are not traits that you would want to have in your neighbor, but they are the exact traits you want in a spokesperson for your company. It&#8217;s true that I do not lack in self confidence, but I am nowhere near schizophrenic, I swear.<br/><br/><br />
Presenting is something I have done for 30 years now, and I have a knack and an ability to sway others to agree with my message. I focus my efforts in the technology space, but also serve other markets.<br/><br/><br />
I enjoy the work, I am good at it, and I want to do it for you.
</div>
</div>
<div id="nav3" style="display: none;">
<img align="right"  src="http://www.stevemordue.com/wp-content/uploads/2010/07/standing6.png"></p>
<h1>Services</h1>
<div id="mytext">
I do a bunch of things, but primarily I produce workshops, webinars and seminars for tech companies.<br/><br/><br />
I also do voiceovers and videos for your websites or other promotional needs.<br/<br/><br />
Please go to my website to see examples of my work and to find out more about me: <a href= "http://www.stevemordue.com">www.stevemordue.com</a>
</div>
</div>
<div id="nav4" style="display: none;">
<img align="right"  src="http://www.stevemordue.com/wp-content/uploads/2010/07/standing9.png"></p>
<h1>consulting</h1>
<div id="mytext">
Do you have an important pitch coming up? I can join your team and assist with that specific task.<br/><br/><br />
You may well be the best  choice for the client, but as you know, that is not always enough. You  are probably familiar with the phrase &#8220;Form over Substance&#8221;; you may  have lost opportunities to competition that was not as capable as your  firm, yet presented well. In the best case scenario, &#8220;Form equals  Substance&#8221;.<br/><br/><br />
I can help your team organize and develop your  presentation, as well as acting as the lead, or sole  presenter to give  your clients a first impression that backs up your true capabilities.
</div>
</div>
<p></span></p>
<p><fb:google-analytics uacct="UA-yournumber-0" /></p>
<p>Copy up to, but not including this line.</p>
<p>For the rest of us, here is my step-by-step and full explanation of above.</p>
<ol>
<li>First, create a Page (formerly Fan Page) if you do not have one:
<ul>
<li>After Logging in to Facebook, click on the Home tab, and then the link &#8220;Ads and Pages&#8221;, which will be in the list below your profile picture.<br />
<a href="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture.jpg"><img class="size-full wp-image-282 alignnone" title="Capture" src="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture.jpg" alt="" width="236" height="285" /></a></li>
<li>On the next page, click on the &#8220;Pages&#8221; link below Campaigns.<br />
<a href="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture2.jpg"><img class="size-full wp-image-283 alignnone" title="Capture2" src="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture2.jpg" alt="" width="206" height="278" /></a></li>
<li>Then click on the &#8220;+ Create Page&#8221; button.<br />
<a href="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture3.jpg"><br />
<img class="alignnone size-full wp-image-284" title="Capture3" src="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture3.jpg" alt="" width="190" height="63" /></a></li>
<li>Next click on the radio button for what kind of page, in my case &#8220;Local Business&#8221; and select the type from the dropdown. Give it a name, in my case &#8220;The Professional Paraphraser&#8221;. Check the box that you are the one who can do this, and click on the &#8220;Create Official Page&#8221; button.<br />
<a href="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture4.jpg"><img class="alignnone size-medium wp-image-285" title="Capture4" src="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture4-300x280.jpg" alt="" width="300" height="280" /></a></li>
<li>You will then be brought to your new &#8220;empty&#8221; page. Click on the &#8220;edit Page&#8221; link below the Question mark.<br />
<a href="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture5.jpg"><img class="alignnone size-medium wp-image-286" title="Capture5" src="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture5-300x287.jpg" alt="" width="300" height="287" /></a></li>
<li>Here you can go ahead and edit your settings etc., I am not going to go into detail here as this is similar to you regular profile page and you can figure it out.<br />
<a href="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture6.jpg"><img class="alignnone size-medium wp-image-287" title="Capture6" src="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture6-285x300.jpg" alt="" width="285" height="300" /></a><a href="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture6.jpg"></a></li>
<li>If you scroll down to the bottom of this page you will see the &#8220;more applications&#8221; section and the &#8220;Static FBML&#8221; link. If the link is not there then click on &#8220;browse more&#8221; and search for it.<br />
<a href="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture7.jpg"><img class="alignnone size-medium wp-image-288" title="Capture7" src="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture7-300x140.jpg" alt="" width="300" height="140" /></a></li>
<li>After clicking on the &#8220;Static FBML&#8221; link you will be taken to another page. Click the link to &#8220;Ad to my Page&#8221;<br />
<a href="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture8.jpg"><img class="alignnone size-full wp-image-289" title="Capture8" src="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture8.jpg" alt="" width="244" height="219" /></a></li>
<li>This will bring up a window listing all of your pages, if you have any others, and let you add this feature by clicking the &#8220;Add to Page&#8221; button next to the page you want to add it to. Click that and then close the window.<br />
<a href="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture9.jpg"><img class="alignnone size-medium wp-image-290" title="Capture9" src="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture9-300x101.jpg" alt="" width="300" height="101" /></a></li>
<li>It would be nice if Facebook took you right back to your new page here, and there may be a faster way to get there that I don&#8217;t know about, but I just click the &#8220;Home&#8221; tab at the top, then &#8220;Ads and Pages&#8221; again, and finally &#8220;Pages&#8221; again to get back to my list of pages where, if this is your first page, only one will be listed. Click the the &#8220;Edit Page&#8221; link.<br />
<a href="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture10.jpg"><img class="alignnone size-medium wp-image-291" title="Capture10" src="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture10-300x156.jpg" alt="" width="300" height="156" /></a></li>
<li>You should now notice in your Applications list, the FBML application as active. If not, repeat the above steps because you missed something. Click on the &#8220;Application Settings&#8221; link of FBML.<br />
<a href="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture11.jpg"><img class="alignnone size-medium wp-image-292" title="Capture11" src="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture11-300x281.jpg" alt="" width="300" height="281" /></a></li>
<li>Click on &#8220;add&#8221; next to Tab: Available, and then hit &#8220;Okay&#8221; to close the window.<br />
<a href="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture12.jpg"><img class="alignnone size-medium wp-image-293" title="Capture12" src="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture12-300x143.jpg" alt="" width="300" height="143" /></a></li>
<li>Now let&#8217;s click on the &#8220;Edit&#8221; link next to FBML and we get this window. The Box Title will be the name for the tab that will now be on your page where you custom content will be. I chose &#8220;Micro-Site&#8221;, but you could call it whatever you want. You can come back and change it anytime, so don&#8217;t worry about it too much. Below the title, where is says &#8220;FBML&#8221;, is where the new custom code will go and I&#8217;ll get into that next.<br />
<a href="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture13.jpg"><img class="alignnone size-medium wp-image-294" title="Capture13" src="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture13-246x300.jpg" alt="" width="246" height="300" /></a></li>
</ul>
</li>
<li>Okay so you should now have your new page and your FBML App installed so let&#8217;s talk about the custom code. Without getting too technical, FBML is kind of a subset of html which is the language used for creating websites. Facebook obviously wants to limit what you can do on their platform, which is why they created the subset FBML language. So there are a lot of things you cannot do on a Facebook page that you can do on your own website. But there are still a lot of things you CAN do.In this example I am gong to walk you through creating a Micro-Site with multiple pages and a navigation menu, which is what mine is, so let&#8217;s break down my code that I showed above. I will assume that you are going to create a page just like mine except maybe different colors, text and images.
<ul>
<li>The first part of the code is the style section, this is where you specify things like the background color, fonts and font sizes etc. and it looks like this (the green is code, the black are my notes, and red are areas you should edit for your needs) :<span style="color: #ccffcc;"><br />
<style  type="type/css"></span> <span style="color: #000000;">This is the declaration that style information is beginning here</span>
<span style="color: #ccffcc;">h1 {</span> <span style="color: #000000;">This is where the rules for the Headline are  identified, you will see this used below</span>
<span style="color: #ccffcc;">font-size:19px;</span> <span style="color: #000000;">How big I want my headlines</span>
<span style="color: #ccffcc;">color: #33FF99;</span> <span style="color: #000000;">The color of the headline text in hex-decimal <span style="color: #ff0000;">You may want a different color here</span></span>
<span style="color: #ccffcc;">margin: 0 0 20px 0;</span> <span style="color: #000000;">how much room I want around my headlines</span>
<span style="color: #ccffcc;">line-height: 1.5em;</span> <span style="color: #000000;">how high I want the line to be</span>
<span style="color: #ccffcc;">font-style: italic;</span> <span style="color: #000000;">any stylizing</span> <span style="color: #ff0000;">You may delete this line if you don't want italic headlines</span>
<span style="color: #ccffcc;">text-transform:lowercase;</span><span style="color: #000000;"> in this case I want the headline to be all lower case regardless of how I type them</span> <span style="color: #ff0000;">You may delete this line to not convert headlines to lower case</span>
<span style="color: #ccffcc;">}
h2 { </span><span style="color: #000000;">this is only used at the top of the box for the suggestion to "like" my page and the only different from above is the font-size is smaller</span>
<span style="color: #ccffcc;">font-size:15px;
color:  #33FF99;
margin: 0 0 20px 0;
line-height: 1.5em;
font-style: italic;
text-transform:lowercase;
}
#mytext {</span> <span style="color: #000000;">This is for the text on my pages</span>
<span style="color: #ccffcc;">color:#ffffff;</span> <span style="color: #ff0000;">I changed the text color to white because I am using a dark background, if you are using a light background, you can delete this line or change the color</span>
<span style="color: #ccffcc;">font-size:14px; </span><span style="color: #000000;">This is how big I wanted my page text</span>
<span style="color: #ccffcc;">}
#nav, #nav1, #nav2, #nav3,  #nav4, #mytext {</span> <span style="color: #000000;">Do not change this</span>
<span style="color: #ccffcc;">background:#21353C;</span> <span style="color: #ff0000;">This is the page background color, in my case the Teal, if you delete this line it will be white or you can put any color here</span>
<span style="color: #ccffcc;">padding:10px;
}
#nav1, #nav2, #nav3, #nav4{ </span><span style="color: #000000;">Do not change this</span>
<span style="color: #ccffcc;">height:562px;
}
.button,  .button:visited {</span> <span style="color: #000000;">This is the buttons</span>
<span style="color: #ccffcc;">background: #222  url(http://www.stevemordue.com/fb/alert-overlay.png) repeat-x;</span> <span style="color: #ff0000;">This is an image file that is used to make the buttons, as you can see it is pointing to the file on my site. I don't care if you leave this, but if you prefer you can paste this link in your browser, save the file and upload it to your own site and change this link to point there instead. Leave the rest of this section alone.</span>
<span style="color: #ccffcc;">display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px  rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid  rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
.button:hover { background-color: #111; color: #fff; } </span><span style="color: #ff0000;">This is the button colors, in my case Grey with white text, you can change these if you like</span>
<span style="color: #ccffcc;">.button:active { top: 1px; }
.large.button, .large.button:visited {  font-size: 14px; padding: 8px 14px 9px; }
</style>
<p></span><span style="color: #ccffcc;"> </span><span style="color: #000000;">This ends the style declaratio</span>n</li>
<li>The next section is the Navigation buttons and it looks like this:<br />
<span style="color: #0000ff;"><span style="color: #ccffcc;"></p>
<div  id="nav">
<h2>If you like my page, please click the &#8220;like&#8221;  button above!</h2>
<p></span> <span style="color: #ff0000;">You can change or delete this line</span><br />
<span style="color: #ccffcc;"><a href="#" clicktoshow="nav1"  clicktohide="nav2,nav3,nav4,nav5">Home</a></span><span style="color: #ff0000;">You can change the term &#8220;Home&#8221; to whatever you want for this tab and the same for the others below.</span><br />
<span style="color: #ccffcc;"><a href="#"  clicktoshow="nav2" clicktohide="nav1,nav3,nav4">About  Me</a><br />
<a href="#" clicktoshow="nav3"  clicktohide="nav1,nav2,nav4">Services</a><br />
<a  href="#" clicktoshow="nav4"  clicktohide="nav1,nav2,nav3">Consulting</a>
</div>
<p></span><br />
</span></li>
<li>The next section is the actual first page that appears which is the Home page, and it looks like this (the next three pages are similar):<br />
<span style="color: #0000ff;"><span style="color: #ccffcc;"></p>
<div  id="nav1">
<img align="right"   src="http://www.stevemordue.com/wp-content/uploads/2010/07/standing8.png"></span> <span style="color: #ff0000;">This is my image file of me standing to the right, you will probably want to change this. You are going to need to create an image and upload it somewhere and point to it, this can be your website or a flickr account etc. My images are about 200px wide and about 550px tall.</span><br />
<span style="color: #ccffcc;"></p>
<h1>The  Professional Paraphraser</h1>
<p></span><span style="color: #ff0000;">This is my page headline and everything below this is my page text, just leave the items in the brackets <> alo<span style="color: #ff0000;">ne</span></span><span style="color: #ff0000;"> and edit the rest</span><br />
<span style="color: #ccffcc;"></p>
<div id="mytext">There is  an obvious disconnect between some of the truly innovative technologies  out there and the potential client/users. If you are a developer or  provider of such technologies, this is not news to you. So how do you<br />
make that connection?<br/><br/></span><span style="color: #ff0000;">These tags creat a little space between paragraphs</span><br />
<span style="color: #ccffcc;">I am one of those  unique individuals who can speak both languages. I can not only  understand the complexities and nuances of your technology, but I can  paraphrase and present these complexities and nuances to be understood  and appreciated by your customer base. Connection  Made!<br/><br/><br />
When you engage my services, I will dive  deep into your offering to gain a thorough understanding which I will  use to craft a user friendly presentation that I will professionally  present to your clients in one or more of several  formats.<br/><br/><br />
Why would you engage me to do this?  Well, maybe you are not comfortable in front of crowds, or maybe you are  not good at articulating your product features to laypeople, or maybe  you are not a convincing spokesperson, or maybe you just have too much  on your plate. Either way, there is no reason not to engage an expert  presenter to help you make that critical connection, and create that  &#8220;aha!&#8221; moment in your client&#8217;s minds for you.
</div>
<p></span><br />
</span></li>
<li>The last line is also optional, but if you have a Google Analytics account, you can create a profile for your page and enter the analytics account number here for detailed statistics.<br />
<span style="color: #ccffcc;"><fb:google-analytics  uacct="UA-yournumber-0" /><br />
</span></li>
</ul>
</li>
<li>Alright, so are you thoroughly confused? At the risk of making this long post even longer, I will try and simplify this further, go ahead and copy and paste the entire code below into the FBML box and we&#8217;ll edit it there:<span style="color: #ccffcc;"><br />
<style  type="type/css">
h1 {
font-size:19px;
color: #33FF99;
margin: 0 0 20px 0;
line-height: 1.5em;
font-style: italic;
text-transform:lowercase;
}
h2 {
font-size:15px;
color:  #33FF99;
margin: 0 0 20px 0;
line-height: 1.5em;
font-style: italic;
text-transform:lowercase;
}
#mytext {
color:#ffffff;
font-size:14px;
}
#nav, #nav1, #nav2, #nav3,  #nav4, #mytext {
background:#21353C;
padding:10px;
}
#nav1, #nav2, #nav3, #nav4{
height:562px;
}
.button,  .button:visited {
background: #222  url(http://www.stevemordue.com/fb/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px  rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid  rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
.button:hover { background-color: #111; color: #fff; }
.button:active { top: 1px; }
.large.button, .large.button:visited {  font-size: 14px; padding: 8px 14px 9px; }
</style>
<div  id="nav">
<h2>If you like my page, please click the &#8220;like&#8221;  button above!</h2>
<p><a href="#" clicktoshow="nav1"  clicktohide="nav2,nav3,nav4">Home</a><br />
<a href="#"  clicktoshow="nav2" clicktohide="nav1,nav3,nav4">About  Me</a><br />
<a href="#" clicktoshow="nav3"  clicktohide="nav1,nav2,nav4">Services</a><br />
<a  href="#" clicktoshow="nav4"  clicktohide="nav1,nav2,nav3">Consulting</a>
</div>
<div id="nav1">
<img  align="right"  src="http://link to your first page picture"></p>
<h1>Your Home Page Headline</h1>
<div  id="mytext">Your Home Page text
</div>
</div>
<div id="nav2" style="display: none;">
<img align="right"   src="http://link to  your second page picture"></p>
<h1>Your Second Page Headline</h1>
<div id="mytext">
Your second page text
</div>
</div>
<div id="nav3" style="display: none;">
<img align="right"   src="http://link to  your third page picture"></p>
<h1>Your third page headline</h1>
<div id="mytext">
Your third page text
</div>
</div>
<div id="nav4" style="display:  none;">
<img align="right"   src="http://link to  your fourth page picture"></p>
<h1>Your fourth page headline</h1>
<div id="mytext">
Your fourth page text
</div>
</div>
<p></span></p>
<p><fb:google-analytics  uacct="UA-yournumber-0" /></p>
<p>The easiest way to do this is to open a separate window in your browser so you can switch back and forth from your FBML page to your Micro-Site and refresh your micro-site to see the changes as you go. So try my copy, paste, edit method for yourself.</li>
<li>Lastly you will probably want to set your new Micro-Site to be the default landing page for new visitors, so go back to your page settings and click on &#8220;edit&#8221; under Wall Settings.<br />
<a href="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture6.jpg"><img class="size-medium wp-image-287 alignnone" title="Capture6" src="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture6-285x300.jpg" alt="" width="285" height="300" /></a></p>
<p>Then select Micro-Site (or whatever you called your page) in the dropdown for Default Landing page:<br />
<a href="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture14.jpg"><img class="alignnone size-medium wp-image-297" title="Capture14" src="http://www.stevemordue.com/wp-content/uploads/2010/07/Capture14-300x162.jpg" alt="" width="300" height="162" /></a></li>
<li>Hopefully this was helpful to you, one thing I have been asked in the past is about hex-decimal colors, so here is a link to a <a href="http://www.stevemordue.com/colors.php" target="_blank">conversion chart</a></li>
</ol>
<p>Please comment profusely about ways to improve this or your experiences with this tutorial. If you would rather just have this done for you let me know, I won&#8217;t do it for free, but I won&#8217;t charge you much to do it either.</p>
<p>Thanks for reading!</p>
<p>Steve</p>
]]></content:encoded>
			<wfw:commentRss>http://www.stevemordue.com/add-micro-site-facebook-page/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

