Like Box scorrevole per Facebook, Twitter e Google+.

Come installare il Like Box di facebook, di Twitter e di Google Plus in modo scorrevole per risparmiare spazio.

Per misurare l'autorità di un blog è particolarmente utile conoscere il numero dei follower che lo stesso blog o il suo autore hanno raccolto nei principali social network. I sottoscrittori sono spesso mostrati anche con il loro avatar almeno per quello che riguarda alcuni di essi. Il blogger è quindi in un certo senso obbligato a inserire nel proprio sito per mostrare ai lettori il Like Box di Facebook, il Fan Box di Twitter e i Sottoscrittori della Pagina Brand.

Questi widget vengono solitamente installati in una sidebar e talvolta pongono problemi di spazio o di loro visibilità perché evidentemente non possono essere tutti inseriti in una posizione visibile al primo scroll della pagina. Per ovviare a questo problema si può realizzare un widget unico che mostri i Like Box in modo scorrevole quando si passi sopra con il cursore al nome relativo con effetti di transizione

Nella immagine animata precedente ho inserito il codice del Profilo di Google+ mentre nel codice che vado a presentare ci sarà il widget dei Followers su Google+ e come vedremo si potrà scegliere facilmente tra uno e l'altro. Per l'installazione di questo gadget non importa neppure salvare il template ma basta andare su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla il codice seguente

<style>
.IpCeI_social{
    padding:0;   
    list-style:none;
    width:300px;
    font-size:20px;
    background:#fff !important;
    border: 1px solid rgba(86,24,0,0.8);
}
.IpCeI_social li a{
    display: block;
    border-bottom: 1px solid rgba(86,24,0, 0.2);
    border-top: 1px solid rgba(250,250,250, 0.2);
    background:#892600;
    text-decoration:none;
    color:#FFF !important;
    text-shadow: 1px 0px 1px rgba(86,24,0,0.2);
    filter: dropshadow(color=#561800, offx=1, offy=0);
    padding:10px;
    padding-left:20px;
}
.IpCeI_social li a:hover{
    background:#456396;
    -moz-transition: background 0.2s ease-in;
    -webkit-transition: background 0.2s ease-in;
    -o-transition: background 0.2s ease-in;
}
.IpCeI_social li a.twitter:hover{
    background:#00abee;
}
.IpCeI_social li a.gplus:hover{
    background:#ff1e1e;
}
.IpCeI_social ul{
    margin:0;
    padding:0;
    list-style:none;
    height:0;
    overflow: hidden;
    transition:0.8s;
    -moz-transition:0.8s;
    -webkit-transition:0.8s;
}
.IpCeI_social li:hover ul{
    height:260px;
    overflow-y:auto;
    overflow-x:hidden;
    padding:0px;
}
.IpCeI_social ul li a{
    background:#fff;
    padding:0px;
}
.IpCeI_social ul li a:hover {
    background: none repeat scroll 0 0 #ccc;
    color: #fff !important;
    -moz-transition: color 0.2s ease;
    -webkit-transition: color 0.2s ease;
    -o-transition: color 0.2s ease;
    padding:0px;
}
</style>
<ul class="IpCeI_social">
    <li><a href="javascript:void(0);">FACEBOOK</a>
      <ul>
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fideepercomputeredinternet&amp;width=300&amp;height=255&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:255px;" allowtransparency="true"></iframe></ul>
    </li>

    <li><a class="twitter" href="javascript:void(0);">TWITTER</a>
      <ul>
<div id="twitter-box"></div>
<script>
  var tw_user = 'parsifal32';
  var tw_width = 300;
  var tw_height = 258;
  var no_face = 10;
    (function() {
      var tw_box = document.createElement('script'); tw_box.type = 'text/javascript'; tw_box.async = true;
      tw_box.src = '//www.twitter-fanbox.com/tw.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);
  })();
</script>
      </ul>
    </li>
     <li><a class="gplus" href="javascript:void(0);">GOOGLE+</a>
       <ul>
<div class="g-plus" data-action="followers" data-height="265" data-href="https://plus.google.com/111056841635962157738" data-source="blogger:blog:followers" data-width="300"> </div>
<script type="text/javascript">
  window.___gcfg = {lang: 'it'};
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
           </script>
      </ul>
   </li>
 </ul>

Si salva e si posiziona il gadget mediante il trascinamento del mouse. La personalizzazione riguarda le dimensioni in larghezza e in altezza del widget oltre ai codici dei colori. Visto che alcuni colori sono stati inseriti in modalità RGB può essere utile consultare il post sulla conversione da HEX a RGB e viceversa. Ovviamente vanno sostituiti i dati relativi a questo sito e al suo autore con quelli del vostro blog. Nel caso non abbiate un URL personalizzato per la pagina fan potete inserire il suo ID in questo modo

src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FNome-Pagina-Fan%2FXXXXXXXX&amp;width=

dove al posto di Nome-Pagina-Fan va messo il nome della vostra pagina Facebook e al posto di XXXXXXX il suo ID numerico che si potrà dedurre dall'indirizzo del browser.

 Ricordo che si può sostituire il gadget dei sottoscrittori di Google+ che ha questo codice

<div class="g-plus" data-action="followers" data-height="265" data-href="https://plus.google.com/111056841635962157738" data-source="blogger:blog:followers" data-width="300"> </div>

con quello più semplice del suo Profilo

 

<div class="g-person" data-href="//plus.google.com/u/0/+ErnestoTirinnanzi" data-showcoverphoto="false" data-rel="author"></div>

Questo widget non è specifico per Blogger e può essere installato anche su Wordpress andando su Widget > Testo e incollando il codice per poi trascinarlo in una sidebar.