Archive for February, 2012

 

How to Create a Facebook “Fan Gate” from Scratch

February 24, 2012
Share

Also known as Facebook “Landing Pages”, they are very useful tools to display exclusive content to your loyal fans and give an added incentive to attract more likers.

There are a few plugins, apps and tools out there to create these Fan Gates but the beauty behind doing it from scratch is that you have full control over every detail of your page. Including the ability to create as many tabs as you want and using your own thumbnail logo for your tabs.

To see a live demo, you can visit our Facebook Page.

This article is divided into 5 sections to make it easier to navigate:

Create and Configure a New Facebook App

Build a PHP Page for the Tab

Add the Tab to your Facebook Page

Make the Fan Gate your Landing Tab

Extras

Create and Configure a New Facebook App

  • Register as a Facebook developer: The very first thing you should do is become a Facebook developer. The reason behind this is that the way fan gates work is through Facebook apps. To create a Facebook app, you need to be a registered Facebook developer. Go to developers.facebook.com for more information.
  • Create a new Facebook App: You must create a new app that will produce your Fan Gate. This app will eventually pull and display the PHP page we will create later on in this tutorial, on your Facebook page tab.
  • Give your App a name: This name is just for identification purposes, it will not be the name displayed on your Fan Gate tab.
  • Select how your App integrates with Facebook: The two important sections you must select here are: “App on Facebook” and “Page Tab”. The former is to define a “canvas” for your app and the latter is used to define the actual page that will be displayed to your Facebook Page tab visitors.A very important note here is that Facebook requires you to have a secure host for your pages. To find out more about secure pages you can go to this blog post from the people at Fanpage Connect. It gives great insight and guidance on this subject.
    • App on Facebook: Set the Canvas URL and Secure Canvas URL to the directory where your files will be hosted. It’s very important that you add the last forward slash (/).
    • Page Tab:
      • Page Tab Name: The title you want to display for the tab.
      • Page Tab URL: This will be the URL for actual web page that will be displayed inside your tab. It is usually defined as the “index” default page (e.g. index.php) but it doesn’t have to be. If you have different tab apps and want to host the files in the same directory you may give them different names.
      • Secure Page Tab URL: Secure URL for the web page that will be displayed inside your tab.

Build a PHP Page for the Tab

You must build a webpage that will show or hide content depending on the “Like” status of the user accessing your tab. For this tutorial we will be building a PHP page but you can use other languages if you prefer. This page should have the same name as the one in the URL you provided in the previous step.

  • Download Facebook’s PHP SDK: This SDK will provide the functionality needed to access Facebook’s server-side API calls. You can download the SDK from github here. For more information on the SDK you can go to Facebook’s documentation. Copy the Facebook PHP SDK files into the same directory where your Page Tab URL file will reside on your host.
  • Include Facebook’s PHP SDK: The very first thing you must do is include the Facebook.php file:
    PHP
    1
    require 'facebook.php';
  • Get App Id and Secret: For the page to “understand” what app it corresponds to, you must include the App Id and App Secret provided by Facebook
    PHP
    1
    2
    3
    4
    5
    $facebook = new Facebook(array(
    'appId' => 'YOUR_APP_ID',
    'secret' => 'YOUR_APP_SECRET',
    'cookie' => true
    ));
  • Get “liked” Status: In order to show or hide content, we need to figure out if the user making the App request has liked the Page to which the tab belongs to. In this case we are talking about your fan page. It will look like this:
    PHP
    1
    2
    $signed_request = $facebook->getSignedRequest();
    $like_status = $signed_request["page"]["liked"];
  • Display Content: Now that you have the user’s “liked” status, you can display the appropriate content:
    PHP
    1
    2
    3
    4
    5
    <!--?php if ($like_status) { ?-->
    FAN CONTENT GOES HERE
    <!--?php } else { ?-->
    NON-FAN CONTENT GOES HERE
    <!--?php } ?-->
  • Full PHP: The entire basic PHP should look something like this:
    PHP
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <!--?php require 'facebook.php'; $facebook = new Facebook(array( 'appId' =--> 'YOUR_APP_ID',
    'secret' =&gt; 'YOUR_APP_SECRET',
    'cookie' =&gt; true
    ));$signed_request = $facebook-&gt;getSignedRequest();
    $like_status = $signed_request["page"]["liked"];
    ?&gt;
    YOUR PAGE TITLE HERE
    &nbsp;
    <!--?php if ($like_status) { ?-->
    FAN CONTENT GOES HERE
    <!--?php } else { ?-->
    NON-FAN CONTENT GOES HERE
    <!--?php } ?-->

  • Add Formating: This is just a basic PHP page to illustrate how you can show content depending on the user’s like status. You can always add styles and formatting to your pages just as you do for your website, blog, etc.

Add the Tab to your Facebook Page

Now that you’ve done all this work it’s time for you to share it with the world! To do so you need to follow these steps:

  • Go to the following URL: http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_PAGE_TAB_URL
  • You will be presented with a drop-down list of your Facebook pages, pick the one you want to add the tab to
  • Once you click “Add Page Tab” you will have a new tab on the left listed under your Wall and Info tabs

Make the Fan Gate your Landing Tab

Now that you have added your tab to your Fan Page, you want to make it the default tab people land on the first time they go to your page. This is how it’s done:

  • Open your Fan Page
  • Click on the “Edit Page” button on the top right
  • Go to “Manage Permissions” on the left menu
  • Select the newly created tab from the “Default Landing Tab” drop down

Extras

The 520 Grid System

The canvas size for a Facebook app or tab is 520 pixels wide. The 520 Grid System allows you to create content that will fit this limitation. If you are used to implementing a grid system for your regular website or just want a straightforward way to keep things under the correct specs without headaches, this is a very convenient way to achieve that.

Getting rid of those pesky scrollbars

Sometimes, even if you keep everything under 520 pixels, you still get scrollbars on your tabs. Sometimes what happens is that your canvas is too long to fit the initial dimensions so you get an internal vertical scrollbar which will throw your horizontal dimension out the window. So as a consequence you get a horizontal scrollbar. There is a great tutorial by Atomiku that helps you resolve this issue.

Kid-Capsule Version 1.2.1

February 10, 2012
Share

What’s New:

  • 3 New Photo Sharing Backgrounds: We have added 3 brand new backgrounds to your photo sharing layouts. As we promised, we have completed the seasons to include Spring, Summer and Fall.
  • Quick Guide: This guide will describe the buttons and icons and what they do. If you are new to Kid-Capsule, you will see the quick guide on startup. If you are already own Kid-Capsule, you will still be able to access the quick guide through the “Information Screen” by tapping the at the top left of the screen.
  • Measurement Settings: You spoke, we listened. You now have the option of selecting the measurement settings for height and weight. Simply access the Kid-Capsule section in your device’s “Settings” and select the units you would like to use.

Enhancements:

  • Photo Layout Background Selection Screen: Now you can select the background for your photo layouts in a visual and friendly manner just as you do a photo from the gallery.
  • Improved Information Screen: Much easier to navigate and quick access to our news blog and Facebook page.
  • Double Tap on Thumbnails: Double tap a thumbnail in your photo or video galleries to view it.