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 will no longer create stand alone html pages, good news is that the plugin has changed to a dynamic page plugin where we can change our facebook page inside our WordPress admin.
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.
While working on our WordPress to Facebook Plugin we discovered that from the 14th March 2011, we will not be able to add a page using the Facebook App and FBML, Facebook is moving to a more standard language.
So what does that mean for Facebook template page developers.
We can now create and add a Minisite in ten steps, it will require a minimal amout of editing, if you want to use a product like Artisteer to create a static html Minsite.
The next part of our Facebook template or minisite is the footer section, this is a simple HTML or text area, we can set a background, transparent, color fill or an image.
Under the footer section is the Digital Raindrops tagline, this plugin is released in good faith and has taken a lot of time, as a condition of use we ask you to leave the tagline unless you have contributed to the plugin, by Beta Testing, or financially by a donation or subscription.
What we have done here is give each page the ability to have up to five rows of content, with up to three columns, we thought that someone might want 15 thumbnails for a photo portfolio, so we have up to 15 content areas on a page.
The logistics of this took a little thinking about, so we can work on one page row at a time, and once we change the page and row we cannot load the previous row back again, this may come in a later release, but lets look at creating the content for ‘Page 1′.
To navigate our pages we need to style the menu, there are three types of menu we could use, All Images, No Images, Text and Images, we will look at two of these, the first one will be All Images this is the most simple, we just create a chop images to make our menu.
For this example we just visited one of the photo stock images websites and for a couple of dollars we have a licence to use the image in our template, we cannot re-distribute the image but under the license we can use it in our own or our customers template.
A lot of the work we have to do is in the header area, this is the part of the page and not the content that will get the attention of a viewer, so we have several options for the header area, background, logo, like button, titles and social media.
These are all optional and as part of planning our template we need to note the image sizes in pixels, this is so we can use the space well, remembering that we have half the width of a normal webpage.
Once we have set our template options we need to tell our plugin what setting we want for our sheet, Facebook templates and Minisites must be set with a width of 520px, these are the Facebook rules, so we must be thinking in half the size we would normally use.
In our sheet options we can set the Minimum Height or Fixed Height, we have three choices for the Background Style, transparent, image or color, we are going to use an image, we selected image, and then from our Template Images we uploaded in the Template Options we have selected our page_bg.png, this we will repeat on the x axis that is just a horizontal repeat, all our backgrounds will have these same choices for ease of use.
Starting with the Template Options where we will set the folder name and paths, name the pages and upload the images, the first checkbox we see is the Collapse Page Sections, check this if we are not using Internet Explorer, if we prefer to have all sections expanded then we can uncheck this at any time.
The Website Folder Path is where we will be deploying the template folder to on our production website, if we want to upload new images to the media library using WordPress then we check the Upload New Images, we can also import images from one of our WordPress installed themes, this can be an active or inactive theme we would sect the theme with the WordPress Theme Images lookup.
Next we name our Pages if we are creating a multisite, we keep these short as these will be our menu titles and section names in the template.
