Pubblicato il 27/09/13e aggiornato il

Come installare il Mi Piace di una pagina fan di Facebook in una sidebar o nel modello di Blogger.

Come installare il Mi Piace della Pagina Fan di Facebook nel template di Blogger o semplicemente in una sua sidebar.
Tra i vari plugin di Facebook quello del Like Box della pagina fan è probabilmente il più amato dopo il classico Mi Piace. In un commento di pochi minuti fa mi è stato chiesto appunto come inserire il Mi Piace della pagina fan senza tutti gli altri orpelli.

Si deve evidentemente configurare il Like Box Plugin incollando l'URL della nostra pagina e togliendo la flag a tutti gli elementi opzionali: Show Header, Show Stream, Show Faces, Show Border. Successivamente, dopo aver visto l'anteprima del widget, si va su Get Code e si sceglie HTML5. Si possono copiare entrambi i codici e unirli in uno soltanto. Alternativamente il primo può essere inserito nel modello. Se non avete creato nessuna applicazione specifica per Facebook e volete fare le cose semplici basta che andiate su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, incolliate il codice che segue

<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>
<div id="fb-root"></div>
<div class="fb-like-box" data-href="https://www.facebook.com/ideepercomputeredinternet" data-width="230" data-show-faces="false" data-header="false" data-stream="false" data-show-border="false"></div>

che dopo averlo salvato può essere posizionato a piacere. Nel codice bisogna personalizzare le parti colorate di rosso che riguardano l'URL della pagina ufficiale e la larghezza del pulsante. Nel caso abbiate già installato un altro plugin con questo sistema basterà incollare la parte evidenziata di giallo.


Se avete un blog con sfondo scuro il codice può essere modificato in questo modo

<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>
<div id="fb-root"></div>
<div class="fb-like-box" data-href="https://www.facebook.com/ideepercomputeredinternet" data-width="230" data-colorscheme="dark" data-show-faces="false" data-header="false" data-stream="false" data-show-border="false"></div>

con l'accortezza di incollare solo la parte evidenziata di giallo nel caso siano presenti altri plugin.

IL MI PIACE DELLA PAGINA FAN NEL MODELLO DI BLOGGER

Se volete visualizzare questo pulsante alla fine di tutti i post non vi resta che operare sul modello. Dopo aver salvato il template andate su Modello > Modifica HTML > Vai al widget > Blog1

blog1-blogger

Individuate la riga <b:includable id='post' var='post'> quindi cliccate nella freccetta nera posta sulla sinistra per espandere tutto il codice

codice-post

Cercate adesso la riga <div class='post-footer'> e, subito sopra, incollate questo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='text-align:center;'>
<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>
<div id="fb-root"></div>
<div class="fb-like-box" data-href="https://www.facebook.com/ideepercomputeredinternet" data-width="230" data-show-faces="false" data-header="false" data-stream="false" data-show-border="false"></div>
</div>
</b:if>

in questo modo

codice-blogger

Si salva il modello. Ovviamente devono essere inseriti l'URL della pagina fan e la larghezza prescelta. Nel caso di un blog con sfondo scuro si aggiunge il tag colorato di viola del codice precedente. Il tag center serve per centrare il widget e può essere sostituito da left o da right con ovvio significato. Le righe colorate di viola sono due tag condizionali e impongono il vincolo che il pulsante debba essere visto solo negli articoli in questo modo

pulsante-pagina-fan
Il bottone con il Mi Piace della pagina fan può anche essere posizionato all'inizio dell'articolo oppure più in basso incollando il codice subito sopra a queste righe

<data:post.body/> per visualizzarlo prima dei post
<div class='post-footer-line post-footer-line-1'> per vederlo all'inizio del footer
<div class='post-footer-line post-footer-line-2'> per vederlo più in basso nel footer
<div class='post-footer-line post-footer-line-3'> per vederlo ancora più in basso nel footer.




4 commenti :

  1. Bell'articolo, molto interessante
    Complimenti!

    Antonella

    RispondiElimina
  2. buonasera caro Ernesto,una domanda;
    c'è un modo per eliminare il limite di 20 pagine per un blog su blogger? a me ne servirebbero almeno 30
    grazie

    RispondiElimina
    Risposte
    1. Puoi pubblicare dei post retrodatati e farli passare come pagine. Al momento è l'unico sistema
      @#

      Elimina
  3. il discorso è che però non dovrebbero comparire come post,ma solo come collegamento pagina
    tipo
    chiamo un link FOTO VACANZE SPAGNA clicco li e mi porta al post.
    però poi il post ev essere invisibile come post,e visibile solo come collegamento.
    scusa spero di essermi spiegato bene,
    Grazie

    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.