How do I implement customer personalization using Facebook OpenGraph?

Question

I'm currently integrating the OpenGraph into a restaurant business. The code/scripts provided seem to work fine in a staging environment, however I want to go one step further: when a person visits the site, and they're logged in to Facebook, I would like to display a specific message for them.

Let's say their name it Steven Smith, I would like to add a section at the top of the site which says "Welcome Steven, what would you like to do?", with three options provided with links to relevant pages.

Is this something that I will need to write a script for? Or is it something that I have missed with the tools available?

Answer 1

This is called 'instant personalization' and is only available to a select few Facebook partners.

Answer 2

First, you will need to setup an app, have the user authenticate to your app, and then when the user comes to the page and you call FB.getLoginStatus() to see if they're already connected to your app. If so, you know who they are and can display their name. See: https://developers.facebook.com/docs/reference/javascript/

FB.getLoginStatus(function(response) {      
    if (response.status=='connected') {
        FB.api('/me',function(response){
            alert('Welcome back ' + response.name);
        });
    }
});

Answer 3

As your spec says, this covers exactly what you want to achieve:

https://developers.facebook.com/docs/reference/javascript/FB.login/

You need fb app to auth, after auth, get the permission for reading only (minimal one which can't post or like),

then,

 FB.login(function(response) {
   if (response.authResponse) {
     DisplayFunc('Welcome!  Fetching your information.... ');
     FB.api('/me', function(response) {
       DisplayFunc('Good to see you, ' + response.name + '.');
     });
   } else {
     DisplayFunc('User cancelled login or did not fully authorize.');
   }
 });