Creating a Facebook FanGate.. Step by Step Guide

I’ve recently started using Facebook Company Pages with a number of clients, not wanting to be beat by technology I’ve tried to create a FanGate page to assist with gaining ‘LIKES’.  This step by step guide may not be correct but it worked for me.  Please feel free to add comments if you’ve managed to do it another way.

1.     Setup Directory on your web server

The Facebook app needs to load files into the Facebook page.  These files are stored on a directory accessible to Facebook.

In my instance I created a sub-domain to host the files and pointed it to a directory within my hosting account.

http://facebook.domainname.co.uk

Please note that this sub-domain will need to have a SSL certificate in order to complete the process of registering the Facebook app.

 

2.     Create files and upload to the server

Each app you build will require its own directory on the server, as the Facebook app is pointed to a directory on the web server.

A suggested file structure could be as follows for multiple apps.

/ Directory

App_1/

App_2/

 

3.     Creating a ‘LIKE Page’ – Welcome Page

3.1.    Download the Facebook API code

Facebook provide all the relevant code for talking to the Facebook interface.  The code can be downloaded in a number of formats ensuring it works with your server environment.  The download page is located at:

http://developers.facebook.com/docs/sdks/

Facebook doesn’t provide an SDK for the .net platform but a number of sites have worked on this and examples can be found through Google.  A link to a resource that may be useful is;

http://geekdeck.com/how-to-access-facebook-api-from-net/

 

3.2.    Query if user has liked the page

The following code works with the PHP code.

 

require ‘src/facebook.php’;

// Create our Application instance (replace this with your APPID and secret).

$facebook = new Facebook(array(

‘appId’  => ‘<FROM FACEBOOK APP PAGE>’,

‘secret’ => ‘<FROM FACEBOOK APP PAGE>’,

‘cookie’ => true

));

$signed_request = $facebook->getSignedRequest();

$page_id = $signed_request[“page”][“id”];

$page_admin = $signed_request[“page”][“admin”];

$like_status = $signed_request[“page”][“liked”];

$country = $signed_request[“user”][“country”];

$locale = $signed_request[“user”][“locale”];

$user = $facebook->getUser();

 

The remainder of the page builds a ‘like page’ if the $like_status value is true.

This page can be styled using CSS and Text to convey messages to the visiting user, as it is located not on Facebook.

By using additional code you can provide offers to the user when they click to like the site.

 

3.3.    Extending the Page to include user name.

The following routine pulls out the users Facebook name and displays to the page as the variable $name.

There are a number of additional tags that can be access from the $user variable.

if ($user) {

try {

// Proceed knowing you have a logged in user who’s authenticated.

$user_profile = $facebook->api(‘/me’);

$name = $user_profile[first_name];

} catch (FacebookApiException $e) {

error_log($e);

$user = null;

}

}

 

3.4.    Developing additional Pages

Once you have connected to Facebook successfully code could be developed to carry out the following functions:

  • Collect username and email address for newsletter registrations
  • Pull out specific items from an already existing shopping cart system
  • Show specially created product pages
  • Promote a competition

The list is endless and identifying opportunities is reliant on the imagination of the user.  The key points are to ensure that the resulting pages meet the business objectives.

 

3.5.    Key Point when creating pages

The page you’re pulling into the Facebook Page is located on your web server.  When using any form posts or parameter driven pages make sure that the code is created in a correct manner to prevent malicious use through Cross Site Scripting techniques.

 

4.     Building on Facebook

4.1.    Navigate the Apps section of Facebook

Facebook apps can be located at the following URL:

https://developers.facebook.com/apps

Carryout the Following Steps

  • Click –  ‘CREATE A NEW APP’ top right of the screen
  • Name your APP – company_welcome
  • Agree to Facebook Terms (tick the checkbox)
  • Click – ‘CONTINUE’ button
  • Select – PAGE TAB – from ‘How your APP Integrates with Facebook’
  • Fill in the relevant boxes
    • Page Tab Name – How it’s labelled on Facebook Page
    • Page Tab URL – The base url for loading content – http://facebook.domainname.co.uk/app_1
    • Secure URL – above url reflecting the https:// prefix
    • Page Tab Edit URL – if you enable Admins to edit the app features
    • SAVE Changes

 

4.2.    AppID and Secret Code

The screen that appears has the APPID and secret code – you will need to insert these into the page loaded to your web server as this allows the page to talk to Facebook and be loaded.

 

4.3.    Add an icon to the APP page

Next to the AppID and secret codes you will see a small link labelled ‘edit icon’.

This will enable you to upload an icon for the App Page and also it will show when in the Facebook Page menu.

It can take while to show in the page as it needs to propagate across the internet.

 

4.4.    Add to your Facebook Page

In the left hand menu of the App Page you will see a ‘Related Links’ menu.  Access the ‘View App Profile Page’ link.

This will open the App Profile Page

At the bottom of the left hand navigational menu – access the link – ‘Add to my Page’

You should be presented with an on-screen dialog asking which page to add the app to.

Select your Facebook Page (USE THE ADD TO PAGE button – don’t click the Page Name on the left hand side)

 

4.5.    Return to your Facebook Page and the App should now be appearing in the Left Hand Menu

 

Scroll to Top