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
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
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
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.
Si digita il nome della app quindi si va su Create New Facebook App ID.
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
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
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>
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
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.
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
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
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
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 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
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
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.
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.
Da non perdere: Metatag di Facebook per condividere correttamente i post
Non sono un grande conoscitore di Tumblr :(
RispondiElimina@#
Ieri mi è arrivata una mail in cui c'è scritto questo:
RispondiElimina"We have reviewed your app and it is still in violation of the Platform Policy 2.4.a
Platform Policy 2.4.a: Provide a publicly available and easily accessible privacy policy that explains what data you are collecting and how you will use that data.
Specifically, we are unable to find a valid privacy policy in your app ,In order to make it comply with our platform policies I kindly recommend you to add a proper privacy policy link in your app".
Ho creato una policy privacy con Iubenda specifica per l'app di Facebook e ho inserito il link nelle impostazioni, ma questa mattina mi è arrivato un nuovo avviso. Come risolvere? L'app in quesione mi serve solo per i pulsanti "Mi piace" e "Condividi".
Non ti saprei dire. Mi pare che anche a me arrivò nel passato una email del genere. Incollai il link della pagina della privacy del blog e tutto si risolse. Forse adesso sarà cambiato qualcosa. Boh!
Elimina@#
Alla fine ho risolto. Dopo aver fatto gli screenshot dell'app con il link della Privacy, quelli di Facebook mi hanno mandato uno screenshot del blog indicandomi dove inserire il link. L'ho fatto ed è tutto è tornato in regola. Immagino che ora arriveranno segnalazioni anche per le altre quattro app.
EliminaMADRE di dio mai visto niente di più unfriendly complicato ed invasivo.
RispondiEliminama che scherziamo davvero?
è anti privacy a bestia dargli il n. di telefono.
C'è UN LIMITE a TUTTO.
non dimenticatevelo.
L'epoca di FB è finita.
Non lo vogliamo il pulsante mi piace. Boicottiamo e stop.
e va avanti così da 5anni?
andiamo bene di nulla.