Come visualizzare e personalizzare il bottone Mi Piace di Facebook anche nella versione mobile di Facebook accanto al pulsante +1 di Google+.
È notizia di ieri che Facebook ha messo a disposizione degli sviluppatori un nuovo plugin per implementare il pulsante Mi Piace anche nelle applicazioni per mobile. Gli utenti di Blogger hanno la possibilità di personalizzare oltre che l'aspetto del sito nella normale versione desktop anche il layout nella versione mobile. Per poterlo fare bisogna andare su Modello > Cellulare e mettere la spunta a Sì. Mostra il modello per cellulari nei dispositivi mobili.
Nel menù verticale della stessa finestra sotto Scegli modello per cellulari va selezionato Personalizza per poi andare su Salva. In questo modo il modello per desktop e quello per cellulari potranno essere gestiti simultaneamente da Modello > Modifica HTML. L'aspetto del blog per il desktop si può modificare andando nella sezione
<b:includable id='post' var='post'>
mentre la versione mobile si potrà modificare nella sezione
<b:includable id='mobile-post' var='post'>
Il codice delle rispettive sezioni si potrà visualizzare interamente cliccando sulla freccetta nera posizionata alla sinistra di tale riga. In questo post vediamo come si possa mostrare anche nel mobile il pulsante Mi Piace con contatore orizzontale. Il bottone di Google+ invece è già presente di default anche nella versione mobile. Dopo aver attivato la versione per cellulari e scelto il modello Personalizza bisognerà quindi incollare nel modello lo script di Facebook. Se avete già nel vostro blog il pulsante Mi Piace per desktop non occorre fare nulla. Nel caso invece in cui ancora non abbiate tale bottone vi consiglio di leggere il post su come installare e personalizzare il Mi Piace di Facebook.
Per inserire il plugin di Facebook andate su Modello > Modifica HTML e cercate la riga
Se tale riga non ci fosse cercate semplicemente <body con Ctrl+F. Subito va incollato
<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>
Si salva il modello. Con questo script potete inserire quasi tutti i plugin di Facebook. Ci sarà la difficoltà di dover andare su Conferma per chi clicca sul Mi Piace. Tale difficoltà non esisterà per chi abbia installato lo script tramite una applicazione specifica per il suo sito. La localizzazione it_IT serve per visualizzare i plugin in italiano e può essere cambiata optando per lingue diverse.
INSTALLARE MI PIACE NELLA VERSIONE MOBILE
Dopo la procedura appena descritta si torna su Modello > Modifica HTML e si cerca
<b:includable id='mobile-post' var='post'>
Eventualmente si clicca sulla freccetta per visualizzare tutto il codice
Si scorre il codice fino a trovare la riga <data:post.body/>. Subito sopra si incolla questo codice
<div class="fb-like" expr:data-href="data:post.canonicalUrl" data-layout="button_count" data-action="like" data-colorscheme="light" data-width="120" data-show_faces="true" data-send="false" data-font="trebuchet ms"/>
Il Mi Piace sarà visibile subito prima del testo del post in questo modo
Se volete visualizzarlo sopra il contenuto del post con questo aspetto
il codice potrà precedente potrà essere modificato in questo modo
<div><div class="fb-like" expr:data-href="data:post.canonicalUrl" data-layout="button_count" data-action="like" data-colorscheme="light" data-width="120" data-show_faces="true" data-send="false" data-font="trebuchet ms"/></div>
Per quello che riguarda la modifica dei parametri colorati di rosso fate riferimento al post sulla personalizzazione del Mi Piace di Facebook.
MOSTRARE IL MI PIACE ACCANTO AL +1 DI GOOGLE
Per questioni di simmetria del layout si può decidere di mostrare il pulsate di Facebook accanto a quello già presente di Google+ con questo risultato
In questo caso si deve scorrere il codice della stessa sezione più in basso fino a trovare il blocco
<b:if cond='data:top.showDummy'>
<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
</b:if>
<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
</b:if>
che è appunto quello per mostrare il bottone di Google+. Subito sotto si incollano queste righe
<div style="float: right; margin-top:-10px;">
<div class="fb-like" expr:data-href="data:post.canonicalUrl" data-layout="button_count" data-action="like" data-colorscheme="light" data-width="120" data-show_faces="true" data-send="false" data-font="trebuchet ms"/></div>
</div>
<div class="fb-like" expr:data-href="data:post.canonicalUrl" data-layout="button_count" data-action="like" data-colorscheme="light" data-width="120" data-show_faces="true" data-send="false" data-font="trebuchet ms"/></div>
</div>
Oltre ai parametri in rosso sono presenti due tag colorati di viola che servono per posizionare il bottone sulla destra e per centrarlo in altezza. A questo scopo si può modificare il -10px che è il valore ottimale per il modello su cui ho testato questo pulsante. I lettori del vostro sito da mobile potranno quindi condividere i vostri contenuti ovviamente solo se si saranno loggati su 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.
Info sulla Privacy