8

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.

Kārlis Janisels
  • 1,265
  • 3
  • 18
  • 41
  • Canvas and Page Tab apps have their external content shown inside an iframe directly on facebook.com. They are simply part of the different _platforms_ your app can run on. (What you googled is the wrong kind of canvas. Facebook introduced this new feature recently, and unfortunately named it the same as the already existing canvas app platform, which is a bit confusing.) – CBroe Nov 23 '16 at 08:37
  • I am sorry to bring up old question but I am still confused. I want to implement notification from my membership site to users facebook account when certain event happens. When trying to POST notification I got exception `Only web canvas apps can send app notifications`. By reading documentation canvas app seems to corespond to games. Does that mean I can not send notification from membership site? – Kārlis Janisels Jan 09 '17 at 21:43
  • No, canvas apps do not have to be in the Games category. – CBroe Jan 10 '17 at 09:37

1 Answers1

8

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.

Robbie
  • 17,605
  • 4
  • 35
  • 72
  • This gave me new look on fb docs, thanks. Question thou: I can create multiple PHP scripts that would be href param in my POST to fb/notification each for different notification type. These scripts should use either FB JS login or PHP SDK canvas login helper to abtain access token and make sure that this is the user that was suposed to read notification. For example, if notifications is "new message" then I show this message and allow to send message back without even bothering to go to my website. Hope that I am not wrong! However... – Kārlis Janisels Jan 18 '17 at 06:46
  • .. I am obligated to provide Secure Canvas URL. What exactly is Secure Canvas URL. It is like home page for my canvas app? Is that simply URL to my home page or should I create different script for that? Do I need to provide entire website content in my canvas app? @CBroe at another question said "Again, using canvas merely to redirect them outside of Facebook is not allowed". So there should be full functionality in canvas app as well as in my website? – Kārlis Janisels Jan 18 '17 at 06:52
  • As Facebook runs over https, all the iFrames must also be delivered using https, otherwise browsers give out security warnings. While they let you run http for testing, you can't publish without https - but it should be the same as you rest/write using http. No, you don't need to provide everything in canvas. You can (and it's quite common) to provide part in canvas and part on a website or on a mobile app (although, based on personal experience, use of canvas and page tabs is getting less and less). But, as you noted, you must provide some meaningful functionality and not just redirect away. – Robbie Jan 18 '17 at 10:11
  • Example, play a game on mobile, but go to Facebook tab to see extended stats about your play, run side competitions etc that add to the mobile experience. Both use the same app, same database and same logins, but it splits functionally to where it's most appropriate. – Robbie Jan 18 '17 at 10:13