Welche API?

Als Facebook-App-Neuling findet man im Developer-Bereich von Facebook umfangreiches Material zu den diversen Facebook APIs und SDKs: GRAPH API, iOS SDK, Android SDK, JavaScript SDK, PHP SDK, Unity SDK. Meine App muß nicht auf dem Unity Web Player oder auf einem Smart-Phone laufen, mit PHP hab’ ich auch nichts am Hut, also benötige ich nur Graph API und JavaScript SDK. Meine App soll in Facebook eingebettet sein. Facebook nennt derartige Apps Canvas Apps.

Was brauche ich von den APIs?

Um die APIs auszuprobieren, bietet Facebook unter „Tools & Support“ ein paar praktische Online-Tools. Ich brauche auf jeden Fall das Login, die E-Mail-Adresse des Anwenders. Außerdem soll der Anwender die Möglichkeit haben mitzuteilen, daß er die App benutzt hat und andere Nutzer dazu einladen. Die App soll möglichst wenig Berechtigungen einfordern.

Welche Technologie?

Für die App kommt jedes beliebige Web-Framework in jeder Programmiersprache in Frage. Ich möchte eine JSF2 Standard Anwendung schreiben und wähle, damit’s schneller geht, als Komponenten-Framework PrimeFaces.

Welcher Hoster?

Hier entscheide ich mich ganz schnell für OPENSHIFT cloud von Red Hat, weil das Setup so reibungslos nach Anleitung funktioniert hat. Für ein kleines Projekt kann OPENSHIFT ähnlich wie die App Engine kostenlos genutzt werden.

Los gehts!

Den Facebook-unabhängigen Teil der App kann man schnell runterprogrammieren. Dann muß man sich bei Facebook einloggen und im Developer-Bereich eine App hinzufügen. Jede App bekommt eine eindeutige App ID. Für die lokale Entwicklung kann man die Secure Canvas URL auf localhost setzen. Ich empfehle, gleich mit https zu testen, also z.B. https://localhost:8443/myFirstFacebookApp/ zu setzen. Jede App hat eine eindeutige App-ID. Um das Login einzubauen, gibt’s verschiedenste Möglichkeiten. Ich möchte keinen Login-Button auf meiner Seite selbst haben, also checke ich einfach den Login-State. Wenn der User nicht eingeloggt ist, wird er via API weitergeleitet:

<script>

// calls the Facebook login and requires email permission
function login(callback) {
 FB.login(callback, {scope: 'email'});
}

// callback function after login
function loginCallback(response) {
  if(response.status != 'connected') {
    top.location.href = '#{applicationBackingBean.errorUrl}';
  }
}

// checks login status after auth state change (see subscriber below), 
// if user is not authenticated, login is called again
function onStatusChange(response) {
 if( response.status != 'connected' ) {
    login(loginCallback);
  } 
}

// Loads and initializes the SDK and 
FB.init({
  appId: #{applicationBackingBean.appId},
  frictionlessRequests: true,
  status: true,
  version: 'v2.1'
});

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&appId=#{applicationBackingBean.appId}&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

// defines a callback java script function called, when auth status is changing
FB.Event.subscribe('auth.statusChange', onStatusChange);

// check the login status and call login, if user is not authenticated
FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
  } else {
     login(loginCallback);
  }
 });
</script>

Wenn der Nutzer die App beendet hat, soll er andere Nutzer einladen können, oder posten, daß er die App genutzt hat. Wenn die App selbst in die Chronik schreibt oder die Freundesliste für die Einladungen nutzen will, müßte sie weitere Berechtigungen eingeholt haben. Darauf verzichte ich und gebe dem Nutzer volle Kontrolle über Posting und Einladungen, indem ich zwei weitere Methoden per JavaScript SDK aufrufe.

<script>
// opens a dialog that allows the user to tell about his app and with a link to a open graph story object, where 
// developer-check:find_out_to_be is my custom open graph story action type, 
// the custom open graph stories are defined 
// on Facebook in the App area
function shareStory(paramName, paramValue) {
  var params = {};
  params[paramName] = paramValue;
  FB.ui({
   method: 'share_open_graph',
   action_type: 'developer-check:find_out_to_be',
   action_properties: JSON.stringify(params)
  }, function(response){});
}

// opens a dialog to invite friends to use the app
function inviteToApp() {
 FB.ui({method: 'apprequests',
   message: "#{msg['questionary.developer.socialplugin.invite.facebook']}"
 }, function(response){
     console.log(response);
 });
}
</script>

Mehr Facebook-Funktionalität brauchen wir nicht. Die App heißt Software-Developer-Check und teilt die teilnehmenden Software-Entwickler anhand eines kleinen Fragebogens in fünf Typen ein: https://apps.facebook.com/developer-check/

Markiert in:            

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *