Creare applicazioni facebook con Javascript Method FB.

Ieri ci siamo concentrati nello sviluppare applicazioni utilizzando una tecnologia lato Server nello specifico abbiamo utilizzato PHP e quindi le librerie che facebook mette a disposizione e quindi le SDK. Ovviamente  sappiamo benissimo che non si tratta di una guida esaustiva e si potrebbe andare oltre, ma preferiamo concentrarci invece  nella tecnologia lato client per costruire applicazioni facebook ossia Javascript. Ricordando come nel precedente caso che i cambiamenti che facebook sta apportando alle sue applicazioni sono sempre molti e abbastanza radicali. Questo vuol dire che quando andate a mettere in pratica quanto vi stiamo insegnando in queste guide potrebbe non essere piu’ attuali all’atto pratico e di conseguenza non funzionare. Questo è un po’ il problema che noi programmatori ci troviamo ad affrontare sovente.

 

 Cominciamo con il seguente codice  Javascript per applicazioni Facebook

Questo codice andrà inserito dopo l'apertura del tag body o in un qualunque luogo della vostra pagina html. Ma analizziamolo meglio

<div id="fb-root"></div>
<script>
 window.fbAsyncInit = function() {
 // init the FB JS SDK
 FB.init({
 appId : 'YOUR_APP_ID', // App ID from the app dashboard
 channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
 status : true, // Check Facebook Login status
 xfbml : true // Look for social plugins on the page
 });

// Additional initialization code such as adding Event Listeners goes here
 };

// Load the SDK asynchronously
 (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/en_US/all.js";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
</script>

Come potete vedere si nota la presenza di alcuni tag FB. In realtà si tratta di oggetti istanziati che vengono richiamati , in realtà questo non sarebbe nemmeno l’unico metodo per iniziare a programmare facebook javascript , infatti come potete vedere dalle scritte commentate si tratta di un metodo asincrono ossia dietro questo codice possiamo vedere tipici elementi di Ajax.  In particolare sempre con riferimento  a quanto trovate scritto in questo codice qui sopra  l’SDK è caricato in modo asincrono in modo da non bloccare il caricamento di altri elementi della pagina. La funzione assegnata è window.fbAsyncInit e viene eseguita non appena il Source SDK ha terminato il caricamento. Qualsiasi codice  caricato successivamente  l‘SDK è caricato all’interno di questa funzione  dopo la chiamata a FB.init. Per esempio, questo è dove si sarebbe testare lo stato di connessione  di un utente  non dovrete fare altro che aggiungere questo codice

FB.getLoginStatus(function(response) {
 if (response.status === 'connected') {
 // the user is logged in and has authenticated your
 // app, and response.authResponse supplies
 // the user's ID, a valid access token, a signed
 // request, and the time the access token 
 // and signed request each expire
 var uid = response.authResponse.userID;
 var accessToken = response.authResponse.accessToken;
 } else if (response.status === 'not_authorized') {
 // the user is logged in to Facebook, 
 // but has not authenticated your app
 } else {
 // the user isn't logged in to Facebook.
 }
 });

come risposta otterrete

 

{
 status: 'connected',
 authResponse: {
 accessToken: '...',
 expiresIn:'...',
 signedRequest:'...',
 userID:'...'
 }
}

oppure se un utente è iscritto a qualche evento dovremmo utilizzare il seguente script

FB.Event.subscribe('edge.create',
 function(response) {
 alert('You liked the URL: ' + response);
 }
 );

ci soffermiamo un attimo sulla riga sopra del primo codice

js.src = “//connect.facebook.net/en_US/all.js”;

ovviamente sarebbe preferibile connettersi a quella in italiano in modo da avere eventuali messaggi di errore nella nostra lingua per fare questo cambiate quella scritta con questa

connect.facebook.net/it_IT/all.js

che è la traduzione in italiano fatta da facebook, ovviamente nel caso la vostra applicazione sia rivolta ad un pubblico italiano

Il tab Javascript fb-root

Nella prima riga del codice di apertura abbiamo scritto

 

<div id="fb-root"></div>

Questo elemento è basilare e deve essere sempre presente quando scrivete un’applicazione Javascript, ossia deve sempre essere presente. L’elemento fb.root non deve essere nascosto utilizzando display: none o visibility: hiddenAltrimenti alcuni browser fra cui Internet explorer potrebbe non funzionare in modo corretto. Un modo per incrementare le prestazioni della vostra applicazione è sicuramente attraverso il channel file

<script src="//connect.facebook.net/en_US/all.js"></script>

Il channel file deve essere settato per essere cached il prima possibile mandando un Expires headers valido. Per assicurare che la pagina non venga costantemente ricaricata ma ricaricando solamente la pagina cache. Tutto questo lo si puo’ ottenere con questa semplice pagina php

<?php
 $cache_expire = 60*60*24*365;
 header("Pragma: public");
 header("Cache-Control: max-age=".$cache_expire);
 header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
 ?>
 <script src="//connect.facebook.net/en_US/all.js"></script>

 

Finestre di dialogo con  Javascript nelle applicazioni facebook

 

per visualizzare un dialogo Javascript per facebook utilizza il metodo FB.ui() JS SDK’S .

Per esempio se volessimo invocare il metodo Feed Dialog per permettere a un utente di postare un ling nella sua timeline dovremmo utilizzare il seguente codice

FB.ui(
 {
 method: 'feed',
 name: 'The Facebook SDK for Javascript',
 caption: 'Bringing Facebook to the desktop and mobile web',
 description: (
 'A small JavaScript library that allows you to harness ' +
 'the power of Facebook, bringing the user\'s identity, ' +
 'social graph and distribution power to your site.'
 ),
 link: 'https://developers.facebook.com/docs/reference/javascript/',
 picture: 'http://www.fbrell.com/public/f8.jpg'
 },
 function(response) {
 if (response && response.post_id) {
 alert('Post was published.');
 } else {
 alert('Post was not published.');
 }
 }
);

Per esempio per pubblicare un messaggio con Feed Dialog di Javascript  nella pagina di un vostro amico dovrete fare

 

<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:fb="https://www.facebook.com/2008/fbml">
 <head>
 <title>My Feed Dialog Page</title>
 </head>
 <body>
 <div id='fb-root'></div>
 <script src='http://connect.facebook.net/en_US/all.js'></script>
 <p><a onclick='postToFeed(); return false;'>Post to Feed</a></p>
 <p id='msg'></p>

<script> 
 FB.init({appId: "YOUR_APP_ID", status: true, cookie: true});

function postToFeed() {

// calling the API ...
 var obj = {
 method: 'feed',
 redirect_uri: 'YOUR URL HERE',
 link: 'https://developers.facebook.com/docs/reference/dialogs/',
 picture: 'http://fbrell.com/f8.jpg',
 name: 'Facebook Dialogs',
 caption: 'Reference Documentation',
 description: 'Using Dialogs to interact with people.'
 };

function callback(response) {
 document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
 }

FB.ui(obj, callback);
 }

</script>
 </body>
</html>

Provatelo e guardate che succede. Vi faccio notare una cosa con pubblish_stream delle librerie PHP SDK avevamo un funzionamento analogo. Ma il programmatore poteva con queste librerie , che ora sono deprecated, evitare di passare da un form sullo schermo e pubblicare automaticamente il messaggio che desiderava nella pagina che voleva. Adesso questo avviene tramite l’autorizzazione esplicita dell’utente da tastiera. Ossia hanno cercato di rendere il metodo meno invasivo possibile. Per il momento è tutto prima di andare avanti con la libreria Javascript ci occorre integrare le Graph API nel prossimo capitolo.