Pubblicato il 07/03/16e aggiornato il

Come installare il bottone Invia di Facebook su Blogger.

Come installare nel layout di Blogger o direttamente nel modello il social plugin di Facebook del bottone Invia per permettere la condivisione privata degli articoli del nostro sito.
Continuo nei tutorial per la installazione dei Social Plugin di Facebook e dopo il classico pulsante Mi Piace e l'altrettanto conosciuto bottone Condividi passo alla illustrazione della semplice procedura per l'implementazione del pulsante Invia o Send in inglese.

La differenza tra Invia e i precedenti Mi Piace e Condividi è essenzialmente una questione di Privacy. Mentre Mi Piace e Condividi sono funzionali a azioni pubbliche o comunque condivise almeno con gli Amici di Facebook il bottone Invia si può considerare simile a quello di WhatsApp.

Infatti il lettore che ci cliccherà sopra potrà selezionare uno o più amici a cui inviare il contenuto. Gli amici non selezionati non ne sapranno niente. Un tale pulsante non ha quindi bisogno di contatore e contrariamente al bottone di WhatsApp che funziona solo da mobile permetterà l'invio di post anche da desktop. Nella mia esperienza personale mi sono reso conto che le condivisioni con WhatsApp sono più numerose di quello che si crede quindi mi aspetto che anche il bottone Invia abbia successo.


INSTALLAZIONE DELLO SCRIPT SDK DI FACEBOOK


Prima di procedere si dovrà inserire lo script di Facebook nel modello che sarà già presente nel caso abbiate già installato un altro plugin di tale social network. Per chi non lo avesse ancora fatto ricordo che si può inserire il javascript dopo aver creato una applicazione oppure incollarlo nel modello anche senza averla creata. In ogni caso si va su Modello > Modifica HTML e si cerca

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

INSTALLAZIONE SENZA APPLICAZIONE

Subito sotto a questa riga si incolla questo codice

<div id='fb-root'/>
<script>(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 = &#39;//connect.facebook.net/it_IT/all.js#xfbml=1&#39;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>

Si salva il modello.


INSTALLAZIONE CON APPLICAZIONE


Se invece abbiamo creato una applicazione il codice da incollare sotto la stessa riga sarà

<!-- Facebook SDK Start -->
<script>
//<![CDATA[
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '116894568356960',
      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>
<!-- Facebook SDK End -->

Si salva il template dopo aver modificato l'ID della applicazione colorato di rosso.

 
COME INSTALLARE IL BOTTONE INVIA
 

Il codice del pulsante Invia è il seguente

<div class='fb-send' expr:data-href='data:post.Url'></div>

che può essere installato in una sidebar andando su Layout > Aggiungi un gadget > Base > HTML/Javascript > Sezioni del sito. Questo stesso codice può anche essere inserito nel modello di Blogger per mostrarlo per esempio subito sotto il titolo del post oppure alla fine dello stesso. Le istruzioni di installazione e le personalizzazioni della posizione sono le stesse già viste nel post


Quando un lettore clicca sul pulsante Invia vedrà in successione le finestre dello screenshot seguente

pulsante-invia-facebook

Si visualizzeranno tutti gli amici tra cui potremo selezionarne uno o più a cui inviare il link alla pagina in cui si trova il pulsante Invia. Provate a inviare a un vostro amico questo post


I destinatari riceveranno il link nel Messenger di Facebook

pulsante-invia-facebook
Il difetto del bottone Invia rispetto agli altri pulsanti di Facebook è che non può essere personalizzato nello stile e nelle dimensioni visto che non funziona il parametro data-width. Tale pulsante può comunque essere installato insieme agli altri perché non rallenterà significativamente il caricamento della pagina visto che utilizza lo stesso javascript. Concludo osservando che con il bottone Invia si può inviare un post anche a noi stessi per salvarlo nella chat di Facebook.




Nessun commento :

Posta un commento

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.