Posts Tagged ‘Facebook’

 

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.

Did you know Kid-Capsule has scrapbook style layouts for sharing your events? – Part II in a Series

January 26, 2012
Share

“Happiness quite unshared can scarcely be called happiness; it has no taste.” – Charlotte Brontë

Kid-Capsule has 3 ways of sharing your family photos, memories, milestones and events:

  • Send an e-mail
  • Post to your Facebook wall
  • Send the packaged event to other Kid-Capsule users

All three methods have the option of attaching a photo to go along with it. Each photo will be highlighted with a scrapbook style background and a vellum style tag with the event details written on it.

As of Version 1.2 there are 2 backgrounds to choose from: Classic and Winter. But get ready for version 1.2.1 of Kid-Capsule, it will have 3 new backgrounds to complete the seasons and it will offer an easier way to select the background for your image.

This is how easy it is:

Every event is equipped with a sharing button:

Once you tap the sharing button you will have 3 sharing options as described above:

If you decide to share a photograph with your event, you will be presented with the event’s image gallery:

As of version 1.2 you will have the option of selecting the classic green background and a winter wonderland background:

Kid-Capsule then works its magic and you have a beautiful scrapbook style layout for sharing your event:

For more information on sharing this and other features, visit our help.

Send Birth Announcements with Kid-Capsule App

July 7, 2011
Share

Share birth announcements through email and Facebook with Kd-Capsule for iPhone

If you have an iPhone or iPod touch you carry it with you wherever you go, right?

Yes, you know who you are, proud daddy who takes your cell phone into the delivery room. That is exactly what my hubby did, no camera, no video camera, just his handy dandy iPhone and the first thing he did when she was born was snap a pic of our bundle of joy.

Now with Kid-Capsule 1.1 you can share that very first memory with our brand new Birth Announcement Layout. Just a couple of taps and your family and friends will have a beautiful keepsake of your new addition to enjoy for years to come.

Sharing Events with Kid-Capsule App is Easy

June 15, 2011
Share

Share family events through email and Facebook with Kid-Capsule for iPhone

Every parent is proud of their child’s accomplishments and what better way to show it off than by telling friends and family.

Kid-Capsule not only makes it easy to share your child’s eventful moments with email and Facebook, it also creates a great layout for everyone to notice.

Everything is done for you, you only need a couple of taps to send it to everyone on your email list or post it to your Facebook Wall. You can also print your layouts afterwards to send via regular mail or have it as a keepsake in your scrapbook.

Check out our help page for details on event sharing in Kid-Capsule.