Pubblicato il 27/06/10 - aggiornato il  | 4 commenti :

Come personalizzare e rendere più visibili i bottoni ufficiali di condivisione di Blogger.

Ricordo che questi pulsanti servono per condividere ciascun articolo in social network come Facebook e Twitter, in servizi come Blogger e Google Buzz oltre all'opzione di inviarlo come email. Mi sono già occupato di questo argomento in due diversi articoli.


Come inserire i bottoni di condivisione automaticamente su Blogger -
Come personalizzare i pulsanti di condivisione -
Fino a poco fa per inserire questi bottoni dovevamo andare su Blogger in Draft, adesso è possibile farlo anche usando la normale Bacheca di Blogger andando in Design > Post sul blog > Modifica, mettendo la spunta a Mostra i pulsanti per la condivisione e cliccando su Salva in fondo alla pagina.
Rimando ai due articoli precedenti per ulteriori informazioni su questa nuova feature. La cosa che salta agli occhi è che questi bottoni sono decisamente anonimi. E' chiaro che sono stati creati per andar bene su tutti i blog ma sono poco visibili e quindi, se non si modificano, saranno probabilmente poco utilizzati.
Per renderli un po' più vivaci possiamo andare su Design > Modifica HTML, espandere i modelli widget e cercare la riga
<div class='post-footer'>
immediatamente sotto si può incollare un codice come il seguente e salvare il modello.

<!-- BOTTONI CONDIVISIONE INIZIO-->
<span style='font-size:120%;font-weight:bold;vertical-align:middle;padding-right:6px; color:#940F04;'>Condividi:</span><div class='post-share-buttons' style='background:#FDBCB7; padding:4px;'>
<b:include data='post' name='shareButtons'/>
</div>
<!--BOTTONI CONDIVISIONE FINE-->


Si possono fare tutte le modifiche che vogliamo in rapporto all'aspetto e ai colori del nostro blog. Ho evidenziato di rosso quelle più importanti che sono
  • 120% - dimensione dei caratteri della scritta da inserire accanto ai bottoni di condivisione
  • 6px - che sono il numero di pixel tra la scritta e i bottoni di condivisione
  • #940F04 - è il colore della scritta
  • Condividi: - è l'espressione inserita che può essere sostituita da un'altra
  • #FDBCB7 - è il colore dello sfondo dei bottoni per renderli più visibili e che deve essere intonato al nostro blog
  • 4px - è la grandezza del padding cioè la dimensione dello sfondo all'esterno dei bottoni
Ricordo che, come tutte le personalizzazioni di Blogger, non è assolutamente detto che il risultato sia lo stesso per tutti i modelli. Ci potrebbero essere delle incompatibilità che ne impediscono la corretta visualizzazione.
Con questo codice i bottoni saranno visibili alla fine del post in tutte le pagine del blog e avranno questo aspetto
bottoni-condivisione
Saranno quindi decisamente più carini e visibili. Se si vuole togliere qualche pulsante si può utilizzare il procedimento illustrato in questo post. Essendo una funzionalità nativa di Blogger non incide significativamente sul caricamento della pagina e i pulsanti possono anche essere lasciati in homepage e nelle pagine di archivio.
Coloro che avessero modelli che non lo consentono dal punto di vista estetico possono rimpiazzare il codice precedente con quest'altro


<!-- BOTTONI CONDIVISIONE INIZIO-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span style='font-size:120%;font-weight:bold;vertical-align:middle;padding-right:6px; color:#940F04;'>Condividi:</span><div class='post-share-buttons' style='background:#FDBCB7; padding:4px;'>
<b:include data='post' name='shareButtons'/>
</div>
</b:if>
<!--BOTTONI CONDIVISIONE FINE-->


In questo caso i bottoni saranno visibili solo nei singoli articoli, fermo restando tutte le opzioni di personalizzazione appena illustrate.
Questo articolo mi è stato ispirato da Giorgiogal di Genitori Sottratti.


4 commenti :

  1. allora messo tutto ok, l'unica cosa avendo io tolto l'ultimo bottone mi è rimasto lo spazio libero... e nn so come restringere lo sfondo :)

    RispondiElimina
  2. @soffio di dea
    Anche io avevo lo stesso problema. Al momento non so come risolverlo. Ti conviene rimettere il pulsante eliminando quella riga che hai inserito nella sezione b:skin.
    Ciao

    RispondiElimina
  3. Ho una domanda come sei riuscito a mietere i buttoni per condivisione su video blog perché io no riesco fare ...

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy