Come mostrare il pulsante Salva su Facebook in Blogger.

Come installare il plugin Salva su Facebook in una sidebar di Blogger o nel modello per mostrarlo automaticamente in tutti i post.

Ho pubblicato molti articoli su tutti i plugin di Facebook ma in un commento mi è stato fatto notare di averne dimenticato uno, precisamente quello che mostra il bottone Salva su Facebook. Ricordo che sono esattamente due anni che Facebook ha rilasciato questa funzionalità che permette ai lettori di salvare i post in forma privata nel proprio account Facebook.

In sostanza quando si scorrono le notizie nella Timeline di Facebook si può cliccare sulla freccia in alto per visualizzare in menù e scegliere Salva.... con il nome del post. Tali contenuti verranno visualizzati nella sezione Elementi salvati a cui accedere per leggerli con più calma. Questa opzione è molto utile quando si scorrono le notizie con il cellulare.

Facebook ha reso disponibile anche un plugin che permette di salvare tali elementi non solo navigando nella sezione Notizie ma anche aprendo il sito da desktop o da cellulare. In questo post vedremo appunto come inserire questo bottone in una sidebar o direttamente nel modello.

INSTALLARE IL JAVASCRIPT SDK DI FACEBOOK IN BLOGGER

Se questo plugin non è il primo di Facebook che inserite nel vostro sito su Blogger allora avete già lo script necessario per far funzionare tutti i plugin che poi è lo stesso e che può essere personalizzato in funzione del sito e della lingua. Per una completa utilizzazione dei plugin di Facebook occorre creare una applicazione Facebook e incollare il javascript SDK nel modello di Blogger. Se lo avete già fatto lasciate perdere questa sezione e passate alla successiva.

Se invece avete scelto una impostazione minimalista e non avete ancora tale javascript allora, dopo aver salvato il template, andate su Modello -> Modifica HTML e cercate la riga

<body expr:class='"loading" + data:blog.mobileClass'>

che è presente in tutti i modelli più recenti. Se così non fosse cercate la riga che inizia con <body ... . Subito sotto a tale riga incollate 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 = '//connect.facebook.net/it_IT/all.js#xfbml=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

quindi salvate il modello. Potete personalizzare la stringa it_IT per scegliere una lingua diversa dall'italiano. Per esempio en_US mostrerà in plugin in lingua inglese americana.

COME INSTALLARE IL PLUGIN SALVA SU FACEBOOK

Per visualizzare il bottone Salva su Facebook in una sidebar si va su Layout -> Aggiungi un gadget -> Base -> HTML/Javascript e si incolla questo codice

Si salva e si posiziona con il trascinamento del mouse. Se al posto di large mettiamo small verrà visualizzato un pulsante più piccolo in questo modo

salva-su-facebook

La differenza è minima. Sono 150 px di larghezza per il pulsante Large e 130 px per lo Small.

COME VISUALIZZARE IL PULSANTE SOTTO A TUTTI I POST

Si può installare questo pulsante nel modello per essere visto in modo automatico in tutti i post di Blogger. La posizione preferita è quella alla fine dei contenuti ma si può mettere anche altrove. Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la riga

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

che è l'inizio della sezione desktop. Si clicca sulla freccetta nera presente alla sua sinistra ver visualizzare tutto il codice. Si scorre verso il basso fino a trovare questo blocco di codice

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

che è quello del jump, o salto o Read More. Subito sotto si incolla quest'altro codice

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div align='center'>
<div class='fb-save' expr:data-uri='data:post.Url' data-size='large'></div>
</div>
</b:if>
</b:if>

quindi si salva il modello. Le due righe evidenziate di giallo servono per mostrare il pulsante solo nei post e quelle evidenziate di verde per non mostrarlo nelle pagine statiche. Il tag center serve per centrare il pulsante e può essere sostituito da right o left con ovvio significato.

Il lettore dopo aver cliccato sul pulsante vedrà in alto a destra il messaggio Salvataggio effettuato con il link Visualizza su Facebook. Cliccando sopra al link si aprirà il nostro account Facebook nella sezione Elementi Salvati a cui sarà stato aggiunto il post che abbiamo appena salvato.

Se decidessimo di mostrare tale pulsante anche nella versione mobile dovremo cercare la riga

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

Dopo aver cliccato sulla freccetta nera posta sulla sinistra si scorre il codice fino a trovare

<div class='post-footer'>

Subito sopra a questa riga dovremo incollare questo codice

per poi salvare il modello. Il significato del tag center è lo stesso di prima.

elemento-salvato-facebook

Gli elementi già salvati mostreranno un aspetto diverso del pulsante Salva su Facebook. Nel prossimo articolo mostrerò come installare in una sidebar o alla fine di ogni post tutti i plugin di Facebook che comportano una azione da parte dell'utente.

Pubblicato il 11/07/16 - aggiornato il | Nessun commento :