GrungeStar is a premium Facebook HTML Fan Page with grunge design. Theme is also a part of our premium WordPress plugin that implements Facebook Fan Pages via WordPress Dashboard. This is the standalone HTML version of the Facebook Page Template which you can implement into your Facebook Fan Page.
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
GrungeStar is a theme designed to fit perfectly into your Facebook Fan Pages. Dimensions are 520x700px and strictly follow the Facebook guidelines. It has a grungy design and will give your Facebook Landing Page a fresh and unique look. GrungeStar was developed from our PSD Facebook Template freebie that was released a few months ago.
This is the HTML version of the GrungeStar 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 Lightbox 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 four 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 = ‘firstname.lastname@example.org'; instead of ours and you are ready to go.
SCREENSHOT OF THE THEME
Below is a screenshot of the GrungeStar Facebook Fan Page.