Pubblicato il 27/11/12e aggiornato il

Pulsanti con contatore di Twitter, Facebook e Google Plus per la sidebar di Blogger.

Come inserire dei pulsanti con contatore in tutte le pagine di Blogger senza modificare il modello.
Dopo che molti lettori mi hanno chiesto come abbia fatto a inserire i pulsanti di condivisione di Facebook, Twitter e Google Plus nella sidebar di destra mi sono finalmente deciso a farci un post. Non illustrerò esattamente il procedimento che ho seguito visto che i javascript di Google Plus e di Facebook li ho inseriti nel modello dato che mi servono anche per la altri widget come il Like Box. Il codice che vado a presentare è invece funzionante senza dover modificare il template.

La particolarità di questi bottoni è che sono visibili in tutte le pagine del blog e permettono quindi di condividere oltre ai post anche le pagine di etichette, quelle di archivio e la homepage.

bottoni-condivisione-social-network

L'unica operazione che occorre fare è quella di creare una applicazione per Facebook che è diventata necessaria per installare i bottoni con questa modalità. Per farlo si accede semplicemente a Facebook Developers con il nostro account Facebook. Si va in alto a destra su Crea Applicazione, si digita il nome della App, si mette la flag sulla accettazione dei Termini e delle Condizioni e si clicca su Continua.

Si va quindi su Edit App per compilare i campi essenziali tra cui l'URL del nostro sito e il suo nome

applicazione-facebook

Da notare che su App Domains non si mette http:// che invece va inserito in Indirizzo del sito. Si va su Salva modifiche e nel frontespizio saranno visibili un numero seriale e una stringa alfanumerica

id-applicazione

Si tratta dell'App ID e dell'App Secret. In questa sede quello che ci serve è solo l'App ID che deve essere copiato per poi essere inserito nel codice. Si va su Layout > Aggiungi un gadget > HTML/Javascript e in Sezioni del sito si incolla appunto questo codice

<style type="text/css">
.tabellabottoni {
display:block;
float:left;
}
</style>
<table cellpadding='0' cellspacing='0' class='tabellabottoni'>
<tr> 
<td style='padding-top: -1px;'> 
<a class='twitter-share-button' data-count='vertical' data-via='parsifal32' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>
    </td>
    <td style='padding-left: 32px; padding-top: -3px;'>
    <script type='text/javascript'>
//<![CDATA[
  window.___gcfg = {lang: 'it'};
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
//]]>
</script>
     <g:plusone size='tall'/>
    </g:plusone></td>
<td style='padding-left: 32px; padding-top:-4px;'>
<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 = "//connect.facebook.net/it_IT/all.js#xfbml=1&appId=479289442099719";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class='fb-like' data-layout='box_count' data-send='false' data-show-faces='false' data-width='55'
expr:href='data:post.url'/>
    </div></td>
  </tr>
</table>

Si salva dopo aver opzionalmente inserito anche un titolo. Le modifiche fondamentali sono colorate di viola e riguardano il nome utente di Twitter e l'ID della applicazione su Facebook. I parametri in rosso servono per allineare e distanziare adeguatamente i vari bottoni.

Nel codice proposto i pulsanti sono stati posizionati a una distanza di 32 pixel uno dall'altro tramite il tag padding-left. Se la larghezza della sidebar è piccola si può diminuire questo numero. L'allineamento orizzontale è stato invece eseguito operando su padding-top. Inserendo dei numeri positivi si abbassa il relativo pulsante che invece viene alzato se si mettono dei numeri negativi. Il settaggio può variare da modello a modello. Questa metodologia può essere usata anche per posizionare i bottoni di alla fine o all'inizio del post. Volendo si possono aggiungere anche pulsati o icone di altri social considerando che è stato usato un codice di una tabella a una riga e che si possono aggiungere altre colonne.






21 commenti :

  1. Proprio quello che cercavo e che ti avevo chiesto. Grazie, Ernesto.

    RispondiElimina
  2. Ciao,
    perdona l'OT sapresti come aumentare lo spazio dei commenti su blogspot (adesso limitato a poco più di 4000 e qualcosa)?

    A presto,
    S

    RispondiElimina
    Risposte
    1. @SalvatoreDagostino
      Su Blogger ci sono poche limitazioni ma queste sono difficili da superare
      http://www.ideepercomputeredinternet.com/2011/03/quali-sono-i-limiti-massimi-dell-di.html

      "limite massimo di 4.096 caratteri per ciascun commento"

      Elimina
  3. ciao Ernesto, una domanda: come si può pubblicare i contenuti di Twitter e Facebook su Google+ (non viceversa)? grazie

    RispondiElimina
    Risposte
    1. Questo commento è stato eliminato dall'autore.

      Elimina
    2. @GaiaVincenzi
      Con i dispositivi mobili si può usare Multipost
      http://www.ideepercomputeredinternet.com/2012/09/multipost-android-googleplus-facebook-twitter.html
      mentre Hootsuite può essere utile per pubblicare i feed di un social su un altro
      http://www.ideepercomputeredinternet.com/2012/07/hootsuite-googleplus-pagine-brand-business.html
      http://www.ideepercomputeredinternet.com/2012/05/hootsuite-per-postare.html

      Elimina
    3. grazie. un'ultima cosa e poi non ti rompo più. sto realizzando uno scrapbook di 5 immagini animate come il tuo sul profilo di Google+. utilizzando gifninja come suggerito in un tuo post, non mi fa caricare però immagini se non inferiori a 20MB.. le mie, già ridimensionate a 150px per 150px superano sempre i 20MB e non me le accetta... come posso ovviare?

      Elimina
    4. @GaiaVincenzi
      Prova a usare un programma di grafica come Gimp o Photoshop però non sono un esperto in questo campo

      Elimina
  4. Ciao Ernesto,
    per eseguire questa operazione occorre obbligatoriamente verificare il proprio account tramite carta di credito o numero di telefono, giusto?

    RispondiElimina
    Risposte
    1. @ Startfromscratch
      Dai commenti credo che solo coloro che abbiano verificato l'account mediante codice inviato per SMS al cellulare possano creare delle applicazioni. Insomma Facebook vuol conoscere le identità di chi crea app. Per Twitter invece non ci sono problemi

      Elimina
  5. Ciao Ernesto, ma una volta inserito i pulsanti con i contatori in un sito e creata l'applicazione come faccio a collegare ad esempio un mi piace ricevuto alla mia pagina Facebook? Grazie

    RispondiElimina
    Risposte
    1. @# Non mi risulta si possano collegare i mi piace ricevuti da altri con la propria pagina facebook. Le pagine che hanno ricevuto un Mi Piace avranno un link visibile nella Home di chi l'ha messo e potenzialmente in quella di tutti i suoi amici.

      Elimina
  6. Ciao Ernesto, sono Giorgio. Mi sono letto attentamente questo tuo post su Pulsanti con contatore di Twitter, Facebook e Google Plus per la sidebar di Blogger. In special modo la mia attenzione è stata data al paragrafo che spiega tutta la procedura di attivavazione della App su Fb. Bene, credo di aver fatto tutto correttamente quanto da te descritto. Ho scelto di fare alcune prove sul blog di prova e anche sul blog ufficiale per quanto riguarda l'applicazione dei social plugins. Ho scelto il Like box, e le provate tutte dopo aver inserito il link primario della mia pagina, con HTML5, l'Iframe, ma non si evidenzia mai il box. Mi dà sempre questa risposta: "Il parametro `href` deve fare riferimento a una pagina di Facebook valido, ma "https://www.facebook.com/giorgioangeloiacono" non è una pagina di Facebook valido." Ora, er quanto mi riguarda quel link per me è valido. Evidentemente se c'è l'errore io non riesco a scovarlo. Tu puoi essermi d'aiuto, gentilmente. Grazie!

    RispondiElimina
    Risposte
    1. Mi sembra di essere incappato anch'io in un errore come quello che hai descritto. Hai inserito i metatag di Facebook Nel modello? Hai compilato i campi della applicazione? Prova a cambiare dominio. Può darsi che funzioni solo con il canonico .com oppure no.... L'unica è testare
      @#

      Elimina
  7. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  8. Salve
    Sono il ragazzo che le ha scritto su facebook
    Come vede, credo di aver trovato il gadget in questione. Mi faccia sapere come risolvere l mio problema
    grazie

    RispondiElimina
    Risposte
    1. Twitter ha modificato le API e quindi il pulsante con contattore non è più disponibile mentre quello di Facebook e Google+ dovrebbero continuare a funzionare. Se il problema è quello di Twitter non si può fare altro che aspettare che i suoi sviluppatori offrano una alternativa al contatore. Se invece non ti funzionano gli altri contatori fammelo sapere e vedrò di risolvere.
      P.S. Il contatore di Twitter non funziona neppure a me come puoi vedere nella sidebar
      @#

      Elimina
    2. poi mi sono accorto di aver sbagliato widget. Quello che non mi funziona non è questo, ma uno praticamente uguali, ma di quelli che appaiono sotto i post (anche nella home). La cosa buffa è che questo gadget non si visualizza dal mio portatile, ma dal fisso si. Come mai?

      Elimina
    3. Per vedere un gadget non solo da fisso ma anche da mobile bisogna incollare il codice due volte. Ecco due o tre link di esempio con i social che uso in questo sito
      http://www.ideepercomputeredinternet.com/2015/07/icone-sociali-blogger-mobile.html
      http://www.ideepercomputeredinternet.com/2015/07/blogger-icone-social-network-mobile-desktop.html
      http://www.ideepercomputeredinternet.com/2015/07/sprite-css-immagini-blogger-seo.html
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.