Pubblicato il 28/09/13e aggiornato il

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

icone-social-network

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

vai-al-widget-blogger

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

modello-blogger

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://lh3.googleusercontent.com/-ewWYONN5ztA/UkaAxnvqbCI/AAAAAAAAjoY/2YZDoZbiJPA/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://lh5.googleusercontent.com/-TUlnvO0yToo/UkaAzlyQdyI/AAAAAAAAjog/hWbAEoU4QIw/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://lh3.googleusercontent.com/-PYSM7ry8sHI/UkaA1TdLcTI/AAAAAAAAjoo/eORM9CyCw2Q/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.





5 commenti :

  1. ciao ernesto vorrei inserire un testo scorrevole nel blog sotto il titolo ma non riesco a trovare nulla...grazie

    RispondiElimina
  2. Sotto il titolo è difficile ma si può fare. Ci sono i widget scorrevoli
    http://www.ideepercomputeredinternet.com/2013/09/widget-scorrevoli-blogger.html
    Se vuoi solo delle scritte puoi provare con queste
    http://www.ideepercomputeredinternet.com/2009/06/inserire-scritte-ed-immagini-scorrevoli.html
    @#

    RispondiElimina
  3. ciao vorrei inserire i bottoni di share del singolo post, ma non ci riesco...mi condivide sempre tutto il blog, mi potresti aiutare? ho provato a usare i codici di questo articolo ma nulla, andando il Blog1 infatti la stringa di codice b:includable id='post' var='post' non riporta a lato la freccia nera per espandere e ho n.2 stringhe class='post-footer' in qualsiasi delle due inserisco il codice per condividere non mi fa visualizzare nulla, usando il widget interno di blogger mi fa condividere solo intero blog. insomma un casino, potresti darmi una mano? magari posso inviarti il codice cosi mi dici dove sbaglio..

    RispondiElimina
    Risposte
    1. Il problema non sono i bottoni ma la mancanza di metatag di Facebook e della descrizione di Google. Segui questi post
      http://www.ideepercomputeredinternet.com/2013/03/open-graph-facebook.html
      http://www.ideepercomputeredinternet.com/2012/03/come-personalizzare-le-preferenze-di.html
      Il secondo limitatamente all'inserimento della descrizione dei post tramite l'Editor di Blogger
      @#

      Elimina
  4. Ho provato mille metodi per inserire i bottoni, ma mi rimangono sempre quelli piccolini prestabiliti di blogger.

    Come fare?
    Il mio blog è felicementesposa.blogspot.it

    RispondiElimina

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.