22 agosto 2011

Inserire il Like Box di Facebook in modo scorrevole su Blogger.

Si può dire che quasi tutti i blog hanno una loro pagina fan su Facebook e che in quasi tutti i siti che hanno una FanPage è presente anche il widget del Like Box (o FanBox) per mostrare il numero dei sottoscrittori e gli avatar di alcuni di loro. Vediamo come rendere questo gadget più originale. Si tratta di fare in modo che rimanga sempre nella stessa posizione del layout allo scorrere  della pagina e di mostrare solo una linguetta in modo da poterlo aprire passandoci sopra con il mouse. Ho pubblicato sul web una

Se andate sulla destra e passate il mouse sopra alla linguetta si aprirà il LikeBox

fanbox-scorrevole-facebook

Per la sua installazione si va su Design > Modifica HTML e si salva il modello completo per un eventuale backup di ripristino. Si cerca la riga </head> e, immediatamente sopra, si incolla il codice seguente

<!-- FANBOX FACEBOOK SCORREVOLE INIZIO -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
<noscript><a href='http://goo.gl/6haE1' target='_blank'><span style='font-size: x-small;'>Slide FanBox</span></a></noscript>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(function (){
jQuery(&quot;.slide_likebox&quot;).hover(function(){
jQuery(&quot;.slide_likebox&quot;).stop(true, false).animate({right:&quot;0&quot;},&quot;medium&quot;);
},function(){
jQuery(&quot;.slide_likebox&quot;).stop(true, false).animate({right:&quot;-250&quot;},&quot;medium&quot;);
},500);
return false;
});
</script>
<!-- FANBOX FACEBOOK SCORREVOLE FINE - www.ideepercomputeredinternet.com -->

poi si cerca la riga ]]></b:skin> e, subito sopra, si incolla quest'altro codice

/* SLIDE FACEBOOK FANBOX */
.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(https://lh3.googleusercontent.com/-hn3VsPEMW9Q/TlIQCVsv9AI/AAAAAAAAURI/Nkp11iLUCzk/sfondo-fanbox.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 150px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}

Si salva il modello. I più esperti di voi potranno anche operare delle personalizzazioni che vanno dalla modifica della forma dello sfondo (URL colorato di rosso) alle dimensioni del widget. E' una cosa consigliata solo a chi ha una certa pratica di codici. Un parametro semplice da configurare è la distanza in pixel del widget dalla parte alta del layout (top: 150px;). Adesso si va su Design > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla questo iFrame (ho dovuto pubblicarlo perché con Windows Live Writer gli iFrame vengono visualizzati nella pagina e non se ne può incollarne il codice)

Al posto di ideepercomputeredinternet sostituite il nome personalizzato della vostra pagina fan. Se ancora non avete un Vanity URL per la vostra pagina e avete ancora il numero di identificazione che vi è stato dato da Facebook bisogna che procediate in altro modo. Nel codice al posto di

http%3A%2F%2Fwww.facebook.com%2Fideepercomputeredinternet

inserite quest'altra stringa

http%3A%2F%2Fwww.facebook.com%2Fpages%2Fideepercomputeredinternet%2FXYZXYZXYZXYZ

dove dovete sostituire ideepercomputeredinternet con il nome della vostra pagina e al posto di  XYZXYZXYZXYZ dovete mettere il numero ID della pagina in questione. Entrambe queste informazioni possono essere desunte semplicemente dalla barra degli indirizzi del vostro browser quando aprite la pagina fan.

Fonte | Ciudad Blogger -




9 commenti :

  1. Ciao Ernesto, ti scrivo per ringraziarti dell'aiuto che mi hai dato tramite i tuoi articoli e non solo.

    Continuerò a seguire il tuo blog per tenermi aggiornato ;)

    RispondiElimina
  2. Ciao Ernesto,
    grazie per i tuoi preziosi consigli!!! Li ho seguiti alla lettera e sono stati utilissimi!!! WOW!!!! Ora, anch'io ho il Like scorrevole di Facebook sul mio sito!!!!
    Ciao!!!
    Maria Pia

    RispondiElimina
  3. ciao ernesto ti volevo dire che ho inserito tutti i codici ma non mi funziona e non capisco xkè.........da premettere utilizzo firefox 20.0.1 con una sua applicazione "adblock plus", ma che è stata disattivata per la mia pagina che puo essere grazie in anticipo.

    RispondiElimina
    Risposte
    1. @# AdBlock Plus non c'entra nulla. Se non funziona dipende da altre problematiche. Forse nel modello hai altri javascript incompatibili con questo.

      Elimina
    2. immagino che sia un problema non risolvibile cmq grazie

      Elimina
  4. Ciao, prima cosa grazie mille per i tuoi consigli! Sono riuscita ad inserirlo correttamente nel blog e a cambiare il colore dello sfondo! Ora però avrei due domande:
    1. come faccio a cambiare il colore del rettangolino?! Quel blu di facebook proprio non mi piace!
    2. come posso ingrandire sempre il rettangolino?!
    Grazie mille per le risposte e scusa per l'imprecisione dei termini usati!

    RispondiElimina
    Risposte
    1. Incolla questo URL nel browser
      https://lh3.googleusercontent.com/-hn3VsPEMW9Q/TlIQCVsv9AI/AAAAAAAAURI/Nkp11iLUCzk/sfondo-fanbox.png
      Vedrai l'immagine di sfondo di colore azzurro. Se sei brava nella grafica potrai cambiargli il colore. Potrai usare una immagine anche più grande ma allora dovresti anche cambiare le dimensioni degli altri elementi. L'immagine modificata devi caricarla su Picasa e ottenerne il link diretto per poi sostituirlo al codice
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.