Facebook Template Beta 2

It has been two weeks since the Beta 1 was released for testing, after feedback we have made a number of changes.

The main topics in this section are still relevant but with a few changes, the major changes are the tabbed admin bar and the way we will create the content, using custom posts, if you have beta 1 then you must de-activate the old plugin first.

Custom Posts

The plugin will create a new menu item for custom posts, these are private and will not show up in the website posts or pages, in the Admin area or on the main site.

When you update the WordPress posts the plugin will overwrite any existing post, so it is important that we layout the website and style the containers before we edit any content, dummy content will be used as place holders.

We will need to look at the WordPress html of each post before we take a template page live, when pasting into the content text blocks WordPress will strip out any empty divs and create some of it’s own.

Previewing the code to make sure there are no new divs added by WordPress will be a part of the learning curve.

One thing you will notice with “Beta 2” is that while editing the new custom posts the style will relate to Facebook and Not WordPress, we will style the template from the Facebook style base.

Here is the first page created with Beta 2


Please follow the following sequence for best results.


This has been altered to hold the active pages and content, the folder name is a required value to get started, if we are going to deploy the files then the url of the website and or folder needs to be entered on this step.

We can now upload any number of images directly to the template images folder, WordPress however will create thumbnails on upload, so we may want to delete any images we do not use before we move to the production Website.

We will add our Page Names and activate the content rows from the Template page, we can pop back and add new pages and rows as required.


This section is where we set the minimum height of our template, setting this will give a minisite a smooth look.


Setting the header height will activate the header content menus, we can add a background image, color etc: from this option page.


This section if for the Logo, Titles and Like Image styling, this has not changed so the previous information is still relevant


This section if for up to thee Social Media Icons, alt text and links, this has not changed so the previous information is still relevant


This section if for the Menu Style for minisite templates, this has not changed so the previous information is still relevant


This section if for the Footer Style, there is no preview in the WordPress posts as WordPress was stripping code, this has not changed so the previous information is still relevant


This section if for the Menu Style for minisite templates, this has not changed so the previous information is still relevant, it is most important that the styling of the content areas is done before adding new content, as updating the WordPress pages from the plugin will overwrite the existing layout. 


Once we have the containers styles we send our pages to WordPress so we can edit the content, we make all layout changes before we add new content.


The preview code has been changed, it will generate the layout from the plugin, but the content is extracted from the WordPress custom post Template Pages, the plugin will identify the staring div for the container and find the next closing div as the end point, so it is important that we look at the WordPress HTML as WordPress will can add additional divs by itself while cleaning code.  

Page One, Page 2, Page 3 and Page 4

Here we can add YouTube videos and add, edit or tweak the styles for our containers, there ate sections for FBML as we may want to change a link or add something specific for Facebook, but in most cases if we use the container tab we would not need to edit this.


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.

Leave a Reply


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

Related Posts

Posted in Facebook Tutorial


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 … Continue reading

Read More