Create a Facebook Mini-Site from Artisteer

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.

 

Sheet Width

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.

      

Pages

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.

Social Media

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.

  

Facebook Page

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

 

New Elements

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”>

Content

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.

The Menu

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!”

Download Files

The files for this tutorial are downloadable for reference use only!

My DiARY Micro-site (1340)

That’s All Folks!

Notices

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.

Membership

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.

17 thoughts on “Create a Facebook Mini-Site from Artisteer

    • The latest,
      But you can apply the theory to any html theme or template, you could just download a free multi page html theme and convert this, you do not really need an Artisteer theme, but you can pop out a nice theme so quickly.

  1. Pingback: How-to: Create Facebook Micro-site from theme - Blog Forum - Bloggeries

  2. Hey David.

    Actually, you’re not using the “latest” public release of Artisteer – you’re using the BETA of v3.0. I kept trying to open the template in Artisteer 2.6 that I have (the latest public release and the menus didn’t look correct. Then I looked at one of your screen shots and realized you are using 3.0. That’s the BETA of the upcoming big release.

    Anyway, what type of template are you building? It’s definitely not a WordPress template unless 3.0 does something different (very different) from 2.6?

    Thanks for the great tutorial.

    James Dunn

    • Hi james,
      Here is a clean theme export, you are correct I was using ‘Version 3′, but
      the theory should work for older versions, if you apply the process.

      Regards

      David Cox

      T: +44 (0)1322 404616
      M: +44 (0)7845 842801

      Website http://www.digitalraindrops.net

      This email and any attachments are confidential and adeptris.com reserves
      all rights of
      Privilege in respect thereof. The message is intended for the use of the
      addressee(s) and if
      you are not the intended recipient, any use, and disclosure or, copying of
      this message is
      unauthorized. If you have received this email in error, please notify us
      immediately by
      phone (07845 842801) or email to david.cox@digitalraindrops.net and delete
      this email.

      Any form of reproduction, dissemination, copying, disclosure, modification,
      distribution
      and/or publication of this email is strictly prohibited. It is possible for
      data conveyed
      by email to be deliberately or accidentally intercepted or corrupted. For
      this reason, in
      communicating solely by email, DigitalRaindrops.net is unable to accept any
      responsibility for any
      breach of confidence, which may arise through the use of this medium.

      • Hey David.

        Except that a 3.0 version will not open in 2.6.

        If I wanted to repeat this process, what would I select – HTML, Joomla, ASP.NET, Drupal, DotNetNuke, or CodeCharge Studio? If I had that, then I could play with this myself.

        Thanks.

        James

        • Never mind David. I read the comment below and I guess I should just build an HTML theme with Artisteer and the follow the rest of the steps.

          Thanks again.

          James

  3. Hi David,

    Any possibility of you doing an instructional video on this after you have the multi-site plug in ready?

    HG/mws

    • Not to hot with the video tutorials, I will have a look at what software is out there and see what I can do.

      Quite busy with the day job and the plugin at the moment, I will have to see what time I have.

      Regards

      David

  4. Hi David!
    The tutorial is really nice but when i want to make a different layout than the one suggested by You I have some problems:
    1. between and there are many different lines that don’t show up on Your tutorial.
    2. i have problems with “New elements” and “Menu” sections described in Your tutorial.

    I would be really thankful if You could explain it in a more detailed way or to prsent a “universal” code that would work for different layouts etc ?
    Thank you in advance!

    Greg

    PS. Love digital raindrops!

    • one more problem is that the images (all connected to the layout so the background, navigation bar, buttons, etc) don’t display:(

  5. Thanks for posting this. I started out using Artisteer to build Drupal and WordPress themes. Once I got the hang of theme building haven’t really used it much since. I’ve been thinking about working on my Facebook fan page and this looks like the fastest easiest way to take care of that without having to dig in too deep into how FB handles things.

  6. It’s the best time to make some plans for the long run and it is time to be happy. I have read this post and if I could I wish to recommend you few fascinating issues or tips. Maybe you can write next articles regarding this article. I wish to read even more things approximately it!

  7. hi friend,
    Reallu u are a great teacher. many thanks to u, coul u please inform me how to create a vertical menu in blogger with artisteer?
    thank u

  8. I don’t understand – I went to the Facebook page – it looks like any unstyled FB page. Ok – there is an image associate it with it – where is the mini-site or anything that’s customized on that page? Am I missing something? Thanks :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Artisteer

googlefonts11.png

As Artisteer users one of the first things many of us do is add code to hide the titles, we often do this for the simple reason that the default fonts are safe and boring, so in this post we … Continue reading

Read More

Posted in Facebook

plugin9.png

What a rollercoaster ride this has been, after the announcement that Facebook were deprecation the FBML pages and changing to IFrame this meant a lot of research and a re-write of some of the functions. Bad News is the plugin … Continue reading

Read More

Posted in Tips

colorizer-1_thumb.png

We thought we would use the WordPress Twenty Eleven theme and the the Farbtastic color picker to colorize our theme from the website front page instead of the admin area. We have been looking at the $_SESSION variable, so we thought … Continue reading

Read More