Read first about How to Create Facebook Fan Page. And now time to make simple microsite on facebook. So our microsite will have 5 pages. Every page will have text and images. Now lets make our micro-site on facebook step by step.
1. Open Photoshop and draw your microsite. I created simple menu:
Home | About | Services | Photos | Contact
Also create simple content for every page. See image bellow how it looks like:
2. Now you need create a code. I used dreamweaver for it. So code will include menu box:
<div>
<ul style="display:inline;">
<li style="background:#000; padding:4px 10px; margin:0 2px; width:125px; display:inline;">
<a href="#" class="large awesome" clicktoshow="home" clicktohide="about,services, photos, contact" style="color:#FFF; text-decoration:none;">Home</a>
</li>
<li style="background:#000; padding:4px 10px; margin:0 2px; width:125px; display:inline;">
<a href="#" class="large awesome" clicktoshow="about" clicktohide="home,services, photos, contact" style="color:#FFF; text-decoration:none;">About</a>
</li>
<li style="background:#000; padding:4px 10px; margin:0 2px; width:125px; display:inline;">
<a href="#" class="large awesome" clicktoshow="services" clicktohide="home,about, photos, contact" style="color:#FFF; text-decoration:none;">Services</a>
</li>
<li style="background:#000; padding:4px 10px; margin:0 2px; width:125px; display:inline;">
<a href="#" class="large awesome" clicktoshow="photos" clicktohide="home,about, services, contact" style="color:#FFF; text-decoration:none;">Photos</a>
</li>
<li style="background:#000; padding:4px 10px; margin:0 2px; width:125px; display:inline;">
<a href="#" class="large awesome" clicktoshow="contact" clicktohide="home,about, services, photos" style="color:#FFF; text-decoration:none;">Contact</a>
</li>
</ul>
</div>
Horizontal separator (separate menu and page content):
<hr />
Also block for every page:
Home:
<div id="home" style="margin:20px;">
<div style="font-size:30px;">Home title</div>
<div>
<img src="http://www.facebookpagetemplates.com/images/thumbs/8.jpg" alt="facebook template preview" width="166" height="211" style="float:right; margin:0 0 20px 25px;" />
We request you retain the full copyright notice below including the link to <a href="http://www.facebookpagetemplates.com" style="color:#1a8ddc;">www.facebookpagetemplates.com</a>. This not only gives respect to the large amount of time given freely by the developers but also helps build interest, traffic and use of our free designs. If you cannot (for good reason) retain the full copyright we request you at least leave in place the Page Templates line, with Page Templates linked to www.facebookpagetemplates.com. If you refuse to include even this then support may be affected.<br /><br />
<b>You are allowed to use this design only if you agree to the following conditions:</b><br />
- You can not remove copyright notice from any our template without our permission.<br />
- If you modify any our template it still should contain copyright because it is based on our work.<br />
- You may copy, distribute, modify, etc. any our template as long as link to our website remains untouched.
</div>
</div>
About:
<div id="about" style="margin:20px; display:none;">
<div style="font-size:30px;">About title</div>
<div>
FacebookPageTemplates.com offers you unique Facebook Page Templates absolutely for free. Our Facebook Pages are easy to install and can actually draw the attention of your page visitors. Owe to the unique design and the simple replacement of the content, our templates are very popular among facebook users. All the big companies have already created their own unique pages on facebook. Owe to these pages, users can buy your goods, exchange views and disseminate news about your business. So if you already have a website why don’t you create a page on facebook that will represent you or your company? Landing pages created on our Facebook Page Templates base will certainly attract the attention of the visitors and turn them into your fans.
</div>
</div>
Services:
<div id="services" style="margin:20px; display:none;">
<div style="font-size:30px;">Services title</div>
<div>
<img src="http://www.facebookpagetemplates.com/images/thumbs/7.jpg" alt="facebook template preview" width="166" height="211" style="float:right; margin:0 0 20px 25px;" />
It is almost impossible to ignore the Social Media especially when we talk about Facebook. Only in a few years, the Social Network became the most favorite location of all Internet users. In some other way, it is another internet world that offers many opportunities for all users. Today, you can use ur facebook profile not just for communication with your friends and acquaintances, but you can also use it to describe your business. By creating a unique and a beautifully executed Facebook Page based on our Free Facebook Page Template so you will have a chance to be noticed and stand out among others. So use our FacebookPage templates to make your page working for you.
</div>
<div style="clear:both;"></div>
<div>
<img src="http://www.facebookpagetemplates.com/images/thumbs/12.jpg" alt="facebook template preview" width="166" height="211" style="float:right; margin:0 0 20px 25px;" />
Thousands of people give flowers to each other every day. And it will be silly for the owner of a flower shop not to make some advertising of his products. Everyone knows that today, the most attractive place for advertising is Facebook, because it is the social network # 1 in the world and the number of its users exceeds 400 million. Facebook allows you to create your own page in its network, so use this opportunity to tell the world about your business. Use this template as a basis for a Facebook Page and get the army of fans who will communicate with each other and share all the information about your activities. Professional designers made this template to help your floral business to be more successful. All you have to do is to use our facebook page template to create your own page on facebook. Do not miss this opportunity and let millions of people the opportunity to learn about your business.
</div>
</div>
Photos:
<div id="photos" style="margin:20px; display:none;">
<div style="font-size:30px;">Photos title</div>
<div>
Nowadays, the most effective marketing tool is Facebook. If you are the owner of a business company you're doing a big mistake if you are not actively promoting your company in a social network, especially on Facebook. Choose the most suitable template from our Facebook Page Template Collection and use it to create your unique Facebook Page. It will help you to stand out among the crowd of your competitors. Each and every template in our collection is unique and titled to a particular type of business. Put your products on your page, put some links to some other useful MOV. You can do all this in an easy way when using our Facebook Templates and it will be enough to attract the attention of your potential customers.
</div>
<div style="clear:both;"></div>
<div>
<ul>
<li style="float:left; list-style:none; padding:10px 2px;"><img src="http://www.facebookpagetemplates.com/images/thumbs/5.jpg" alt="facebook template preview" width="166" height="211" /></li>
<li style="float:left; list-style:none; padding:10px 2px;"><img src="http://www.facebookpagetemplates.com/images/thumbs/9.jpg" alt="facebook template preview" width="166" height="211" /></li>
<li style="float:left; list-style:none; padding:10px 2px;"><img src="http://www.facebookpagetemplates.com/images/thumbs/10.jpg" alt="facebook template preview" width="166" height="211" /></li>
<li style="float:left; list-style:none; padding:10px 2px;"><img src="http://www.facebookpagetemplates.com/images/thumbs/11.jpg" alt="facebook template preview" width="166" height="211" /></li>
<li style="float:left; list-style:none; padding:10px 2px;"><img src="http://www.facebookpagetemplates.com/images/thumbs/12.jpg" alt="facebook template preview" width="166" height="211" /></li>
<li style="float:left; list-style:none; padding:10px 2px;"><img src="http://www.facebookpagetemplates.com/images/thumbs/8.jpg" alt="facebook template preview" width="166" height="211" /></li>
<li style="float:left; list-style:none; padding:10px 2px;"><img src="http://www.facebookpagetemplates.com/images/thumbs/7.jpg" alt="facebook template preview" width="166" height="211" /></li>
<li style="float:left; list-style:none; padding:10px 2px;"><img src="http://www.facebookpagetemplates.com/images/thumbs/6.jpg" alt="facebook template preview" width="166" height="211" /></li>
</ul>
</div>
</div>
Contact:
<div id="contact" style="margin:20px; display:none;">
<div style="font-size:30px;">Cotanct title</div>
<div>
<b>Your contact address:</b><br />
We present to your attention our series of Free Facebook Page Templates. Facebook FBML page templates is a good way to make your page attractive on facebook. Social Media have a big influence on all of us and our days it is not enough to have an attractive web site. If you want to be really successful then you need a strong page on Facebook. You can find here good quality facebook page templates that you can use to create your own page on facebook.<br /><br />
<b>Your website:</b><br />
<a href="http://www.facebookpagetemplates.com" style="color:#1a8ddc;">www.facebookpagetemplates.com</a><br /><br />
<b>Your Facebook Page:</b><br />
<a href="http://www.facebook.com/pages/Facebook-Page-Templates/134401766587136" style="color:#1a8ddc;">http://www.facebook.com/pages/Facebook-Page-Templates/134401766587136</a><br /><br />
<b>Your Twitter Page:</b><br />
<a href="http://twitter.com/FBMLtemplates" style="color:#1a8ddc;">http://twitter.com/FBMLtemplates</a>
</div>
</div>
All code:
<div style="width:780px; height:700px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#70767a">
<div>
<ul style="display:inline;">
<li style="background:#000; padding:4px 10px; margin:0 2px; width:125px; display:inline;">
<a href="#" class="large awesome" clicktoshow="home" clicktohide="about,services, photos, contact" style="color:#FFF; text-decoration:none;">Home</a>
</li>
<li style="background:#000; padding:4px 10px; margin:0 2px; width:125px; display:inline;">
<a href="#" class="large awesome" clicktoshow="about" clicktohide="home,services, photos, contact" style="color:#FFF; text-decoration:none;">About</a>
</li>
<li style="background:#000; padding:4px 10px; margin:0 2px; width:125px; display:inline;">
<a href="#" class="large awesome" clicktoshow="services" clicktohide="home,about, photos, contact" style="color:#FFF; text-decoration:none;">Services</a>
</li>
<li style="background:#000; padding:4px 10px; margin:0 2px; width:125px; display:inline;">
<a href="#" class="large awesome" clicktoshow="photos" clicktohide="home,about, services, contact" style="color:#FFF; text-decoration:none;">Photos</a>
</li>
<li style="background:#000; padding:4px 10px; margin:0 2px; width:125px; display:inline;">
<a href="#" class="large awesome" clicktoshow="contact" clicktohide="home,about, services, photos" style="color:#FFF; text-decoration:none;">Contact</a>
</li>
</ul>
</div>
<hr />
<div id="home" style="margin:20px;">
<div style="font-size:30px;">Home title</div>
<div>
<img src="http://www.facebookpagetemplates.com/images/thumbs/8.jpg" alt="facebook template preview" width="166" height="211" style="float:right; margin:0 0 20px 25px;" />
We request you retain the full copyright notice below including the link to <a href="http://www.facebookpagetemplates.com" style="color:#1a8ddc;">www.facebookpagetemplates.com</a>. This not only gives respect to the large amount of time given freely by the developers but also helps build interest, traffic and use of our free designs. If you cannot (for good reason) retain the full copyright we request you at least leave in place the Page Templates line, with Page Templates linked to www.facebookpagetemplates.com. If you refuse to include even this then support may be affected.<br /><br />
<b>You are allowed to use this design only if you agree to the following conditions:</b><br />
- You can not remove copyright notice from any our template without our permission.<br />
- If you modify any our template it still should contain copyright because it is based on our work.<br />
- You may copy, distribute, modify, etc. any our template as long as link to our website remains untouched.
</div>
</div>
<div id="about" style="margin:20px; display:none;">
<div style="font-size:30px;">About title</div>
<div>
FacebookPageTemplates.com offers you unique Facebook Page Templates absolutely for free. Our Facebook Pages are easy to install and can actually draw the attention of your page visitors. Owe to the unique design and the simple replacement of the content, our templates are very popular among facebook users. All the big companies have already created their own unique pages on facebook. Owe to these pages, users can buy your goods, exchange views and disseminate news about your business. So if you already have a website why don’t you create a page on facebook that will represent you or your company? Landing pages created on our Facebook Page Templates base will certainly attract the attention of the visitors and turn them into your fans.
</div>
</div>
<div id="services" style="margin:20px; display:none;">
<div style="font-size:30px;">Services title</div>
<div>
<img src="http://www.facebookpagetemplates.com/images/thumbs/7.jpg" alt="facebook template preview" width="166" height="211" style="float:right; margin:0 0 20px 25px;" />
It is almost impossible to ignore the Social Media especially when we talk about Facebook. Only in a few years, the Social Network became the most favorite location of all Internet users. In some other way, it is another internet world that offers many opportunities for all users. Today, you can use ur facebook profile not just for communication with your friends and acquaintances, but you can also use it to describe your business. By creating a unique and a beautifully executed Facebook Page based on our Free Facebook Page Template so you will have a chance to be noticed and stand out among others. So use our FacebookPage templates to make your page working for you.
</div>
<div style="clear:both;"></div>
<div>
<img src="http://www.facebookpagetemplates.com/images/thumbs/12.jpg" alt="facebook template preview" width="166" height="211" style="float:right; margin:0 0 20px 25px;" />
Thousands of people give flowers to each other every day. And it will be silly for the owner of a flower shop not to make some advertising of his products. Everyone knows that today, the most attractive place for advertising is Facebook, because it is the social network # 1 in the world and the number of its users exceeds 400 million. Facebook allows you to create your own page in its network, so use this opportunity to tell the world about your business. Use this template as a basis for a Facebook Page and get the army of fans who will communicate with each other and share all the information about your activities. Professional designers made this template to help your floral business to be more successful. All you have to do is to use our facebook page template to create your own page on facebook. Do not miss this opportunity and let millions of people the opportunity to learn about your business.
</div>
</div>
<div id="photos" style="margin:20px; display:none;">
<div style="font-size:30px;">Photos title</div>
<div>
Nowadays, the most effective marketing tool is Facebook. If you are the owner of a business company you're doing a big mistake if you are not actively promoting your company in a social network, especially on Facebook. Choose the most suitable template from our Facebook Page Template Collection and use it to create your unique Facebook Page. It will help you to stand out among the crowd of your competitors. Each and every template in our collection is unique and titled to a particular type of business. Put your products on your page, put some links to some other useful MOV. You can do all this in an easy way when using our Facebook Templates and it will be enough to attract the attention of your potential customers.
</div>
<div style="clear:both;"></div>
<div>
<ul>
<li style="float:left; list-style:none; padding:10px 2px;"><img src="http://www.facebookpagetemplates.com/images/thumbs/5.jpg" alt="facebook template preview" width="166" height="211" /></li>
<li style="float:left; list-style:none; padding:10px 2px;"><img src="http://www.facebookpagetemplates.com/images/thumbs/9.jpg" alt="facebook template preview" width="166" height="211" /></li>
<li style="float:left; list-style:none; padding:10px 2px;"><img src="http://www.facebookpagetemplates.com/images/thumbs/10.jpg" alt="facebook template preview" width="166" height="211" /></li>
<li style="float:left; list-style:none; padding:10px 2px;"><img src="http://www.facebookpagetemplates.com/images/thumbs/11.jpg" alt="facebook template preview" width="166" height="211" /></li>
<li style="float:left; list-style:none; padding:10px 2px;"><img src="http://www.facebookpagetemplates.com/images/thumbs/12.jpg" alt="facebook template preview" width="166" height="211" /></li>
<li style="float:left; list-style:none; padding:10px 2px;"><img src="http://www.facebookpagetemplates.com/images/thumbs/8.jpg" alt="facebook template preview" width="166" height="211" /></li>
<li style="float:left; list-style:none; padding:10px 2px;"><img src="http://www.facebookpagetemplates.com/images/thumbs/7.jpg" alt="facebook template preview" width="166" height="211" /></li>
<li style="float:left; list-style:none; padding:10px 2px;"><img src="http://www.facebookpagetemplates.com/images/thumbs/6.jpg" alt="facebook template preview" width="166" height="211" /></li>
</ul>
</div>
</div>
<div id="contact" style="margin:20px; display:none;">
<div style="font-size:30px;">Cotanct title</div>
<div>
<b>Your contact address:</b><br />
We present to your attention our series of Free Facebook Page Templates. Facebook FBML page templates is a good way to make your page attractive on facebook. Social Media have a big influence on all of us and our days it is not enough to have an attractive web site. If you want to be really successful then you need a strong page on Facebook. You can find here good quality facebook page templates that you can use to create your own page on facebook.<br /><br />
<b>Your website:</b><br />
<a href="http://www.facebookpagetemplates.com" style="color:#1a8ddc;">www.facebookpagetemplates.com</a><br /><br />
<b>Your Facebook Page:</b><br />
<a href="http://www.facebook.com/pages/Facebook-Page-Templates/134401766587136" style="color:#1a8ddc;">http://www.facebook.com/pages/Facebook-Page-Templates/134401766587136</a><br /><br />
<b>Your Twitter Page:</b><br />
<a href="http://twitter.com/FBMLtemplates" style="color:#1a8ddc;">http://twitter.com/FBMLtemplates</a>
</div>
</div>
</div>
3. Now please go to your Facebook Page and paster all this code to FBML area:
4. After save enjoy with ready micro site page on facebook:
So, now you can click to your tabs and look how pages on your microsite will be changed.
Source:
Micro-site on Facebook Page
Thank you for reading.
Wonderful post. Thanks!