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='"loading" + 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 = '//connect.facebook.net/it_IT/all.js#xfbml=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<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 = '//connect.facebook.net/it_IT/all.js#xfbml=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Sempre su Modello > HTML adesso si clicca su Vai al widget > Blog1
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
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 == "item"'><div class="fb-share-button" expr:data-href="data:post.canonicalUrl" data-type="box_count"/>
</b:if>
</b:if>
in questo modo
Si salva il modello. Quando si aprirà un qualsiasi post si visualizzerà alla fine un bottone con contatore
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
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 == "item"'>
<div style="float: left;">
<div class="fb-share-button" expr:data-href="data:post.canonicalUrl" data-type="box_count"/>
</div>
</b:if>
<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 == "item"'>
<div style="text-align: center;">
<div class="fb-share-button" expr:data-href="data:post.canonicalUrl" data-type="box_count"/>
</div>
</b:if>
<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.
Salve, ho eseguito tutta la procedura ma non esce il bottom. =(
RispondiEliminaSalve, ho eseguito tutta la procedura ma non esce il bottom. =(
RispondiEliminaNon è che hai guardato nell'Anteprima del modello prima di salvarlo?
EliminaIl bottone si vede solo nei post
@#
Ciao Ernesto scusa funziona anche x i blog con visualizzazioni dinamiche? Non riesco :( Grazie
RispondiEliminaNo. Con le Visualizzazioni Dinamiche non funziona quasi nulla. Le cose che si possono fare sono elencate qui
Eliminahttp://www.ideepercomputeredinternet.com/2013/08/blogger-template-visualizzazione-dinamica.html
@#
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
EliminaSe 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@#
Insieme mi piace e condividi e possibile? Grazie
RispondiEliminaEsteticamente non è il massimo ma puoi incolare entrambi i codici uno accanto all'altro. Per la separazione prova a leggere qui
Eliminahttp://www.ideepercomputeredinternet.com/2011/06/come-allineare-i-bottoni-di-facebook.html
@#
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.
RispondiEliminaIl tuo è un problema comune a molti per non dire quasi a tutti. Si può risolvere manualmente per ogni singolo post con questo sistema
Eliminahttp://www.ideepercomputeredinternet.com/2014/07/facebook-personalizzare-miniatura-snippet-condivisione.html
Però è un po' macchinoso
@#
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
EliminaErnesto, 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?
RispondiEliminaCiao. Ho fatto tutta la procedura ma il bottone non appare!! Cosa ho sbagliato?
RispondiEliminaLucia
Ho appena controllato sulla Pagina dei plugin di Facebok
Eliminahttps://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"
@#
grazie fatto
RispondiEliminaadesso la vedo sul mio sito http://www.guestpostitalia.it/
Ciao, ho fatto tutto ma non esce il bottone! :(
RispondiEliminaIl 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
Eliminahttp://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
@#
Inserire solo parola Facebook senza aver pulsante come si può fare?
RispondiEliminaNon si può fare
Elimina@#