Post navigation

Preview Facebook Template Wizard

We have been quiet lately and perhaps you were wondering what we have been doing, well we have been looking at Facebook templates and micro websites, so what has this to do with WordPress.

To have a Facebook Template Page or Micro-site you need the layouts, images, text and other assets, these have to be hosted and there are services that charge $100’s to create a template page and add it to Facebook, the pages are 520px wide so a mini version of you website with the same look and feel would be good, but how can this be done for free?

We have the ability with a WordPress.org website to host our own images links and content, so we will be able to do this by just adding time, how can we create the layouts without hours of work is another question.

Digital Raindrops Facebook Template Wizard

We love a new challenge so we have a roadmap to create and release a free WordPress plugin in early March, starting beta testing in February, a few walls have been hit on the way as we are learning more, we had a nice color picker that worked on a local install and not in production, we add <style></style> tags in the file and it worked great in Firefox but Internet Explorer just ignores these tags, so we are re-writing the plugin to create and link to a stylesheet on the website.

Preview

This post is to generate interest find beta testers that can test the plugin and feedback, and we wanted to give you a pictorial preview, beta testers just need to post a request, on our Facebook wall there is also a rather rough preview page, we will not go into detail at this stage just show where we at the middle of January in pictures.

The Sheet

There will be a number of admin menus lets look at the sheet, here we can set things like the minimum or fixed height, background and fonts, here you can see we have a minimum height of 500px, the background styles are transparent, color (fill) or image, here we are using an image with a vertical repeat.

So how did we get the image upload path, see the assist edit button [...] we jus press it, WordPress upload and insert how cool is that?

As we save each option the code is re-created lets have a preview of just the background, we go to the preview page and this is what we see.

Next we would set the sheet font lets look at this screen and the choices.

The Header

Lets start at the top with a header, we need the header area (transparent background), titles, logo, like button and social media.

We can have two title lines just like our WordPress website, we can choose font styles, size and color

For the logo we need to upload a smaller version of our website logo, remember at 520px wide the real estate is limited

Next we add a like image with the up loader.

Then the social media here we have three subsections where we will add images, links and alt tags as well

Lets have a look at what we have, Aghhhh! we have no margins!

We need margins for logo, titles, like and social icons, lets look at one screen.

Then we adjust the other and preview again!

The Content

For the content we have four pages with five rows, each row can have up to three content areas, lets add our first page one row one area, we will nick some html from one of our pages, drop ot in a text editor and edit it.

First we tell the plugin where to add the code, page and row.

Then we just paste this into content area one, we can add a small or large YouTube video as well, (we are still coding this part for Facebook, but the preview worked).

Go to the page and activate it, this is so we can plan test and control different layouts.

Lets have a look at what we have now!

Next we add margins, padding and a border, we could change the background and font of each area as well.

You get the general idea here we added two content areas as well, click the image to visit.

Well that all for now check back around March!

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.

Connections

Updates via Feedburner

Related Posts

Posted in Blog

There is a nice little application for the IPad that also works on the IPad Mini and IPhone, the app costs around $20/£20 and allows you to create Sales Orders to be taken off line, so what has this business … Continue reading →

Posted in Facebook

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 →