Facebook Page Themes

Facebook Page Themes

October 2, 2013 by PremiumCoding - 25 Comments

IMPORTANT UPDATE: 3.10.2013

Our premium WordPress plugin, Facebook Page Themes,  has been moved from Codecanyon to our website ( Premiumcoding.com ) and is of today available for free! Grab it while it’s still hot :). Due to free nature of the plugin, there will be no free support from now on (unless it’s a bug).

DOWNLOAD THE PLUGIN

Download Free Wordpress Plugin: Facebook Page Themes (1233)

We have added a brand new Theme to our collection. You now get 6 unique Themes in the Facebook Page Themes Plugin. Check the live preview below (WhiteStar).

WhiteStar Facebook Fan Page

IMPORTANT UPDATE: Facebook Timeline for Pages (19th of March, 2012)

We have redesigned the plugin so that it now meets the new width (810px) of Facebook Timeline for Pages. You will now get two versions of the plugin, one is the same as before fitting the narrow Canvas (520px) and the other one is the new version fitting the wide Canvas (810px). We wanted to give you the possibility to choose which plugin fits your needs better, that is why we kept the old one.

HOW TO UPDATE THE PLUGIN TO 810px WIDTH

First uninstall and delete the old plugin (including the files). Then install the new plugin and activate it. Please note that you will have to add the content once again since several settings are different and you can now have more portfolio items on the home and portfolio page due to wider Canvas.

LIVE PREVIEWS ON FACEBOOK

You can check our Facebook Page and see how the plugin themes look like in live action:

 

“Welcome to our brand new WordPress plugin. Custom Facebook Page Themes will implement a Facebook Theme via WordPress administration. Adding and customizing a Facebook Page Template has never been this easy.”


FACEBOOK

Facebook Pages are getting more popular by the day. Many companies and bloggers now use custom designed themes on their Facebook profiles to promote their products or services.


WORDPRESS

WordPress is currently powering almost 15% of all websites which makes it the most widely used CMS. Simplicity of use and powerful addons are the reasons why even companies now use WordPress.


CONNECTION

Have you ever thought that it would be great to Add end edit content on your Facebook Page via WordPress Administration panel? Our plugin does just that. Simply choose one of the premade themes and add your content.


FACEBOOK PAGE TEMPLATES

This plugin comes with five premade themes. We will add new ones on a frequent basis (at least once a month). All templates use CSS for design so they are easy to customize!


NIVO SLIDESHOW AND LIGHTBOX

Our plugin uses widely used nivo slideshow as an image rotator on front pages and lightbox for image presentations in Portfolios.


FAST SUPPORT

If you have any problems with installing the Facebook Page Theme Plugin or need any other form of help please do not hesitate to contact us. We are available via contact form on our web page and our support page on CodeCanyon.

FACEBOOK PAGE THEMES DESCRIPTION

In the past few months we noticed an increasing demand for Facebook Page Themes. After a numerous implementations we came with the idea to automatize the process to some extent. We decided to build a few HTML/CSS themes from our Facebook PSD themes and let users add content and images via WordPress Administration. Most people do not want to edit HTML/CSS and Flash themes so they need to hire someone to help them with that task. With our plugin this is no longer neccessary as you will be able to add content via easy to use WordPress Administration panel.

What if neither of the premade designs is what I am looking for, is probably the question that will get asked a lot. If you have some HTML/CSS knowledge you can edit one of the themes and customize them to your liking. You just need to be careful to follow the basic structure of the template. We will add new themes each month for no additional priceso variety of themes will expand through time.

What if I want a specific design for my Facebook Page Theme? If you would like a design that doesn’t follow the basic structure seen in our premade designs do not  hestitate to contact us. We can develop a custom designed theme with appropriate Administration Panel, based on your wishes.

Multiple use of templates means that you can use all five facebook themes at once, each with it’s own specific content. Simply choose each theme and add the desired content to it. After you have edited and saved all five themes, simply use the links provided to create several Facebook Themes on the same Facebook Page or on separate Facebook Pages. That means that you can use Theme number 1 for your company, Theme number 2 for your personal page, etc.

Images used in our previews were bought on Photodune and are used for preview purposes only. They are not available in files for download. Illustrations used in preview for Grunge Template are the work of Niklas Coskan aka Deedeekid, one of our favourite illustrators. They are used for preview purposes only and are not available in files for download.

WORDPRESS BLOG ON YOUR FACEBOOK FAN PAGE

If you only need the Blog Page of the plugin and wish to set it up in less then five minutes then we recommend our latest plugin that implements only the Blog from your WordPress website. Check our WordPress Blog on Facebook Page Plugin that comes with seven predesigned skins and will automitize the process of posting your news on Facebook Fan page.

EARN MONEY BY REFERRING NEW USERS

You can earn affiliate commissions through Envato (CodeCanyon) just by referring new users to Facebook Page Themes! Just sign up on the Envato Marketplaces (it’s free) and earn a 30% commission on the first deposit of every new member you refer!

If you aren’t already an Envato user, sign up here. After you complete registration process you are ready to receive referral commission. Share referral link below to start earning money.

1
http://codecanyon.net/item/facebook-page-themes-via-wordpress-admin/690366?ref=username

USE IT AS A HTML TEMPLATE

You can also use any of the Themes as a mini standalone HTML website. Dimensions will ofcourse be the same as on Facebook (520px x 700px). You just need to put following code into index.html and you can use the HTML site:

1
<div style="text-align: center; width: 100%;"><iframe style="border: none;" src="http://premiumcoding.com/wp-content/plugins/wp-facebook/blackStar/" height="100%" width="100%"></iframe></div>

Simply change the link to the theme you wish to use. Click on the button below to see the preview.

FURTHER DEVELOPMENT AND NEW THEMES

We will add more Themes each month and we are open to suggestions. If you have a good idea and basic structure of how the Theme should look like and what functionalities are a  must have do not hestitate to contact us. All suggestions will be considered and we will pick the most wanted ones and include them in our future updates.

QUICK GUIDE

When you unzip the files you just bought look for the file wp-facebook.zip. Go to your WordPress admin panel and select “Plugins”. Click on button “Add new” and on next page click upload. Now browse for the zip file mentioned above and click Install now. All you have to do now is to activate the plugin. Settings for the plugin can be found under main settings of WordPress named FB Themes.

HOW TO INSTALL TEMPLATE ON YOUR FACEBOOK PAGE

After you install the plugin go to FB themes (one of the main settings tabs). Choose tag named Theme and select one of the premade themes. You will now notice several links above the settings. Use the appropriate link and follow the procedure below to add the Theme to your Facebook page.

  • Create a normal Facebook Account (skip to step two if you already have a Facebook account)
  • Login with that Account
  • Once logged, create a Fan-Official Page here.
  • Verify your account for Developer App here. Can be done by sms or credit card.
  • Create a new App.
  • Set application name
  • Now copy / paste the provided link to the following tags below: Website, App on Facebook, Page Tab like seen here.
  • If you wish that the theme will appear properly in secure connection (https) you need to have a SSL certificate on your hosting (server). Check how to add secure connection link to your page here.
  • Assign the app to a page, using “Add to my Page” button on App. Profile Page. (left menu)
  • If link to app. doesn’t appear, inside the FB Page / Edit page, go to Apps. section, and try to Add it clicking on “Edit settings” in the app. entry in the list.
  • Additional advice: avoid using _self links or giving users that possibility through the xml. Self links will be loaded inside the iframe.

UPDATE – February 22, 2012

Recently some of the customers could not upload the plugin directly from the upload form because they had set a maximum upload file size to less then 10MB. Plugin is 7MB in length and if you have set a limitation like this please increase it to 10MB. Alternatively you can also upload the plugin on your server via FTP and then activate it from the Plugins section.

UPDATE – January 21, 2012

Below is an updated screen of you have to set up your Facebook Application. In case you do not have a SSL certificate replace the Secure Page Tab URL with the link from Social Server: “https://secure.social-server.com/v2/” and then follow instructions found on their site.

How to set up your Facebook App

UPDATE – December 9, 2011:

Facebook is in the process of removing the App Profile Page completely, and has added new ways to add your App to your Fan Page. Read my article on Facebook’s removal of the App Profile Page.

If your App is only to add a Page Tab to your Facebook Page, and not an App that you want to make available to multiple pages, you can simply navigate to this URL in your browser:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

Replace “YOUR_APP_ID” with your App ID and “YOUR_URL” with your App’s Canvas URL, both of which values are available in your app settings.

For a more detailed tutorial about installing apps on your Facebook Fan page read the tutorial on Hyperarts.

CHANGES TO FACEBOOK PAGES (HTTPS PROTOCOL)

Since October 1st there are some big changes in how Facebook handles security. If a Facebook user has secure browsing turned on then your Facebook Page needs a secure connection to appear properly. That means that you would have to upgrade your hosting plan (add a SSL certificate). If you do not wish to buy a SSL certificate you have another option. A site called Social Server allows you to convert your existing URL into a secure one (https) for free. Sign up and enter the link that our plugin provides. You will get a secure link in return which you now have to add to Secure Canvas URL and Secure Page Tab URL like seen here and you are all set.

ADDING CONTENT TO YOUR THEME

You should now already see your Theme installed on your Facebook page. It will look a bit messy since you haven’t added any content yet. Please note that you can add all the content before you actually add your theme on Facebook. I would even recommend that since you do not really want to have an empty Theme on your page. You can always see how a Theme looks if you click the link provided at the top of Administration panel. Adding and editing of images and content is done in a way described below. Administration is divided into several sections like Slideshow, Home page, Portfolio, Blog and Theme selection.

EDITING SLIDESHOW

First tag in administration is called Slider and is used to add, delete and edit images and text for your slideshow on front page (used in BlueStar, GrungeStar and RedStar Themes). In upper menu click Add Image. First you have to upload the image. Clicking upload image will bring up WordPress form for media upload. Click Select files and search for your image. When image is ready click Insert  into post. Image is now set and ready to be used. Now simply add the text you wish to use and URL to which the image should point. Changing order of images on Slideshow is done with a simple drag and drop feature. Simply drag an image and drop it in a position you prefer.

EDITING MAIN SETTINGS

Here settings for Menu and Footer (which are the same on all pages) are defined. You can define titles for four title tags in settings for Menu. If you wish to use our event calendarinstead of portfolio page simply set appropriate field to true. In footer settings you can set the lower line of text (like copyright notice).

EDITING HOME PAGE SETTINGS

Home page settings are divided into three sections. Slider options define several parameters used for slideshow. You can set the upper text title (PRESENT YOUR PRODUCTS), type of animation, pause on hover, time each slide is shown and whether to show the navigation buttons or not.

Portfolio section presents your latest endeavours. Upload the image in the same way as described above (with WordPress form for media upload) and set the title and content text and you are ready to go.

Quotes are used to display customer comments or to simply display a short note about your company or an update about what is going on with your site. Simply enter both lines into appropriate fields and update the settings.

EDITING PORTFOLIO PAGE SETTINGS

Portfolio consists of six items. Add Title, content text and image for each of them. Portfolio page uses lightbox to present your images when clicked. Please note that you shouldn’t use images that are over 500px wide and 500px high since the size of Facebook Theme is 520px x 700px. Uploaded images will be automatically scaled to fit the portfolio dimensions.

EDITING BLOG PAGE

Blog page is used to present your latest wordpress posts on your Facebook Page. You can also set the ID of the post if you wish to show only specific posts. You can hide the date of the post if you do not wish to use it. If some of the titles on your blog are over 35 characters long you can shorten them by selecting  Short Title parameter to true.

EDITING CONTACT PAGE

Contact page is divided into four sections. Contact intro text section defines the title and presentation text. Contact Labels define four text fields that are used for contact form (name, email, message and send message button). Success and error message are set in the next section. Simply provide the text you wish to use for those fields. Contact Settingsdefine the email address from which all the email messages will be send. You can also define the topic here (like Facebook Message).

SCREENSHOTS OF IMPLEMENTED THEMES

Below are screenshots of all the Facebook Themes that are currently available. We will add more as the time progresses.

BlackStar Facebook Template     WhiteStar Facebook Fan Page         FashionStar facebook page template   GrungeStar facebook page template     RedStar facebook page template

SCREENSHOTS OF ADMINISTRATION PANEL

Below are some screenshots of our administration panel so you can see how easy it is to add images and content to your Facebook Page Theme.

          Main Settings of each Theme     Contact Pages

DOWNLOAD THE PLUGIN

Download Free Wordpress Plugin: Facebook Page Themes (1233)