Pubblicato il 06/03/16e aggiornato il

Come installare in Blogger il bottone Condividi su Facebook.

Come mostrare il pulsante Condividi di Facebook nel layout o nel modello di Blogger.
Qual è la differenza tra il bottone Mi Piace e il bottone Condividi su Facebook? Si tratta di sottigliezze che però ad alcuni utenti fanno preferire l'uno all'altro o viceversa. Dopo che si è cliccato sul pulsante Like di Facebook  in un contenuto web, se si accede al nostro account Facebook, si va nel menù a freccia verticale sulla destra del lucchetto e si sceglie Registro Attività si visualizzerà l'azione che abbiamo compiuto.

Questa potrà essere visto anche dai nostri amici nella finestra a scorrimento in alto a destra in cui vengono mostrate tutte le attività dei nostri contatti. Il pulsante Mi Piace può essere usato per dare un semplice Like ma anche per aggiungere un commento. Il pulsante Condividi invece apre sempre una finestra in cui oltre a condividere il link si può aggiungere un nostro commento.  Inoltre la condivisione sarà visualizzata nella sezione Notizie e potrà essere vista anche dai nostri amici.

La scelta tra un pulsante e l'altro suscita dibattito tra gli esperti SEO, ammesso che esistano veramente delle figure professionali che riescano nel dettaglio a decifrare l'algoritmo di Google. Il bottone Mi Piace essendo più flessibile di quello Condividi porta a più interazioni ma quelle del bottone Share sono più efficaci.


COME INSTALLARE NEL MODELLO DI BLOGGER IL JAVASCRIPT DI FACEBOOK


Per installare qualsiasi plugin di Facebook occorre avere installato nel modello il javascript SDK. Lo si può fare in due modi vale a dire utilizzando una applicazione Facebook specifica per il sito oppure senza applicazione. Nel primo caso l'interazione con gli utenti sarà semplificata.

Si va su Modello > Modifica HTML e si cerca la riga

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


JAVASCRIPT SENZA APPLICAZIONE 

Se si preferisce operare senza applicazione subito sotto alla riga precedente si incolla

<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>

quindi si salva il modello.


JAVASCRIPT CON APPLICAZIONE
Se invece abbiamo creato una applicazione specifica per Facebook ne conosciamo l'ID e il codice da incollare sempre subito sotto alla stessa riga di prima è il seguente

<!-- 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 -->

dove oltre alla lingua it_IT c'è da personalizzare anche l'ID della app evidenziato di verde. Ovviamente si deve salvare il template. Il codice HTML del bottone Condividi è invece questo

<div class='fb-share-button' expr:data-href='data:post.Url'  data-layout='box_count'></div>

Tale codice può essere posizionato in una sidebar andando su Layout > Aggiungi un gadget > Base > HTML/Javascript > Sezioni del sito e il bottone avrà questo aspetto

pulsante-condividi-facebook

Quando ci si cliccherà sopra comparirà una finestra popup con immagine e snippet del post, con il campo per digitare il commento e con il bottone Pubblica su Facebook posto in basso

pulsante-condividi-facebook


STILI DEL BOTTONE CONDIVIDI

Lo stile proposto è quello box_count che mostra anche il numero delle condivisioni ma ci sono anche le opzioni button_count, button, icon_link, icon e link. Ecco due esempi

condividi-facebook-bottone

 

INSTALLARE IL CODICE NEL MODELLO DI BLOGGER

Il codice di due righe che abbiamo visto in precedenza oltre che in una sidebar può essere incollato anche nel modello di Blogger e si può personalizzare il suo posizionamento in senso verticale (subito sotto il titolo del post, alla fine dell'articolo, ecc) e anche in senso orizzontale (sinistra, destra, centrato). Il bottone Condividi opzionalmente può anche essere visualizzato dai dispositivi mobili. La procedura per tutte queste personalizzazioni è la stessa utilizzata per il bottone Mi Piace


Il risultato finale potrebbe essere questo

pulsante-condividi-facebook

che è stato ottenuto incollando questo codice


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="text-align: center; margin-bottom:5px;">
<div class='fb-share-button' expr:data-href='data:post.Url'  data-layout='box_count'></div>
</div>
</b:if>

sopra alla riga <data:post.body/> trovata scorrendo il codice verso il basso a partire dall'altra riga

<b:includable id='post' var='post'>




3 commenti :

  1. Ciao Ernesto anche questo messo :) Ascolta immagino sia ancora presto per vedere sparire la scritta Conferma dal bottone mi piace vero?Lo ho installato ieri

    RispondiElimina
    Risposte
    1. Il tempo che ci vuole perché scompaia il bottone Conferma dipende dal numero dei Mi Piace o dei Condividi che ricevi da persone diverse. Più like ricevi da più persone e meno tempo ci vorrà.
      @#

      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.