We are writing a WordPress plugin for creating Facebook mini-sites, and had an email from the Artisteer forum asking about making a mini-site from an Artisteer generated theme.
Thinking about this and the different flavours of CMS template and themes created by Artisteer a WordPress plugin may not suit all, so here is the process in pictorial steps for creating a Facebook Micro-site from Artisteer.
Facebook Fan-Pages and Micro-Sites
Fan Pages and Micro-sites are not a part of your normal Facebook page, they are in a different area, you can use these to promote services, products, events etc, separate from you personal Facebook account.
We will not go into this in any detail, we can just use Google and research if we do not know to much about them.
The key differences are that unlike WordPress, Joomla, Blogger and Drupal the content is static like a small html website, so we cannot just drag in posts etc:, however we may have Artisteer artx files that we have used for a website where we now would like a fan page or mini-site.
First thing is to think small is beautiful, the width of a micro-site is just 520px, that is likely half of what we would normally use, open our artx file and change to html pages, we are using one of the Artisteer sample templates called “My DiARY” and will now turn this into a Facebook Mini-Site with just our website, the Artisteer template, FTP access and our text editor.
First thing we do is open our Artisteer template save it with a new name and change the sheet width, here is a screenshot of how to do this, set this to 520px.
Remember that menu real estate is precious so we will create, edit, add and delete pages, four is nice number of pages, we are keeping, “My Diary”, “About Me”, “Links” and “Contact”.
Visit each page take time to edit the text and layout to our requirement, the more we do here the easier it will be later.
As we lost the sidebar from the original layout we want to add in social links, so we will just inset an image or two, in this example we created a new blog post and added the images later removing the title, we added Twitter and You Tube, this is how we can add in the links.
Export the Theme
When we have finished editing the layout, we export the theme to a local folder, and preview the index.html, check that the layout renders fine in our browser, if not we make changes in Artisteer and export again.
Inside the folder we create a sub folder, this will be the folder that will be transfered by FTP to our website, so lowercase and no spaces, copy and paste the images folder and style.css to the new folder.
Relative Image Paths
Open the style.css file that we just copy to the sub folder, open this in a text editor, you can use notepad but one with color codes and formatting is better, we use Edit Plus, but we could download and use notepad++ for free.
We need to let the stylesheet know where are images will be on our website, we need to decide before this the relative path of the soon to be Facebook template folder.
All we need to do in the style.css is change ‘images/’ to the relative path, this is where the websites new Facebppk template folder will be located, the we just click Replace All.
FTP Folder and or Files
Depending on our hosting options we now create or transfer our new folder with the two files, we use the free program FileZilla for this, and have we have placed our folder in the root path, you may want to locate the folder at a lower sub folder depth.
Conclusion is that we have only needed to upload just the images folder and the modified style.css to our webspace.
Next we create the layout for our Facebook micro-site, there are the four pages we created in the Artisteer folder, we will have to merge these into one file, the file will have most of index.php and just the content of the other pages, the content from these pages will be wrapped in a new div class that will be switched, hidden and shown as needed.
Open index.html and save this as facebook.html, Facebook renders the header and body code, we do not need this but we do need to call our style sheet, we copy the stylesheet line down the page, below the <body>
The we want to loose everything above the moved line, we can select and delete.
Now we navigate to the end of the file and delete these two </body><html> closing tag lines
As said earlier we are now going to wrap our content sections in unique div class elements, these again lowercase and no spaces, ours are “my-diary”, “about-me”, “links” and “contacts”, this div goes between the art-sheet-body and the art-content-layout, these new div’s have a class and id name the same, also we could add an empty “style” as in this example <div id=”my-diary” div class=”my-diary” style=””>
Trace the sections down and add a closing </div><!– closes my-diary –> at the correct nested point, now we can add one new section for each additional page, like this note the style=”display:none;”, <div id=”about-me” class=”about-me” style=”display: none”>
We now have our three wrappers with no content, all we do here is open up the other html files copy the content section and paste this into the relevant section in our facebook.html file, lets do this with our contacts.html, we copy this block, different layout elements may not look exactly as below, so keep an eye to make sure the indentation is right.
Then past into the correct section.
Facebook loads an on click script that switches the sections, here is a simple sample:
<li><a href=”home.html” clicktoshow=”page-1″ clicktohide=”page-2, page-3, page-4″>Page One<a></li>
We will substitute the <a href section with our wrapper classes, we have added some line breaks so it is easier to read, but these are inline as a rule we must remove the ./ in the href=”./
Linking the Page Images
Remember one of the earlier steps when we changed the image paths in the style.css, we will do something similar in our facebook.html file, notice we are changing ./ for the realtive path of the main folder and not the images folder .
The Micro-Site Conclusion
That is it our site is ready to deploy, it will get easier one we have done a few.
Join Us on Facebook
There are a number of tutorials on how to create the Facebook pages, all we do is copy the contents of our facebook.html and paste it into our “FBML box”, here is one we prepared earlier!
Artisteer Sample My DiARY Facebook Mini-Site if you like it then “Like It!”
Keep up to date with Digital Raindrops http://www.facebook.com/DigitalRaindrops
WordPress Facebook Plugin Fan Page
Keep up to date with the WordPress to Facebook plugin, if you like it then “Like It!”
The files for this tutorial are downloadable for reference use only!My DiARY Micro-site (1730)
That’s All Folks!
We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.
Code disclaimer information
If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.
All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.
These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.
All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.
Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.
This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.