Pre-requisites

• Your own website with PHP available
• Either an SSL certificate or use of a shared SSL certificate on your website
• A Facebook page i.e. a business page attached to your personal Facebook account

Creating the Facebook Page and Facebook App

1If you haven’t already done so, create a page for your Business or other entity.

To create a page, login to your Facebook account and at the very bottom there is should be a link to ‘Create a Page’.
Follow the instructions until you have set-up your page how you want it. i.e. adding pictures, contacts details, address etc

2Next, we need to create an app for our Fans Only section

Scroll to the bottom of your page and click on the ‘Developers’ link.
Then at the top of the next page, click on the ‘My Apps’ link.
Click on the ‘Set Up New App’ button at the top-right.

3On the Create Your Application screen, give your App a name and aggree to the terms and conditions.

Ideally you should name your App something similar to ‘Fans Only Bonus Page’ or something along those lines, as this will show as an application on the left of your page as a clickable link.

You will also be able to set this App as the landing page for your Businses/Entity page.

4Building the App – ‘About’ section – Your App Name will already be entered from the previous screen, so simply add a Description, i.e. what is going to be in this hidden section.

Upload an icon and a badge. The small icon will (as above) show on the left of your page against the link to the secret section.

5Building the App – ‘Facebook Integration’ section

Canvas Page: Enter a short page name here – i.e. ‘companyname-fan-section’
Canvas URL: Enter the full URL to the folder on your website that will contain your secret page – i.e. http://www.mysite.com/facebook/
Secure Canvas URL: Enter the full Secure URL to the folder on your website that will contain your secret page – i.e. https://www.mysite.com/facebook/
IFrame Size: Choose ‘Auto-Resize’
Page Tabs – Tab Name: ‘Fans Only Bonus Page’ or something along those lines
Tab URL: Enter the full URL to the file on your website that will be your secret page – i.e. http://www.mysite.com/facebook/index.php
Secure Tab URL: Enter the full Secure URL to the file on your website that will contain your secret page – i.e. https://www.mysite.com/facebook/index.php

6Click ‘Save Changes’ at the bottom and you should be forwarded to a summary page showing all the details you just enetered.

Click on ‘Application Profile Page’ on the right. Then on the left of the next page, click ‘Add To My Page’ and in the pop-up window, click the ‘Add to Page’ button next to your Business/Entity page.

Creating the Fans Only page on your website

OK, so you now have Facebook set-up correctly to pull information from a page on your website.

Now you need to create the page and upload it to your website. It must be a PHP page becuase we are going to be using a conditional statement to detect whether a visitor has ‘Liked’ your Facebook page or not.

If they have ‘Liked’ it, they will see all the great hidden content.
If not, then they will see a notice asking them to ‘Like’ the page to see all the great hidden content.

Fire up your favourite web page editor, create a new file called index.php and enter the following:

<?php
$request = $_REQUEST["signed_request"];
list($encoded_sig, $load) = explode('.', $request, 2);
$fbData = json_decode(base64_decode(strtr($load, '-_', '+/')), true);
if (!empty($fbData["page"]["liked"])){
?>

Enter your hidden content here

<?php }else{ ?>

Enter your instructions to the visitor to get them
to click the Like button to see your hidden content

<?php } ?>

The code above should be self explanatory, it checks for the existence of a Facebook session and a ‘Liked’ variable within that session and then uses a conditional statement based on the result.

Once the file is created and you have entered all your hidden content and instructions for the visitors who haven’t yet like your page, save it and upload it to your website.

To test to make sure it is working, visit your new Facebook page and click on your new App on the left. Try ‘Liking’ and ‘Unlinking’ the page to see the what is shown.

Of course there are many ways of getting the content in to your new index.php page such as using it to pull content from a database.

View the section below titled ‘Adding a mini CMS with Photo Uploader’

We have designed a small CMS type application which can be used to populate the Facebook hidden page with either a one off article or numerous articles

Features

• Includes an ‘Unliked’ section which is editable
• Ability to add one or unlimited extra sections
• Uses ckEditor WYSIWYG editor to add text to the sections
• Includes an Image Uploader with built in resizing using jQuery Uploadify, ImageMagick with PHP GD Library falback.
• Ability to edit and/or delete sections already created
• Front-end display for Facebook will show either:
  • (a) Heading with Content area if only one section is created in the back-end
  • (b) A jQuery accordion list of sections if multiple sections are created
• Requires a server running PHP5, a mySQL database and either ImageMagick or GD Graphics Library (should be built-in by default with PHP5)

Screenshots

Feel free to download and distribute this mini CMS package.

Download .zip (1.8mb) password: http://www.uksitebuilder.net

Facebook Secret Fan Page by UK Site Builder Ltd is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License

If you are unsure about being able to implement this yourself, we offer the following services:

• Creation of a Business page in Facebook
• Creation of a Facebook Application for your Fans Only content
• Installation of our mini CMS on your website/server

Please Contact Us if you would like further information.