What is Facebook app canvas and page tab?

Question

I have spent a lot of time reading FB dev docs and tutorials but I am still very confused with what canvas app and page tab are and how to use them.

What I am expecting from using FB SDK in my site is to have "continue with facebook" button on login screen , have a couple of share and like buttons and send notifications to facebook if user have allowed that. My site has internal messaging system and I want to notify users that new message or activity has happened in my site. In this way users would not have to check my site every day for activity which is important user experience as I expect rare activity(approx. few activities per week).

I have everything running but after user clicks on notification he is taken to canvas app. FB docs and tutorials focuses on code examples but I have not found anywhere description on what canvas app really is. Without this fundamental understanding I can not complete my notification logic, can not understand the terms involved like "secure canvas url" and basically does not feel confident about user experience(which I would want to make as great as possible).

If I google "what is facebook canvas app" I get "Canvas is an immersive and expressive experience on Facebook for businesses to tell their stories and showcase their products.". Apparently from comment below thats something else...

I would appreacite If someone could explain in plain word and maybe example what is canvas app and how should I use if taking into account that my main goal is to notify users about acitivity in my site to their fb account.

I am using CI framework PHP SDK v5.

Answer 1

Background

In Facebook, you create "apps" that run on "platforms". As a quick, very simplified summary, the three primary types of "platforms" that apps can run are:

1. A website that you host and control, but integrated with the Facebook Graph API (has Facebook Login, posting etc), but otherwise looks like a normal website. You host these on your own servers.

2. A website designed to sit inside an iFrame on the Facebook Platform. These apps will also generally interact with Facebook Graph. You still host them on your own servers but you have the added advantage that but can get limited information about the user when the page loads.

3. Stand alone programs (including mobile applications) that also interact with the Facebook Graph.

What you are talking about is the second of these - the iFrame on Facebook.

Facebook provide two ways to embed the application iFrame:

1. one is a canvas app. This has minimal surrounds for Facebook Header, Footer and a few ads on the right. It maximises your space. (e.g. https://apps.facebook.com/candycrush/?fbs=-1&fb_appcenter=1)

2. the other is a "page tab" (https://developers.facebook.com/docs/pages/tabs). This is smaller and designed to sit in a company's "Facebook Page" so has less space. As a marketer, however, it keeps everything more branded to your company. (Example: https://www.facebook.com/NutellaANZ/app/595447743881506/)

Note that a single app can run across all the above - canvas, a page tab and a stand-alone HTML page. With some shifting of the API, you can also wrap the same code for mobile and put on the app stores. A user can log in on your mobile app and you can have them logged in on websites and vice-versa (within some limits, but you'll need to explore those).

---

Games Only?

You are right in that most of the Facebook docs relating to apps refer to games. Indeed a good place to start is https://developers.facebook.com/docs/games/gamesonfacebook which is where help leads you for Canvas Apps now.

But it doesn't have to be a game - so long as you're using the APIs anything will work. As you mention PHP, have a look at https://developers.facebook.com/docs/php/howto/example_access_token_from_canvas - no mention of a game, but is how you get information from the iFrame in PHP. (There's a lot more reading to do!).

---

Reading notifications

When clicking on the notification, Facebook will add parameters to the URL. Some of these are determined by the notification (see https://developers.facebook.com/docs/games/services/appnotifications) and others will help you get information about the user (https://developers.facebook.com/docs/reference/login/signed-request, https://developers.facebook.com/docs/php/SignedRequest/5.0.0).

So use this information server-side to work out who the user is and how you want to handle the user. But what experience you want to give the user once you're in the Facebook eco-system is up to you.