Facebook Apps Development Guide

Facebook App

An interactive software application developed to utilize the core technologies of the Facebook platform to create an extensive social media framework for the app.  Facebook Apps integrate Facebook’s News Feed, Notifications, various social channels and other features to generate awareness and interest in the app by Facebook users.

While it hasn’t been possible to exchange real currency directly within Facebook Apps and Facebook Games, apps can utilize Facebook’s Facebook Credits, a virtual currency that can be purchased (with actual money) in order to acquire virtual goods and services within Facebook apps and games.


Difference between Facebook page & Facebook application

Facebook is one of the world’s top most social networking website. In current trend we always heard about posting on other’s wall, sharing photos, videos, link, liking page and accessing lots of application from Facebook app directory. Like a page or application is common these days, but did you ever know what the difference between Facebook page and Facebook application is? Let’s differentiate that, also find how to create a Facebook page and Facebook application step by step.

Facebook Page

Facebook page is a webpage which is generally used for advertisement purpose. This page may be your local business, company, a product, entertainment or community page. This page is static page of Facebook means it does not contain any external domain page link unless an application it attached to it. In this page you can’t add your own logic. A screenshot of the page is shown below.

To create Facebook page, login in to your Facebook account, go tohttp://www.facebook.com/pages/manage/.

Click on “create page” button on the top right corner of the page. Click on the company tab. Choose your category and fill your company name, check mark on terms & conditions and click on getting started. Wow, you created a Facebook public page. See image below.

The link in the address bar is the link of your page. You can copy this link and share on your blog or website so other can view your Facebook page. You can use this page same as your profile page. To upload photos, videos and wall post on your page open “Account” on right top corner of the page and click on “Use facebook as page”.  When you click on this link a list of pages is open. Select your page and click on “Switch” button. Now you are able to post on page’s wall.  When your friends like your page and click on like button, your likes will be increased. You can see it on the left hand side of the page. This is most important for your page’s popularity. When you create a page, you get ugly Facebook page link like “http://www.facebook.com/pages/YourPageName/465646456775”. If your page gets more than 25 likes you will be entitle for a username. The username is a descriptive name for your URL (e.g. http://www.facebook.com/Username). To get username, click on “edit page” on the right top corner of the page (see above image) and select “Basic Information” from the left side bar. On the right hand side you can find username section. See image below.

Facebook Application

Facebook application is an application that integrated with Facebook platform. Applications have their own logics. Application can be built on different languages like asp.net or php. When you access the application it loads from the different server or domain. Facebook have its own application directory. There you can access different types of applications. This application may fetch your personal data from your Facebook account if you allow them to access your data. The application can also have their page. From the layout, Facebook application has a button on page called “Go to app”. See the difference below.

The above images represent the Facebook page Facebook application page. When you click on the “Go to app” button at the top of the application page it will redirect you to application which will be showed in page within iFrame.

  To create Facebook application, go to http://www.facebook.com/developers/.  Click on “set up new app” on right top corner of the page. 

     Enter your application name in given field, click Agree and click on “Create App”. After you will be redirected to the application edit page. Here you can set logo, icon, descriptions and other information about your application. See image below. 

      There are two main section of this application. First is core setting and other is Canvas. In the first section you can find “Application ID” and “Application Secret”. The application id is the main id and application secret is the unique code for your application which will need for further communication with Facebook. Now fill the section canvas.  The first textbox is for canvas page. Give a relative name as per your application. Note that this must be lower case. This will be your application path for Facebook (e.g. http://apps.facebook.com/ownfacebookapp/).
Next is the canvas URL. If you have application that already created on your domain give that path here (
e.g. www.yourdomain.com/yourpage.aspx/).  Don’t forget to add slash (/) at the end of the link. Click on “Save Changes” located at bottom. It will redirect you to below page.

   There you can find link like “Application profile page”. This is the page of our Facebook application page. The link is the address bar is the link of your application page. Below is the simple asp.net application form in Facebook which hosted on other domain. 


Why do you need a Facebook App?

Why do you need a Facebook App? Why not just let your Facebook page do all the work for you? You can run contests in your Facebook page too can you not?

The Old Way

Before when you wanted to run a contest, you have the freedom to easily administer it in your Facebook page – let’s take a photo contest for example.

Usually, you just need to announce in your Facebook wall that you’re going to run a contest and post the mechanics in your Facebook page Notes section for all to read. Then as you start the contest, you make it a Voting contest – the photo with the most Facebook ‘Likes’ win.

The good thing: you can get ‘n’ number of likes using this method.

Easy, simple, and most of all it’s free because you don’t need to hire a developer nor a designer. But that’s not the case now.

Having your own Facebook app is almost a necessity right now if you want to run Facebook contests and accumulate more page ‘Likes’. The reason behind it is that you cannot run contests in Facebook anymore without a Facebook app as seen in the Facebook Promotions Guidelines below (taken from Facebook Promotions Guidelines):

Promotions Guidelines

Date of Last Revision: May 11, 2011

These Promotion Guidelines, along with the Statement of Rights and Responsibilities, the Ad Guidelines, the Platform Policies and all other applicable Facebook policies, govern your –communication.


Apps on Facebook.com

Source : https://developers.facebook.com/docs/guides/canvas/

This guide describes creating a web app directly within the core Facebook experience. See the Facebook for Websitesguide if you instead want to add Facebook capabilities to an external website.

Building an app on Facebook gives you the opportunity to deeply integrate into the core Facebook experience. Your app can integrate with many aspects of Facebook.com, including the News Feed and Notifications. All of the core Facebook Platform technologies, such as Social Plugins, the Graph API and Platform Dialogs are available to Apps on Facebook.

In this document we will explain the following concepts:

Social Channels: The key channels that help you grow your user base and re-engage existing users.

Analytics: Accessing analytics for your application.

If you wish to start building an App on Facebook now, please refer to our getting started tutorial. If you want to build an app to add to the tab of a Facebook Page then you should refer to Page Tabs.

Canvas Page

Apps on Facebook are web apps that are loaded in the context of Facebook in what we refer to as a Canvas Page. You can build your app using any language or tool chain that supports web programming, such as PHP, Python, Java or C#.

Canvas for your app

Apps on Facebook are loaded into a Canvas Page. A Canvas Page is quite literally a blank canvas within Facebook on which to run your app. You populate the Canvas Page by providing a Canvas URL that contains the HTML, JavaScript and CSS that make up your app. When a user requests the Canvas Page, we load the Canvas URL within an iframe on that page. This results in your app being displayed within the standard Facebook chrome.

The canvas chrome is 760px width by default but you can set it to be a Fluid Canvas so that it is left aligned and takes up the full width and height of the user browser.

If you want to get started with building an App on Facebook right away, please read the getting started tutorial.

Bookmarks for quick re-engagement

Once a user starts using your app, we create a bookmark to enable users to easily navigate back to your app from within Facebook. These Bookmarks are available on the Facebook homepage as well as on the Canvas Page on the top right corner.

These Bookmarks are ordered based on how often and recently the user used your app. The red counters on the bookmarks notify users of outstanding Requests 2.0 related requests for your apps and encourage them to respond.

Social Channels

To drive more traffic to apps on Facebook, we enable various channels that enable new users to discover your app as well as existing users to re-engage with your app. Each channel is designed to help engage users and our algorithms help surface the best content for each user. The current channels include:


Bookmarks enable users to easily navigate back to your app from within Facebook. Bookmarks are automatically added for your app after the user engages with your apps. The bookmark will appear on left column of the homepage as well as on the top right of a Canvas Page. Users can add a bookmark to ‘favorite’ which pins them to the top. Bookmarks also show a counter next to them which represents the number of outstanding requests for the user for your app. The more link next to the app bookmarks takes the user to the app dashboard which shows the outstanding app requests as well as the full list of apps the user has authenticated.



  • Notifications on Facebook are meant to provide prominent but lightweight heads-up about interesting changes to content relevant to users. You can send notifications via the Notifications API or via requests.

  • The Notifications API allows you to send free-form text messages to any user of your application. It’s the most effective way to reengage active users, informing them of important events, invites from friends, or actions they need to take the game. Learn more about this API in the reference guide.

  • Requests enable users to invite their friends to your application. Although requests can be sent to any user on Facebook, their appearance in the notifications pane and elsewhere on Facebook is more restricted, so it is best to use requests primarily to invite new users.

There are two types of requests that can be sent from an app:

User-generated requests: These requests are confirmed by a user’s explicit action on a request dialog. These requests update the bookmark count for the recipient.

App-generated requests: These requests can be initiated and sent only to users who have authorized your app. You should use these requests to update the bookmark count to encourage a user to re-engage in the app (e.g., your friend finished her move in a game and it’s now your turn).

You can learn more about how to enable users to send request from your app in our getting started tutorial

Newsfeed stories

The News Feed is shown immediately to users upon logging into Facebook, making it core to the Facebook experience.

Discovery stories

Facebook shares stories with friends when a user starts using a new app or first installs a new game. These installation discovery stories show up in friends’ News Feed and enables users to discovery popular apps their friends are using.

In addition, Facebook also generates aggregated ‘playing’ stories by default. These stories show up in friends’ News feed. Gamers and non-gamers alike will see stories that list games their friends are playing the most. These stories are designed to bring new users and significant re-engagement to games by encouraging users to discover games their friends are playing.

Developers of app associated with more personal behavior such as dating, weight management or pregnancy, can turn these stories off by disabling the social discovery field in the App Dashboard in the ‘On Facebook’ tab under the ‘Canvas’ section.

Publishing stories

In addition you can publish content to the stream using the Feed Dialog. You can prompt users to publish stories about what they are doing in your app. If a user chooses to publish, the story will appear on the user’s profile and may appear to the user’s friends’ News Feeds. Stories published from your app will include a link to your app, and can optionally include a rich attachment. You can learn more about how to enable users to publish stories from your app in our getting started tutorial.

User control

On the Application Settings Page users can control the maximum audience each app can share with on their behalf. So if users want people to see that they are playing one game, but not another, they can control that.


The user’s Timeline deeply integrates a user’s top game activity over a given period of time. This Games Timeline unit highlights the games users play the most, as well as top scores and achievements, allowing for quick re-engagement for the user and discovery among friends.

Developers of apps categorized as ‘Games’ can publish stories by using the Open Graph built-ins for achievements andscores. These stories are only shown to users, when using an app categorized as ‘Games’.

The achievements API allows you to publish stories about the user and their friends achieving a set of achievements you define for your app. The scores API allows you to publish stories about the user and their friends passing each others’ scores in your app as well as High Score stories when the user earns a new high score. The user needs to grant your app with the publish_actions permission before you can publish a user’s scores and achievements.

In addition the Timeline also showcases recent game activity for the user.


When your App reaches 10 monthly active users it will be automatically queued to be included in the search index the next time we rebuild our search index (we rebuild every 2-4 weeks). After the index is rebuilt your app will be discoverable via Search.


Additionally, you can create a Facebook Page for your App from the App Dashboard. Simply visit the Contact Info section in the App Details tab of the App Dashboard, and click on the “Create Facebook Page” button to create a new Facebook Page.

Hitting Confirm on the next dialog associates the new Facebook Page with your app.

The Page differs slightly from regular Pages; it will have a “Go To App” or “Play Game” button, as well as the following App-related links:

Block App

Remove App

Contact Developer

Report App

By default, the Page is titled “[YOUR_APP_NAME] Community”. You can modify this name at any time subject to the samerules that govern all Pages.

Games & Apps Dashboard

Facebook has a Games and Apps Dashboard that allows users to see outstanding requests as well as recommended Apps and Games to enable them to discover new games as well as re-engage with existing games.

Users can also access all their apps and games feed in one place here.


Use Insights for your app to track how users are interacting with your app to build the best possible experience for your users. For app administrators, Insights includes feedback for stream stories, referral traffic to your app, a breakdown of what user actions contribute to active user count, demographics on authorized users and active users, and the number of times permissions are prompted and granted.

In addition, it provides diagnostics for your app so that you can track API errors as well as get access to allocations and throttling information.

You can access Insights for your app directly through the Insights Dashboard or by selecting your app in the App Dashboard and clicking the “insights” link.


Canvas Tutorial

Source: https://developers.facebook.com/docs/appsonfacebook/tutorial/

This document walks you through the key steps to getting your app up and running within the Facebook chrome.

  1. Creating your App

  2. Configuring your App Settings

  3. Configuring for App Center

  4. Authorization

  5. Social Channels : Feed, Requests

  6. Samples and Next Steps

Creating your App

Start by visiting the Developer App. If you haven’t created an application before you will be prompted to add the Developer Application.

After that you’ll be able to create a new app.

Please note you must have verified your Facebook account to create apps on Facebook. Click here for more information on verifying your account.

Configuring your App

Apps on Facebook are loaded into the Canvas section of the Canvas Page. The Canvas is quite literally a blank canvas within Facebook on which to run your app. You populate the Canvas by providing a Canvas URL that contains the HTML, JavaScript and CSS that make up your app. When a user requests the Canvas Page, we load the Canvas URL within aniframe on that page. This results in your app being displayed within the standard Facebook chrome.

For example, suppose that you have a web app available at http://www.example.com/canvas. This is your Canvas URL. When you setup your app on Facebook, you must specify a Canvas Page name that is appended tohttps://apps.facebook.com/. You can specify this by entering a value in the App Namespace field. In this example, we will use your_app as the Canvas Page name. When the user navigates to https://apps.facebook.com/your_app in their browser, they will see the contents of http://www.example.com/canvas loaded inside of Facebook.com.

Note that http://www.example.com/canvas cannot forward to another URL via HTTP redirect responses, e.g. response code 301, but has to return the response directly.

Once you’ve created a Facebook app, select the “App on Facebook” section and specify a Canvas and Secure Canvas URL:

Because your app is loaded in the context of Facebook, you must be aware of certain size constraints when designing your user interface. You can manage settings for the size of your iframe in the Dev App, App on Facebook settings.

Canvas Width

You can set your Canvas Width to “Fixed (760px)”, the default setting, which makes your app have a fixed width of 760 pixels. You can also set your width to “Fluid” which means that we set the iframe width to 100%. Your content will then be left-aligned and resize to fill the page as the user changes the width of their browser.

Canvas Height

You can set the Canvas Height to Fluid, the default setting, in which case the iframe height is set to 100% which means that it grows the fill the page and shows scroll-bars if your content exceeds the height of the page.

You can also set the Height to ‘Settable’ in which case the height of the Canvas defaults to 800 pixels. You can change the height of the iframe by calling the FB.Canvas.setSize() method to fit your content. You can also callFB.Canvas.setAutoGrow() to enable the ‘Auto-grow’ functionality where we will poll for the height of your content and grow the height of the parent iframe to match accordingly. Note these method only work with Canvas Height set to Settable.

Here is a How-To to implement Fluid Canvas for your app.

Configuring for App Center

Once you have configured your app for Canvas, the next step is to configure the App Center settings. App Center is the central location for users to discover and try out new apps and a primary source of installs. Configuring these settings will allow you to customize your App Detail page to display your app description, icons, screenshots and other relevant promotional materials in the Facebook App Center. For more information on this step, see the App Center docs.


In order to create a personalized user experience, Facebook sends your app information about the user. This information is passed to your Canvas URL using HTTP POST within a single signed_request parameter which contains a base64urlencoded JSON object.

Social Channels

Facebook Platform provides a number of different ways for users to share with their friends from your app. We call theseSocial Channels. Your app can publish directly to a user’s News Feed, send Requests to their friends and leverage our automatic channels.


The News Feed is shown immediately to users upon logging into Facebook, making it core to the Facebook experience. Your app can post to the user’s news feed by using the Feed Dialog. The following example shows how to display this dialog within your canvas page:


Requests are a great way to enable users to invite their friends to your app or to take specific action like accepting a gift or help complete a task. Your app can send requests by using the Request Dialog. The following example shows how to display this dialog within your canvas page:


Core Concepts

Source : https://developers.facebook.com/docs/coreconcepts/

Social Design

The Social Design Guidelines helps you understand why you should build great social experiences as well as how to use Facebook Platform effectively to create them. Social design is a product strategy that builds upon users’ trusted communities, encourages conversation between them and ultimately creates a stronger sense of identity for everyone.

Social Plugins

Social Plugins are the easiest way to get started with Facebook Platform. Social Plugins enable you to provide engaging social experiences to your users with a few lines of HTML. Because the plugins are served by Facebook, the content is personalized to the viewer whether or not they have authenticated your app.


Facebook Login enables your app to interact with the Graph API on behalf of Facebook users and provides a powerful login mechanism across iOS and Android native apps, apps on facebook.com as well as desktop and mobile web apps.

Open Graph

Open Graph lets you map out the content in your app and the actions a user can perform on that content – by defining Actions and Objects. You can then publish a user’s activity to their timeline – helping them map out their online identity using your app.


Dialogs provide a simple, consistent interface to display Facebook Platform dialogs to users. Dialogs do not require special user permissions because they require user interaction. Dialogs can be used in native iOS and Android apps, apps on facebook.com along with desktop and mobile web apps.

Promote Your App

Promote your app with ads and sponsored stories to reach the relevant people at scale. Facebook has many products that make sure people are seeing your message and becoming fans, users, or customers. Learn how to run, measure, and optimize your ads through Facebook.

App Center

For the over one billion people that use Facebook, the App Center is the central place to find great social apps. Everything has an app detail page, which helps people see what makes an app unique and lets them install it before going to an app.


Graph API

Source : https://developers.facebook.com/docs/reference/api/

Getting Started

If you’re new to the Graph API you should start with the Graph API Getting Started Guide.

The Graph API is the primary way that data is retrieved or posted to Facebook. The Getting Started Guide contains an overview of the basics of the API, walks you through using the Graph API Explorer, shows you how names work, how permissions work, what connections are and puts it all together so the rest of this reference make sense.

Reading Data


Pictures are available on many objects and are the most commonly used object in the graph. This document covers how to access them. Pictures are not Photographs. For Photographs that people upload please see our Photo and Albumreference API documents.

Selecting Results

When accessing objects in the graph, you can control which fields are returned.


Many of the Graph APIs let you get data in small sets, with a way to page forward and backwards in time. This document covers how to use the pagination arguments and results.


You can search through public objects with the Graph API. This document covers the basics on the objects you can search and how to page through results.


Many APIs return dates. This document covers the default format we use at Facebook and how you can change it.

Data Access – Login, Privacy and Permissions

Much of the data you’ll be accessing via the Graph API requires the user to allow you to access it. This includes reading anything beyond public data or writing data to a user’s timeline. This document gives you pointers to what you need to do about the topics of privacy, permissions, login and auth tokens.


ADOdb Database Abstraction Library for PHP

Source : http://adodb.sourceforge.net/

ADOdb is a database abstraction library for PHP.


What is Smarty?

Source : http://www.smarty.net/docs/en/what.is.smarty.tpl

Smarty is a template engine for PHP. More specifically, it facilitates a manageable way to separate application logic and content from its presentation. This is best described in a situation where the application programmer and the template designer play different roles, or in most cases are not the same person.

For example, let’s say you are creating a web page that is displaying a newspaper article.

The article $headline, $tagline, $author and $body are content elements, they contain no information about how they will be presented. They are passed into Smarty by the application.

Then the template designer edits the templates and uses a combination of HTML tags and template tags to format the presentation of these variables with elements such as tables, div’s, background colors, font sizes, style sheets, svg etc.

One day the programmer needs to change the way the article content is retrieved, ie a change in application logic. This change does not affect the template designer, the content will still arrive in the template exactly the same.

Likewise, if the template designer wants to completely redesign the templates, this would require no change to the application logic.

Therefore, the programmer can make changes to the application logic without the need to restructure templates, and the template designer can make changes to templates without breaking application logic.

One design goal of Smarty is the separation of business logic and presentation logic.

This means templates can certainly contain logic under the condition that it is for presentation only. Things such as including other templates, alternating table row colors, upper-casing a variable, looping over an array of data and displaying it are examples of presentation logic.

This does not mean however that Smarty forces a separation of business and presentation logic. Smarty has no knowledge of which is which, so placing business logic in the template is your own doing.

Also, if you desire no logic in your templates you certainly can do so by boiling the content down to text and variables only.

Some of Smarty’s features:

  • It is extremely fast.

  • It is efficient since the PHP parser does the dirty work.

  • No template parsing overhead, only compiles once.

  • It is smart about recompiling only the template files that have changed.

  • You can easily create your own custom functions and variable modifiers, so the template language is extremely extensible.

  • Configurable template {delimiter} tag syntax, so you can use {$foo},{{$foo}}<!–{$foo}–>, etc.

  • The {if}..{elseif}..{else}..{/if} constructs are passed to the PHP parser, so the {if…} expression syntax can be as simple or as complex an evaluation as you like.

  • Allows unlimited nesting of sectionsif’s etc.

  • Built-in caching support

  • Arbitrary template sources

  • Template Inheritance for easy management of template content.

  • Plugin architecture

Posted in Facebook Apps Development

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Follow me on Twitter

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 443 other followers

%d bloggers like this: