Installare il pulsante Invia o Send in un blog su Blogger insieme al Mi Piace.

Dopo aver presentato nel precedente post il nuovo pulsante Invia di Facebook, passo ad illustrare come fare per inserire questo plugin che permetterà ai visitatori del vostro blog, non solo di condividere un singolo post nel loro Profilo cliccando su Mi Piace, ma anche di inviarlo a uno o più amici con il bottone Send. Nel momento in cui scrivo questo articolo, il pulsante funziona solo se si sceglie la lingua inglese americana ovvero en_US ma ritengo che nei prossimi giorni se non nelle prossime ore sarà perfettamente funzionante anche con quella italiana. Per prima cosa bisogna andare su Create App per creare una applicazione per il nostro sito. Basta inserire un qualsiasi nome e cliccare sul pulsante Create App. In seguito sarà richiesta anche l'URL della homepage del blog. Se avete più siti, è possibile avere una applicazione per ciascuno di essi.

Si va su Sviluppatori - Le mie Applicazioni per poterle gestire. Ogni applicazione avrà un suo ID e le sue API Key che in questo contesto non ci servono

 

L'unico dato da acquisire è l'ID dell'applicazione. Per implementare il pulsante Invia (Send) insieme al pulsante Mi Piace bisogna procedere in questo modo. Si va su Design > Modifica HTML e si salva il modello completo. Dopo aver messo la flag a espandi modelli widget, si cerca la riga </body> e, immediatamente sopra, si incolla il seguente codice

<!-- Facebook XFBML asincrono -->
<div id='fb-root'/>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: &#39;116894568356960&#39;, status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement(&#39;script&#39;); e.async = true;
    e.src = document.location.protocol +
      &#39;//connect.facebook.net/it_US/all.js&#39;;
    document.getElementById(&#39;fb-root&#39;).appendChild(e);
  }());
</script>
<!-- Facebook XFBML asincrono -->

dove al posto dell'ID evidenziato di rosso, inserite l'ID della vostra applicazione. Adesso cercate questo blocco di codice

 <div style='clear: both;'/> <!-- clear for photos floats -->
</div>
   <div class='post-footer'>

Immediatamente sopra incollate il seguente

<!--FACEBOOK MI PIACE INIZIO-->
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<script src='http://connect.facebook.net/it_IT/all.js#xfbml=1'/><fb:like expr:src='data:post.url' send='true' show_faces='true' width='530'/>
</b:if>
<!--FACEBOOK MI PIACE FINE - www.ideepercomputeredinternet.com-->

Salvate il modello. Si può naturalmente scegliere anche un'altra posizione per visualizzare i due bottoni. Tra qualche giorno o forse tra qualche ora sarà possibile sostituire en_US con it_IT per avere i pulsanti in lingua italiana. Le altre personalizzazioni riguardano

1. La presenza o meno del bottone Invia inserendo send='true'  o send='false'  
2. La presenza o meno degli avatar di chi clicca su Mi Piace: show_faces='true'  oppure show_faces='false'
3. La larghezza in pixel della finestrella width='530'

Alla fine del post apparirà una cosa di questo genere

Se si clicca su Mi Piace (Like) si aprirà una finestra in cui inserire un messaggio di condivisione per il post

Se invece si clicca su Invia (Send) sarà possibile spedire il post a uno o più amici

Nel momento in cui si inizierà a digitare un nome, appariranno i suggerimenti in basso . E' anche possibile inviare il post a un gruppo, in questo caso apparirà nella Bacheca insieme all'eventuale messaggio

Si termina cliccando su Send (Invia). Con questo sistema sarà spedito il singolo post e non la home page del blog. Il collegamento automatico all'articolo è definito dalla stringa  expr:src='data:post.url' . Nel prossimo articolo mi occuperò di come inserire il pulsante Invia da solo senza il Mi Piace nella speranza che sia già funzionante lo script anche in lingua italiana. Concludo osservando che l'inserimento di questi pulsanti è stato fatto in modo asincrono per migliorare la velocità di caricamento della pagina. Significa che i vari browser continueranno a mostrare tutti gli elementi presenti nel post a prescindere da questo pulsante che sarà visualizzato alla fine.

Aggiornamento: E' già possibile visualizzare i bottoni Mi Piace e Invia in italiano inserendo it_IT nel secondo codice. I pulsanti avranno questa forma

Al momento non è ancora possibile cambiare lingua nel primo codice, quindi i comandi per inviare il post o annullare la richiesta permangono in lingua inglese (Send e Cancel).

Aggiornamento n°2: Si può sostituire en_US con it_IT anche nel secondo script. I pulsanti appariranno in italiano

con Invia e Annulla al posto di Send e Cancel.