A premium Facebook Page Template

Facebook Fan Page HTML Template: BlueStar

January 5, 2012 by PremiumCoding - 1 Comment

BlueStar is a premium Facebook HTML Fan Page that is also a part of our premium WordPress plugin that implements Facebook Fan Pages via WordPress Dashboard. This is the standalone HTML version which you can implement into your Facebook Fan Page.

A premium Facebook Page Template

[paid-downloads id="4"]

LIVE PREVIEW ON FACEBOOK

You can check our Facebook Page and see how this Facebook Fan Page looks in live action:

FACEBOOK PAGE THEME DESCRIPTION

This is a HTML version of the BlueStar Facebook Fan Page. It will allow you to easily create your own premium Fan Page that will present and feature your products, services and latest news. Home page uses widely used Nivo Slideshow to show your featured products and services with a short description. Below is a place for a mini portfolio and quotations.

Portfolio page will feature up to six of your best products and services. Images are opened and presented with Lightbox. Blog page is meant to show your latest news from your website. It was primarily designed to feature posts from WordPress (in our WordPress plugin) but you can enter any news from any website. Contact page uses a simple contact form so visitors can contact you directly from your Facebook Fan Page.

Dimensions of the template follow the rules Facebook has set for Fan Pages (520px X 700px).

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.

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

Theme consists of four HTML files (index.html, blog.html, portfolio.html and contact.html). Simply open them with a HTML editor (like Notepad++) and change the text, images and links.  Index.html consits of the upper menu, slideshow, quotes and lower portfolio. Each part is named accordingly in the html file. Portfolio.html is a simple file with upper menu and a portfolio with six items.

SETTING CONTACT FORM

You have to add your email address to the file contact_send.php for the contact form to work properly. Simply enter your email at the line  $email_to = ‘info@premiumcoding.com';  instead of ours and you are ready to go.

SCREENSHOT OF THE THEME

Below is a screenshot of the BlueStar Facebook Fan Page.

BlueStar facebook page template

[paid-downloads id="4"]