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

• Demo del FanBox di Facebook scorrevole -

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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_vAaWEz-n43sa1W88dXuc_Ac24zVS-S3dVGqFWspAPz4RzrLstcuWzRnvIKr5-tcoiu6cPdkNRiwnrWbD1bM9gHwTacjPdk5Cv_CRBtvtVJQxVEmiK3dLPtCwsuZAJG6M7WqZ8nZFFtI/) 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)

• Codice per il FanBox da incollare in un elemento pagina -

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 -