Pubblicato il 26/09/10 - aggiornato il  | 15 commenti :

Il Mi Piace di Facebook inserito in un box insieme al collegamento per la pagina fan.

Questa personalizzazione del plugin Mi Piace di Facebook è veramente carina e sono sicuro incontrerà il favore di molti lettori. Si tratta in sostanza di inserire l'iFrame di Facebook all'interno di un box con gli stessi colori del social network e insieme a un collegamento e un invito ai navigatori per sottoscrivere la nostra pagina fan. E' quindi superfluo aggiungere che per poterlo installare occorre avere una pagina ufficiale del blog su Facebook mi-piace-facebook

Si può personalizzare riguardo alle dimensioni in larghezza e a quelle in altezza con la possibile scelta tra mostrare gli avatar o non mostrargli. Ricordo comunque che si possono vedere solo le immagini di chi ti è amico su Facebook e ha cliccato su Mi Piace. Nel caso in cui si scelga di mostrare anche le foto, per i navigatori, esiste anche la possibilità di condividere il post inserendo anche un commento personale.

facebook-commentoche si inserisce nel form che si apre dopo aver cliccato su Mi Piace. Ricordo che una semplice condivisione fa comparire il link solo nella Bacheca di chi ci clicca nella sezione "Attività Recente" mentre se si inserisce un commento sarà visibile nella Home di tutti gli amici come link condiviso.

Cliccando su Diventa Fan si aprirà la pagina della pagina ufficiale del blog su Facebook. Per l'installazione procedete nel modo seguente.

Dopo aver salvato una copia del modello completo, andate su Design > Modifica HTML e cercate questa riga

]]></b:skin>

Immediatamente sopra incollate il codice

/* FACEBOOK BOX */
.fb_like_box {
margin-top:10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background-color:#3B5999;
border:3px solid #2B2B2B;
margin-bottom:10px;
padding:10px 7px;
width:600px;
}
.fb_like_top {padding:0;margin:0 0 5px;width:349px;height:24px;background:url("http://lh6.ggpht.com/_nT13UtBmmiU/TJ4oqtJBUfI/AAAAAAAAOs8/e1cM3csU_Ek/facebook-mi-piace%282%29.jpg") no-repeat scroll left top transparent;}
.fb_like_top a {
height:24px;
width:114px;
background:url("http://lh3.ggpht.com/_nT13UtBmmiU/TJ4gfjASOyI/AAAAAAAAOss/E1Nnn96PNFY/diventa-fan.jpg") no-repeat scroll left top transparent;
display:block;
margin-left:485px;
text-indent:-5000px;
}
.fb_like_button_holder {
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background:none repeat scroll 0 0 #FFFFFF;
padding:12px 12px 0 12px;
width:575px;
height:72px;
}

Questo è per un box di una larghezza di 600px e mostra anche gli avatar. Se si preferisce un'altra larghezza dobbiamo cambiare i dati scritti in rosso. Per esempio per una

  • Larghezza di 530 pixel diventeranno width:530px;  margin-left:415px; e width:505px;
  • Larghezza di 500 pixel diventeranno width:500px; margin-left:385px; e width:475px;
  • Nel caso di una larghezza totalmente personalizzata fate una interpolazione tra questi valori

Se non si vogliono mostrare gli avatar occorre sostituire height:72px; con height:42px;

Adesso andate alla riga

<data:post.body/>

e subito sotto incollate il seguente codice

<!--Facebook Like Box Inizio-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb_like_box'>
<div class='fb_like_top'>
<a href='http://www.facebook.com/ideepercomputeredinternet' rel='nofollow' target='_new' title='Diventa Fan'>Diventa un Fan</a>
</div>
<div class='fb_like_button_holder'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>
</div>
</div>
</b:if>
<!--Facebook Like Box Fine-->

Dove occorre sostituire l'indirizzo della mia pagina fan, evidenziato di rosso, con quello della vostra. Se non si vogliono mostrare gli avatar bisogna inserire false al posto di true in show-faces. In questo caso va diminuita l'altezza dell'iFrame da 60px a 30px. in entrambe le occorrenze.

Se si hanno dei blog con sfondo scuro si sostituisce dark a light in colorscheme. Non resta che salvare il modello.

Considerazioni finali

  1. Se avete inserito anche il bottone ufficiale di Twitter, incollate il codice del box di Facebook subito sotto per mostrarli uno di fianco all'altro. Se avete altre cose in quella zona del template, come per esempio la pubblicità o del testo inserito in automatico, questo box di Facebook va incollato considerando le altre presenze nella posizione in cui vogliamo che appaia.
  2. Essendo piuttosto pesante, questo box appare solo nei post. E' possibile visualizzarlo ovunque eliminando le due righe evidenziate di verde nell'ultimo codice.
  3. Si possono personalizzare anche molte altre dimensioni, i margini e il padding dei vari elementi.

Questo articolo è una rielaborazione informatica, linguistica e grafica di un lavoro di Blogger Plugins.



15 commenti :

  1. non ci riesco, cavolo ma dove sbaglio?

    RispondiElimina
  2. @Silvia
    Prova per prima cosa esattamente con il codice che ho postato, poi fai le modifiche necessarie

    RispondiElimina
  3. Io uso blogger e questa applicazione mi piace un sacco ma vorrei inserirla come gadget a lato non sotto ai post? Sai se si può fare?
    Grazie e complimenti per il sito

    RispondiElimina
  4. @three4style
    Usa questo codice qui
    http://www.ideepercomputeredinternet.com/2010/09/come-inserire-il-bottone-di-facebook.html
    Elimina le prime due righe e le ultime due e inseriscilo in una sidebar.
    Se non ti riesce, quando ho un po' di tempo ci faccio un articolo.
    Ciao

    RispondiElimina
  5. Ciao Ernesto! Ti volevo chiedere , ma è normale che tutto ciò che provo a inserire nei post, non funziona mai ? non viene MAI visualizzato. Eppure seguo sempre le istruzioni alla lettera!

    RispondiElimina
    Risposte
    1. @# Se non ti funziona nulla, non non è normale. E' però normale che in certi modelli molto personalizzati molto difficilmente si possano operare altre modifiche. Io ti ho risposto considerando che forse hai fatto un lapsus confondendo post e modello perché quello che metti nei post si dovrebbe vedere sempre e comunque

      Elimina
    2. No...intendevo nei post tramite il modello :) non mi fa inserire la riga , ma intendevo sotto post.body!

      Elimina
    3. @# Questo codice è già stato inserito altre volte e Blogger lo ha sempre accettato. Prova a leggere questo
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html

      Elimina
    4. non mi serve come cercare nel template, quello già so farlo...il procedimento l'ho seguito alla lettera, al blog ho fatto tante modifiche più complicate di questa ma la suddetta proprio non funziona.Grazie comunque

      Elimina
  6. Ho risolto il problema! in pratica nel template era presente 3 volte il codice post.body, quello giusto era il terzo. Lo scrivo cosi se qualcuno ha lo stesso problema può risolvere :)

    RispondiElimina
  7. Ho seguito passo passo la guida! Nonostante questo non succede niente nel mio blog! Come posso risolvere!??

    RispondiElimina
    Risposte
    1. Sono passati tre anni da questo post e Facebook ha cambiato molte impostazioni. Prova a seguire questo articolo
      http://www.ideepercomputeredinternet.com/2013/08/mi-piace-facebook-blogger-template.html
      Al posto di
      <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>
      prova a mettere questo codice
      <div class="fb-like" expr:data-href="data:post.canonicalUrl" data-layout="box_count" data-action="like" data-colorscheme="light" data-send="false" data-font="trebuchet ms"/>

      dopo però aver installato secondo le istruzioni del post di cui ti ho incollato l'URL anche 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 = &#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>

      @#

      Elimina
    2. Posso sia inserire il "mi piace" per i post (cosa che ho fatto seguendo la guida) che inserire il tasto mi piace per la pagina facebook? se si come fare?

      Elimina
    3. Certo che si può fare. Leggi qui
      http://www.ideepercomputeredinternet.com/2013/08/like-box-facebook-code-blogger-wordpress.html
      A te più che vedere le facce dei fan ti serve il bottone e allora devi seguire il post e configurare questo plugin
      https://developers.facebook.com/docs/reference/plugins/like-box/
      senza niente cioè eliminando tutti i segni di spunta dai vari quadratini
      @#

      Elimina

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