Pubblicato il 04/03/16e aggiornato il

Come creare una applicazione Facebook per un sito web.

Come creare una applicazione Facebook collegata a un sito web (Blogger, Wordpress, ecc) per una condivisione più completa dei contenuti (immagini, snippet, ecc) del sito stesso.
Con questo articolo riprendo un tema che ho trattato negli anni scorsi senza però averlo fatto in modo cronologicamente coerente. Nel senso che per avere una idea completa di questo argomento bisogna fare lo slalom tra post pubblicati in epoche diverse che fanno quindi riferimenti a una grafica che nel frattempo è cambiata così come sono mutati alcuni codici.

Mi riferisco al rapporto di simbiosi che deve esistere tra un sito web e un account Facebook sia come Profilo sia come Pagina. Il primo passo sarà quello di mostrare come creare una applicazione Facebook collegata al nostro sito in modo da creare le condizioni per una migliore implementazione dei vari social plugin. In realtà come vedremo non è strettamente necessario creare una tale applicazione ma se non lo facciamo i lettori per esempio dovranno cliccare prima sul Mi Piace poi su Conferma per condividere un nostro post. Se invece abbiamo creato una applicazione basterà un solo click.

Dopo esserci loggati su Facebook si accede alla Pagina delle Applicazioni. Se ancora non avete creato applicazioni dovete cliccare su Register Now per diventare uno sviluppatore

register-applicazione-facebook

Vi verrà mostrata una finestra popup in cui cliccare su Avanti dopo aver accettato le norme sulla Privacy. Nella seconda finestra dovrete inserire il numero di telefono

sviluppatore-facebook

Si va poi su Send as Text per ricevere il codice via SMS. Si digita il codice ricevuto nell'apposito campo e si clicca su Registrati. In questo modo Facebook ha la prova della identità dell'utente visto che tutte le schede telefoniche sono per legge collegate a un documento di identità.

Terminata la registrazione come sviluppatore visualizzerete il pulsante verde +Add a new App in alto a destra. Cliccandoci sopra inizierete a compilare i campi per la creazione della applicazione

creare-applicazione-facebook

Si può scegliere tra app per iOS, per Android per Facebook Canvas e per Sito Web. Si va su Sito Web per creare una applicazione collegata al nostro sito.

creare-id-applicazione-facebook

Si digita il nome della app quindi si va su Create New Facebook App ID.

scegliere-tipo-applicazione

Nella finestra successiva dovremo selezionare la categoria della nostra applicazione per poi andare ancora su Crea ID applicazione. L'ID della app è fondamentale per attivare tutte le funzionalità di Facebook come vedremo negli articoli successivi. Si aprirà una pagina come questa

creare-applicazione-facebook

Nella parte alta si visualizzerà il codice da implementare nella pagina web. Nel campo Tell us about your website si incolla l'indirizzo del blog con il .com e non con il .it se abbiamo un dominio del tipo Blogspot. Si va su Next. Con il javascript e con il codice SDK potremo anche testare l'implementazione di un social plugin. Il codice del precedente screenshot va incollatosubito dopo il tag <body>. Gli utenti di Blogger devono andare su Modello > Modifica HTML e cercare la riga

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

e incollare il codice SDK subito sotto. Il codice sarà simile a questo

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '1522133584756752',
      xfbml      : true,
      version    : 'v2.5'
    });
  };
  (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/it_IT/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

dove l'App ID in viola è specifico per il sito mentre it_IT sostituito a en_US serve per avere i plugin in lingua italiana. Si salva il template. Adesso si può testare l'applicazione

app-configuration-facebook

Gli utenti di Blogger possono copiare il codice sotto a Test your Facebook Integration che si visualizza andando su App Configuration e Test. Tale codice va incollato su Layout > Aggiungi un gadget > Base > HTML/Javascript > Sezioni del sito e si va poi su Salva.

plugin-test-facebook

Si visualizzerà sia il pulsante Mi Piace sia quello Condividi. Si può cliccarci sopra per testare il loro funzionamento. Ovviamente si tratta solo di un test per verificare che l'applicazione funzioni e quindi poi può essere tolto e i social plugin installati con il codice che vedremo nei prossimi post. Superato questo test si va in alto su Finished per completare questa prima parte di configurazione. 
Nella pagina Facebook Apps saranno visualizzate tutte le App che abbiamo creato

app-facebook


Le app Facebook con il cerchietto verde pieno sono quelle online e disponibili per gli utenti. Quelle con il cerchietto verde vuoto invece non solo online. Il significato è che se si toglie il codice da un sito il cerchietto verde pieno diventa vuoto e viceversa. Si clicca su una data app dell'elenco per la  sua ulteriore configurazione

configurazione-applicazione-facebook

Nella colonna di sinistra si può navigare tra le impostazioni della App. Su Dashboard potremo visualizzare l'ID della App e la chiave segreta conosciuta solo dall'amministratore. Per visualizzarla si va su Show e si reinserisce la Password del Profilo. Nella scheda Settings

settings-app-facebook

si deve aggiungere il dominio del sito cioè l'indirizzo senza http://, il namespace cioè un username della applicazione o se si vuole una abbreviazione del nome senza spazi. Si inserisce un indirizzo email di contatto quindi si va su Save Change. L'indirizzo del sito sarà invece aggiunto automaticamente dopo averlo digitato in precedenza.

In App Review si possono richiedere delle integrazioni ulteriori tramite Start a Submission

permessi-app-facebook

In Aprovated Items si potranno visualizzare i permessi già ottenuti come quelli di default. Altra operazione fondamentale da fare in App Review è quella di rendere pubblica l'applicazione

app-facebook-pubblica

Dopo aver scelto Yes su Make (Your App) Public? si deve andare su Conferma nella finestra modale che comparirà con effetto Lightbox. 

È opportuno anche compilare alcuni campi di App Details

applicazione-dettagli-facebook

tra cui l'indirizzo della pagina della Privacy che può essere la stessa della Cookie Law. Nel prossimo articolo vedremo come implementare insieme ai codici della applicazione anche i metatag di Facebook che servono per una condivisione più ricca dei contenuti.

Se avete implementato il codice di una app Facebook da diverso tempo e se lo volete aggiornare dovete cliccare sulla app in oggetto nella pagina Facebook App quindi scegliere Dashboard dalla colonna di sinistra e andare su Choose a Platform. Si aprirà una finestra che abbiamo già visto con le opzioni iOS, Android, Facebook Canvas e Sito Web. Dovrete cliccare su quest'ultima icona quindi copiare il codice SDK e modificarlo come illustrato precedentemente. Per evitare che Blogger modifichi lo script si possono aggiungere due righe rispettivamente subito dopo <script> e subito prima di </script> come illustrato nel post che parla di javascript e Blogger.




3 commenti :

  1. Tra gli avvisi della mia app mi è spuntato questo:

    "My Tumblr has been making recent API calls to Graph API v2.0, which will reach the end of the 2-year deprecation window on Monday, August 8, 2016. Please migrate all calls to v2.1 or higher in order to avoid potential broken experiences.

    We recommend using our new Graph API Upgrade Tool to see which of your calls are affected by this change as well as any replacement calls in newer versions. You can also use our changelog to see the full list of changes."

    Devo fare qualche cambiamento?

    RispondiElimina
    Risposte
    1. Non sono un grande conoscitore di Tumblr :(
      @#

      Elimina
    2. Hahaha no quello è solo il nome dell'applicazione di facebook che ho dato!

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.