Social Sharing: Bottoni di Condivisione in CSS ed HTML

Pubblicato da Yuri Carlenzoli | 22 dicembre 2013

Social Sharing sono dei bottoni per permettere la condivisione di pagine web fatti in CSS ed HTML, di aspetto gradevole, aumentano la velocità e permettono agli utenti di condividere.

Bottoni-Condivisione-Social-Sharing

A volte per aumentare la velocità di siti internet bisogna utilizzare tecniche particolari, a volte bisogna rinunciare a qualcosa, ed altre, come ad esempio con i bottoni di Social Sharing, per ridurre il numero di richieste HTTP si può evitare di fare sprite CSS, anche se è semplice fare sprite CSS online, installandoli non si rinuncia ai bottoni di condivisione dei social network, utili, ed allo stesso tempo di bell'aspetto.

Come inserire i bottoni Social Sharing in un sito internet

Seppur siano fatti di codice CSS ed HTML, quindi richiedono la modifica del codice delle pagine web, il codice dei bottoni Social Sharing oltre che essere molto semplice, elementare, è già fatto e la sua installazione è davvero elementare, riferirla però è doveroso.

Una volta scaricato l'archivio dei bottoni Social Sharing vi troverete dentro 4 files, quello HTML è per provare i bottoni e dove potrete vedere il codice, i due file CSS in teoria sarebbero da includere nella parte alta delle pagine web (prima di </head>), in pratica non solo si possono unire in uno ma si possono aggiungere le regole al proprio file CSS così si evitano una o due richieste HTTP, la velocità della pagina quindi anche l'usabilità ne risentirà positivamente, seppur minimamente.

Nel file HTML presente nell'archivio c'è solo l'esempio, dove, viene mostrato che, se si volesse ad esempio inserire i bottoni di condivisione di Facebook, Twitter e Google+, in questo ordine, da sinistra a destra, aggiungendo il link al bottone in pratica il codice da mettere nel sorgente della pagina sarebbe:

<p>
<button class="btn btn-tweet" onclick="location.href='https://twitter.com/intent/tweet?text=TITOLO&url=URL';">Tweet</button>
<button class="btn btn-facebook"onclick="location.href='http://www.facebook.com/sharer/sharer.php?u=URL';">Facebook</button>
<button class="btn btn-google"onclick="location.href='https://plus.google.com/share?url=URL';">Google+</button>
</p>

Ovviamente al posto delle parti di codice dove c'è scritto URL dovrete inserire l'indirizzo internet della pagina da condividere, e, dove c'è TITOLO (nel link di condivisione di Twitter) dovrete inserire il testo che sarà il tweet, questi, non farete fatica ad inserirli con PHP e funzioni dei CMS se ne usaste uno.

Seppur purtroppo al momento i Social Sharing siano predisposti "solo" per Twitter, Google+, Facebook, LinkedIN, Pinterest e Github analizzando il codice si capirà come realizzarne altri, altre caratteristiche "tecniche" non ne hanno a parte che passando il mouse sopra il bottone esso cambia colore (c'è l'hover nel CSS) ed è perfettamente a tema con il social network e con l'altro colore del bottone, che ne dite, voi li userete in qualche vostro progetto web?

Da qui potete fare il download dei bottoni Social Sharing.

2 commenti su “Social Sharing: Bottoni di Condivisione in CSS ed HTML

  1. Giovanni Di Giovanni

    Ottimo articolo.
    Sto cercando di implementare questi pulsanti per togliere addtoany, ma ciò che per te è stata la cosa più facile, con il mio Drupal sembra la cosa più difficile: non riesco a passare le variabili TITLE e URL.
    Mi stai facendo impazzire.
    Giovanni 🙂
    P.S. scusa se sto spulciando troppo questa pagina

  2. yuri Autore del post

    Ciao Giovanni,
    spulcia nel codice della documentazione di Drupal che sono ben elencate le funzioni 😉

    Yuri.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Moderazione dei commenti attiva. Il tuo commento non apparirà immediatamente.