Bottoni sociali animati con contatore manuale per Facebook, Twitter, Google+ e Feed.

Bottoni sociali animati con contatore dei follower per Twitter, Facebook, Google+ e Feed RSS per Blogger.

Anno nuovo widget nuovo ma funzionalità vecchio stile. Il gadget che presento mostra le icone di Twitter, Facebook, Google+ e Feed RSS con la particolarità che al passaggio del cursore ci sarà un effetto animazione con la comparsa di un fumetto con il numero dei follower in quel determinato social network. Dico subito che il contatore è manuale nel senso che il webmaster dovrà aver cura di aggiornare il numero dei follower ogni qualvolta lo riterrà opportuno. 

Nella versione originale di cui posto il link a fondo pagina sono presenti oltre ai social sopra indicati anche Dribble e Forrst che ho ritenuto non inserire visto il poco seguito che hanno qui da noi. Il widget potrà essere inserito in una sidebar ma sarà necessario anche modificare il modello. Alla fine della installazione il gadget avrà questo aspetto 

Dopo aver salvato il template si va su Modello > Modifica HTML e si clicca sulla icona nera accanto alla 14-esima riga per visualizzare il codice della sezione b:skin.  Con l'ausilio di Ctrl+F si cerca la riga ]]></b:skin> e subito sopra a questa si incolla questo codice

/* Bottoni Sociali animati */
.social {
  border-radius: 30px;
  position: relative;
  width: 150px;
  height: 32px;
  box-shadow: inset -1px 1px 1px 0px rgba(0, 0, 0, 0.2);
  display: inline-block;
}
.social .count {
  width: 58px;
  height: 31px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ADj8Ru1aNRm6TtreuBna67wGtygyD8yf5Kh6ABDUzrK_rm2YsY_PMv94XqncK4K5ByibliDDgLfJM0uORfcqs2cB9lQKLHTkaxnM79rG34jhPV_q57aLtE1mLilGaCzXdflWL6ROUfkt/s58/bubble.png) no-repeat;
  position: absolute;
  top: 0;
  right: -65px;
  line-height: 31px;
  text-align: center;
  text-indent: 8px;
  font-weight: bold;
  font-size: 14px;
  color: #868686;
}
.social span {
  font-size: 12px;
  color: #fff;
  line-height: 30px;
  display: block;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  margin-left: 30px;
  text-align: center;
  width: 120px;
}
.social .button {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  position: absolute;
  left: 0;
}
#twitter.social {
  background: #55d4ff;
}
#twitter .button {
  background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIk0bUGzexM4ydKW_sH8nBCU4ewnrDE6jaoKw0UDaVC8VOK90nZa-Wbhzi-ThiRj4yArpyjwFg7NMku5BKHohJDbSVEG5S5DoTYi3A9TWzE-PE61BOdQAZVsbGnpYLKleMhJqq1Sy3A4kL/s20/twitter.png) 5px 5px no-repeat;
  border: 1px solid #53d4ff;
}
#facebook.social {
  background: #354970;
}
#facebook .button {
  background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8jRamtZOv9sCsYmMfyiNLZ9MfKIRTExLazX2zKHwmMtMzHuZkeyk4hs0Ps8v_InFRiCBY9zpJwuZVok6v5SVmIVD2P6713GrnyUIwHECil-SHN6RCfhXsk5HA1OiDYliPWAFj4gU_6YXo/s20/facebook.png) 5px 5px no-repeat;
  border: 1px solid #354970;
}
#rss.social {
  background: #db6610;
}
#rss .button {
  background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMGWJYt5YgePbBBZwpZirILRNV2bHShPToongZq2-e8BDqOZsvdsmHve30u0237DvSn4qT4wiWnU9P713DskLJC1Ecur5nqnTyyhY5j0KW3z_oy4E8FnBwUtckZCPc7W0ltZbXMMnWHMP1/s20/rss.png) 5px 5px no-repeat;
  border: 1px solid #db6610;
}
#googleplus.social {
  background: #383638;
}#googleplus .button {
  background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQNusqQkqvvLEc6zOmV2mCQWulGPyAqwkX-OLLmDdhfaSR78Z1lSi8hfbx5v1cr78TxMYmfiJrdz_HjRnfrKWsbWQT1PEFC5Uomv-S-5K7ah1b6ZFoYGj5tVHX083Kjv4zuX5lu7RVUcau/s20/googleplus.png) 5px 5px no-repeat;
  border: 1px solid #383638;
}

Successivamente si cerca la riga </head> e, subito sopra, si incolla questo nuovo codice

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/><script type='text/javascript'>
$(document).ready(function() {
    $(&#39;.count&#39;).hide();
    $(&#39;.sociallink&#39;).hover(
     function() {    
      social_id = $(this).find(&#39;.social&#39;).attr(&#39;id&#39;);
      switch(social_id)
      {
        case &#39;twitter&#39;:
          new_textcolor = &#39;#55d4ff&#39;;
          new_text = &#39;Follower su Twitter&#39;;
          break;
        case &#39;facebook&#39;:
          new_textcolor = &#39;#354970&#39;;
          new_text = &#39;Amici su Facebook&#39;;
          break;       
        case &#39;rss&#39;:
          new_textcolor = &#39;#db6610&#39;;
          new_text = &#39;Iscritti ai feed&#39;;
          break;
        case &#39;googleplus&#39;:
          new_textcolor = &#39;#383638&#39;;
          new_text = &#39;Amici su Google+&#39;;
          break;       
      }
      $(this).find(&#39;.button&#39;).stop().animate({
        &#39;left&#39;: &#39;119px&#39;
      }, 700);
       $(this).find(&#39;span&#39;).stop().animate({
         &#39;margin-left&#39;: &#39;5px&#39;,
         &#39;color&#39;: new_textcolor
       }, 500);
       $(this).find(&#39;.social&#39;).stop().animate({
         backgroundColor: &#39;#fcfcfc&#39;
       }, 500);
       $(this).find(&#39;span&#39;).text(new_text);
       $(this).find(&#39;.count&#39;).stop().fadeIn(&quot;slow&quot;);
    },
    function(){
      social_id = $(this).find(&#39;.social&#39;).attr(&#39;id&#39;);
      switch(social_id)
      {
        case &#39;twitter&#39;:
          new_bgcolor = &#39;#55d4ff&#39;;
          new_text = &#39;Segui su Twitter&#39;;
          break;
        case &#39;facebook&#39;:
          new_bgcolor = &#39;#354970&#39;;
          new_text = &#39;Segui su Facebook&#39;;
          break;       
        case &#39;rss&#39;:
          new_bgcolor = &#39;#db6610&#39;;
          new_text = &#39;Iscriviti via RSS&#39;;
          break;
        case &#39;googleplus&#39;:
          new_bgcolor = &#39;#383638&#39;;
          new_text = &#39;Segui su Google+&#39;;
          break;       
      }
       $(this).find(&#39;.button&#39;).stop().animate({
        &#39;left&#39;: &#39;0&#39;
        }, 700);
      $(this).find(&#39;span&#39;).stop().animate({
         &#39;margin-left&#39;: &#39;30px&#39;,
        &#39;color&#39;: &#39;#ffffff&#39;
       }, 600);
      $(this).find(&#39;.social&#39;).stop().animate({
         backgroundColor: new_bgcolor
       }, 500);
      $(this).find(&#39;span&#39;).text(new_text);
      $(this).find(&#39;.count&#39;).stop().fadeOut(&quot;slow&quot;);
    });
});
</script>

Si salva il modello. La riga evidenziata di giallo rappresenta la libreria JQuery e può essere tralasciata se fosse già presente nel vostro modello. Le scritte in rosso saranno quelle visibili nel widget e possono essere personalizzate a piacere oltre ai codici dei colori per eventualmente modificare l'aspetto.

Ora si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e si incolla

<div class="wrap">
<a href="https://twitter.com/parsifal32" class="sociallink">
  <div id="twitter" class="social" style="background-color: rgb(85, 212, 255);">
    <div class="button" style="left: 0px;"></div>
    <span style="color: rgb(255, 255, 255); margin-left: 30px;">Seguimi su Twitter</span>
    <div class="count" style="display: none; opacity: 1;">753</div>
  </div>
</a>
<br />
<br />
<a href="https://www.facebook.com/ideepercomputeredinternet" class="sociallink">
  <div id="facebook" class="social" style="background-color: rgb(53, 73, 112);">
    <div class="button" style="left: 0px;"></div>
    <span style="color: rgb(255, 255, 255); margin-left: 30px;">Seguimi su Facebook</span>
    <div class="count" style="display: none; opacity: 1;">3407</div>
  </div>
</a>
<br />
<br />
<a href="http://feeds.feedburner.com/ideepercomputeredinternet/zUQN" class="sociallink">
  <div id="rss" class="social" style="background-color: rgb(219, 102, 16);">
    <div class="button" style="left: 0px;"></div>
    <span style="color: rgb(255, 255, 255); margin-left: 30px;">Iscriviti ai Feed</span>
    <div class="count" style="display: none; opacity: 1;">2200</div>
  </div>
</a>
<br />
<br />
<a href="https://plus.google.com/+ideepercomputeredinternet" class="sociallink">
  <div id="googleplus" class="social" style="background-color: rgb(56, 54, 56);">
    <div class="button" style="left: 0px;"></div>
    <span style="color: rgb(255, 255, 255); margin-left: 30px;">Seguimi su Google+</span>
    <div class="count" style="display: none; opacity: 1;">1022</div>
  </div>
</a>
<br />
<br />
</div>

Si salva e si posiziona in una sidebar. Dovranno essere inseriti gli URL della pagina Facebook, dell'account Twitter, della pagina brand di Google Plus e dei feed del blog. Si inseriscono manualmente anche i numeri dei follower nei rispettivi social network.
Fonte | Animated Social Icons CodePen -