Artisteer Beta 3 HTML Site to Facebook Minisite

Here is a short pictorial overview of taking an Artisteer HTML template across to a Facebook Minisite.

We have used the Artisteer Sample called Alpha Motors as our template.

Set the sheet width to 520px, and set the pages to just four, because of the menu, edit the content to about 800px high.

Alpha-Sheet

Change the file extensions from html to php

Alpha-3

Open each of the four files and change the href links page extensions.

IMPORTANT: Unlike the FBML we do not need to add absolute paths for files or images, as IFrame will use the relative path like a normal website.

Alpha-2 

Upload the folder to your website via FTP.

ftp

Test your website by typing the URL in any browser and have a look, make any changes, test the menu etc:

Over on Facebook Developers create a new Application and add the path’s, see this post Step 4 to Step 10 for the Facebook part!

Here is a Live Twenty Ten site as a Facebook Minisite (Tutorial Coming Later for this one)

Here is Alpha Motors as a Facebook Minisite

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.

15 thoughts on “Artisteer Beta 3 HTML Site to Facebook Minisite

  1. Hi David,
    Thanks for this great tutorial. I have created a 3 page mini site with Artisteer and exported it but how do I change the file extensions from html to php. Sorry if this is too basic a question but it has me stumped! Renaming them is surely not enough as that doesn’t change the filetype?
    Thanks for your help,
    Tina

  2. Hello David. Thanks for the great stuff here. Question, If I wanted to use WP as my dedicated site for mini FB site for code copying reasons for the iframe, would/could I install WP in a sub directory folder on my hosting account as a new blog and go from there? I would use Artisteer to create the template. The reason I ask is I’ve had nothing but trouble using the ftp through Go Daddy with Dreamweaver and prefer not to work with html (again). Thank you.

  3. Hi! First thanks for your time writting this :)
    Do you Know how can I achieve multiple “tabs” for one application?
    I know that decoding the signed request I can read the pageID and userID and stuff like that… And that reading so I can make an App that works on multiple pages…

    BUT… What if I want multiple tabs from the same application on a single page? Take the old FBML app as an example… People get used to add this apps many times on a Facebook page in order to achieve many landing pages for their different campaigns… Am I clear?

    Multiple tabs from a single APP working on a single page. Is it possible? Any clue? Thanks :)

    • Export the template as html then rename the files by changing the exention, if you cannot see the extentions in Windows Explorer, then use the menu item organise and change the settings (options) to unhide extentions of known file types.

      HTH

      David

      • Thanks, I got it. But on the fb the link is different from yours and the site was not embbed in to home page. ln short I did not get it working.

  4. Hi thanks for this great information, however I am stumped at “open each of the files and change the href links”. Where are these and what are you opening them with? I tried to find them by opening with my html editor and there are nowhere to be seen.

    Any help would be brilliant. Many thanks

    • Hi Paula,
      I text editor is all you need, there is a free one called notepad++ have a Google, this is a code editor which changes keyword and text colors to help you read it easier.

      open the files and edit > search for ‘href’

      David

  5. Hi,Im lost because of the newly updated facebook developer section..I couldnt set up my website in facebook..hope you could update me on the lates “how to set up artisteer on facebook” article..

    thank you

    wish you the best

Leave a Reply

Connections

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

Related Posts

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