Pubblicato il 25/08/13e aggiornato il

Come inserire il bottone Condividi di Facebook alla fine dei post.

Come installare il pulsante Condividi di Facebook nel modello di Blogger per visualizzarlo automaticamente nei post.
Continuo nella presentazione di metodi semplificati per l'installazione dei plugin di Facebook. Dopo aver illustrato come inserire il Mi Piace e il Like Box nella sidebar passo a trattare i plugin da installare all'interno del modello. In questo post vediamo come mostrare il pulsante Condividi, o Share nella versione anglosassone.

Mostrerò come inserire tale bottone solo negli articoli proprio alla fine di ciascun post ma si può modificare il suo posizionamento e scegliere di mostrare il bottone ovunque o in determinate pagine utilizzando i tag condizionali.

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga di codice che inizia con <body… che negli ultimi template è la seguente

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

Subito sotto a tale riga si incolla il seguente 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>

Sempre su Modello > HTML adesso si clicca su Vai al widget > Blog1

modello-blogger-vai-al-widget

Si clicca quindi sulla freccetta nera della sezione

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

in modo da poter visualizzare tutto il codice che vi è contenuto

post-codice-blogger

In questo codice si cerca la riga

<div class='post-footer'>


e, subito sopra, si incolla il codice seguente

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class="fb-share-button" expr:data-href="data:post.canonicalUrl" data-type="box_count"/>
</b:if>

in questo modo

codice-condividi-facebook

Si salva il modello. Quando si aprirà un qualsiasi post si visualizzerà alla fine un bottone con contatore

condividi-facebook

PERSONALIZZAZIONI DEL BOTTONE CONDIVIDI

   1) Le due righe colorate di viola rappresentano i due tag condizionali e possono essere tolte per vedere il bottone ovunque. Possono anche essere sostituite o integrate da altre per porre altri vincoli.

   2) Il bottone prescelto ha il contatore verticale ma ci sono altre opzioni. Basta sostituire il valore in data-type="box_count" con data-type="button_count" per il contatore orizzontale

bottone-contatore-orizzontale

oppure scegliere data-type="button" per avere solo il bottone senza contatore


   3) Si può allineare il bottone a sinistra a destra o centrarlo. Si possono usare con un <div> i tag text-align o float ricordando che il secondo funziona solo con left e right e non con center. In sostanza si inseriscono due righe tra i tag condizionali in questo modo
Allineamento flottante a sinistra

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="float: left;">
<div class="fb-share-button" expr:data-href="data:post.canonicalUrl" data-type="box_count"/>
</div>
</b:if>

Bottone centrato

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

 4) Per modificare la posizione del bottone basta incollare il secondo codice subito dopo questa linea

<div class='post-header-line-1'>

per averlo all'inizio dell'articolo. Oppure subito dopo

<div class='post-footer-line post-footer-line-1'>


per averlo ancora più in basso. Ricordo che ci sono tre linee simili che differiscono solo per il numero colorato in rosso e che può essere 1 o 2 o 3. Nei prossimi post illustrerò l'installazione di altri plugin di Facebook nel modello di Blogger. Stay tuned.




20 commenti :

  1. Salve, ho eseguito tutta la procedura ma non esce il bottom. =(

    RispondiElimina
  2. Salve, ho eseguito tutta la procedura ma non esce il bottom. =(

    RispondiElimina
    Risposte
    1. Non è che hai guardato nell'Anteprima del modello prima di salvarlo?
      Il bottone si vede solo nei post
      @#

      Elimina
  3. Ciao Ernesto scusa funziona anche x i blog con visualizzazioni dinamiche? Non riesco :( Grazie

    RispondiElimina
    Risposte
    1. No. Con le Visualizzazioni Dinamiche non funziona quasi nulla. Le cose che si possono fare sono elencate qui
      http://www.ideepercomputeredinternet.com/2013/08/blogger-template-visualizzazione-dinamica.html
      @#

      Elimina
    2. Ciao seguendo la procedura esce un tasto condividi ripetutto due volte ,ma se clicco si condivide la pagine di facebook, dei solcial plug in.. quindi dei tasti plug- in. Qcosa che avevo gia pèrovato da solo e non funzionava allo stesso modo. Ma su blogger stesso non ci sono quei gadget da poter inserire,?? solo che quello che ho visto io di facebook, è proprio brutto, ma ce ne saranno altri?? o n altri siti? Grazie, ciao

      Elimina
    3. Se vedi due pulsanti Condividi e perché è probabile che tu avessi inserito un altro codice che non ti aveva funzionato perché lo script era errato. Può essere che tu abbia incollato questo codice che klha lo script corretto senza prima eliminare l'altro codice. mi sembra la spiegazione più logica. Se invece preferisci il bottone Mi piace devi seguire un altro mio tutorial
      @#

      Elimina
  4. Insieme mi piace e condividi e possibile? Grazie

    RispondiElimina
    Risposte
    1. Esteticamente non è il massimo ma puoi incolare entrambi i codici uno accanto all'altro. Per la separazione prova a leggere qui
      http://www.ideepercomputeredinternet.com/2011/06/come-allineare-i-bottoni-di-facebook.html
      @#

      Elimina
  5. Ho seguito il tuo consiglio e li ho lasciati separati. anche se non centra nulla, magari mi puoi indirizzare a qualche altro articolo. Ho questo problema con Fb, quando condivido i miei post del mio blog su fb mette sempre la stessa "sbagliata" miniatura, ho provato a cambiare la foto, più grande, più piccola, ho provato a fare il famoso debugger sulla pagina fb, ma nulla l'errore c'è sempre....sono 2 giorni che sto impazzendo :( Grazie per l'aiuto e complimenti.

    RispondiElimina
    Risposte
    1. Il tuo è un problema comune a molti per non dire quasi a tutti. Si può risolvere manualmente per ogni singolo post con questo sistema
      http://www.ideepercomputeredinternet.com/2014/07/facebook-personalizzare-miniatura-snippet-condivisione.html
      Però è un po' macchinoso
      @#

      Elimina
    2. Ho letto. Grazie. Ma è assurdo questo sistema, ma poi la cosa buffa da un giorno all'altro. Calcola poi che pubblico spesso via smartphone e non riuscirei a fare tutti questi movimenti...Incredibile che fb non abbia risolto

      Elimina
  6. Ernesto, ho seguito tutti i tuoi passi ma non funziona. Mi spiego nella parte scrivi ho eliminato la foto, poi nella parte html ho inserito il codice che tu hai detto (cioè dove si trova l'immagine), poi sono andato in debugger fb ma la foto ora non è più visibile. Dove ho sbagliato?

    RispondiElimina
  7. Ciao. Ho fatto tutta la procedura ma il bottone non appare!! Cosa ho sbagliato?
    Lucia

    RispondiElimina
    Risposte
    1. Ho appena controllato sulla Pagina dei plugin di Facebok
      https://developers.facebook.com/docs/plugins/share-button
      per vedere se era cambiato qualcosa ma il codice è sempre lo stesso. Prova a sostituire "data:post.canonicalUrl" con "data:post.Url"
      @#

      Elimina
  8. grazie fatto
    adesso la vedo sul mio sito http://www.guestpostitalia.it/

    RispondiElimina
  9. Ciao, ho fatto tutto ma non esce il bottone! :(

    RispondiElimina
    Risposte
    1. Il modello di Blogger è cambiato e seguendo queste istruzioni inserisci il bottone nella versione mobile e non in quella desktop. Per le istruzioni più aggiornate leggi qui
      http://www.ideepercomputeredinternet.com/2014/10/mi-piace-facebook-blogger-smartphone-tablet-dispositivi-mobili.html
      e prendi in considerazione la prima riga di codice
      < b:includable id='post' var='post' >
      che serve per la versione desktop e non la seconda che serve per la versione mobile
      @#

      Elimina
  10. Inserire solo parola Facebook senza aver pulsante come si può fare?

    RispondiElimina

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.