Icone per condividere i post su Facebook, Google+ e Twitter da inserire nel modello di Blogger.

Come installare nel modello di Blogger delle icone personalizzabili che se cliccate permettano la condivisione automatica degli articoli precompilando il modulo di condivisione su Twitter, Facebook e Google+.

Qualche anno fa andavano di moda i cosiddetti bottoni di voto che sulla scia di Digg a livello mondiale e di OkNotizie, Diggita e altri servizi suoi emuli a livello nazionale, permettevano ai blogger di postare i propri articoli e ai visitatori di votarli direttamente cliccando l'icona relativa. Ora da una parte gli aggregatori hanno molta meno rilevanza e i social network più importanti hanno rilasciato dei bottoni ufficiali di diverso aspetto e anche con contatore per condividere l'articolo visualizzato.

Si sta quindi assistendo a sostanzialmente due diversi tipi di interazioni con i vari Facebook, Google+ e Twitter. Il primo consiste nel posizionare nella sidebar o nel modello i loro bottoni ufficiali e il secondo semplicemente nell'inserire una icona con il link al nostro account o alla nostra pagina. Diciamo che con questo post ho in mente di presentare una terza via con queste funzionalità:

1. Si potranno scegliere a piacimento le icone di Facebook, Twitter e Google Plus
2. Chi cliccherà sulla icona non sarà indirizzato alla pagina del nostro account ma aprirà un modulo precompilato per la condivisione dell'articolo in una finestra popup (Twitter) o a tutta pagina (Facebook e Google Plus).
3. Le condivisioni effettuate con questo sistema andranno ad aggiungersi ai Mi Piace e ai +1 di Facebook e Google+ aumentando il numero del contatore se presente nel blog
4. Si potranno settare il numero di pixel con cui distanziare le icone
5. Sarà possibile aggiungere icone di altri servizi magari anche solo linkando l'account

Le icone che ho scelto sono di 48 pixel e hanno questo aspetto

ma come detto possono essere scelte anche di diverse dimensioni. Dopo aver salvato il template si va su Modello > Modifica HTML > Vai al widget > Blog1

Si scorre il codice fino a trovare la riga
<b:includable id='post' var='post'>
Si clicca sulla freccetta nera posta alla sua sinistra per visualizzare interamente il codice



Si cerca quindi la riga
<div class='post-footer'>

e, subito sopra o subito sotto, si incolla questo nuovo codice

<!-- Icone Sociali Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<table>
    <tr>
      <td><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Condividi su Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv7UIObV-ACcUFp3E7MtPekyCAKKLfFI-sJ7QOHVH7_L4WhDmwIf4LBTmI0R4zVMdsi88J5o88NwrmvbGJL5HogTkdUxSMSj-8k9tIQV0NEPsOo-vFQlaET_cQ2vkmDOHDhA9lk3Brq76j/s48/facebook-icon.png' style='margin:5px 20px 5px 10px;'/></a></td>
      <td><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi su Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6L5PCIh_wk9Bl_ksUbtafANvgBzT1X6cTZ-M-Kfp7U8z6cgleMMYHr2fWJSfMUwkCK99XdJRUjoMet5yxjYu6nEFEaYUcRsQC0Jx2uvZP7qyAtUECt5ZzkKHWILajCafpWa_Y_jUWaey3/s48/google-icon.png' style='margin:5px 20px 5px 10px;'/></a></td>
      <td><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url' target='_blank' title='Condividi su Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpv3s6kgDXMDOf_JrJqiXJ3ZDNaQm_6f3zZ-fkOUAPksWHtv4NLeRZNehlIoCkGRPtW_08JDkAh8AGf6xASBYBJ3taEUwFhe6U5gRiGMqJGrdskgz4sntOwk7q3APchpaujHSE46Vtmbl3/s48/twitter-icon.png' style='margin:5px 20px 5px 10px;'/></a></td>
    </tr>
</table> 
</b:if>
<!-- Icone Sociali Fine -->

Si salva il modello. Le icone sociali saranno visibili alla fine di tutti gli articoli

PERSONALIZZAZIONI DELLE ICONE

Gli indirizzi delle icone sono stati colorati di viola e potranno essere sostituiti da altri URL di immagini che ritenete più adatte. Ciascuna delle tre icone ha dei margini personalizzabili. Ricordo che la configurazione proposta margin:5px 20px 5px 10px; determina una distanza di 5 pixel dalla parte alta, una di 20 pixel dalla destra, una di 5 pixel dal basso e una di 10 pixel dalla sinistra. In sostanza il primo numero si riferisce alla parte alta e gli altri alle altre direzioni in senso antiorario. Si tratta di un codice di una tabella di una riga e tre colonne. Potranno essere aggiunte altre colonne con icone in ogni cella seguendo la stessa sintassi. Concludo ricordando che si possono ovviamente anche modificare le espressioni colorate di blu che si visualizzano al passaggio del mouse.