Share Buttons via Font Awesome + Bootstrap o Custom Css senza plugin

Ciao! Stai per scoprire come avere dei bottoni di condivisione senza plugin, detti “Share buttons“, sul tuo tema grafico completamente responsive, senza l’ausilio di plugin esterni. In tempi in cui il Pagespeed – ovvero la velocità di caricamento di una pagina – è un valore aggiunto, questa guida ti farà risparmiare parecchi kilobyte e script di plugin esterni, il che velocizzerà il caricamento della pagina.

Ti basterà avere Font Awesome sul tuo tema – o tutt’al più aggiungerlo, scarica gratis la v. 4.7.0 – per avere fin da subito dei fantastici bottoni di condivisione. Se poi il tuo tema supporta anche Bootstrap e le sue griglie, sei a cavallo! Se non ce l’hai, non scoraggiarti: ti darò due righe di Codice Css e il risultato sarà garantito.

Share buttons fontawesome boostrap css

Share buttons font awesome boostrap css


 

 

Font Awesome + Bootstrap

Sfruttando appieno le classi di entrambi i framework, ho creato il codice per implementare da subito, con un semplice copia e incolla, i bottoni di condivisione senza plugin. All’interno vi sono dei comandi php, pertanto affinché il tutto funzioni dovrai incollare il seguente codice nel file php che richiama i post nel tuo blog, generalmente chiamato single.php, subito dopo <?php the_content(); ?>

N.b. Meglio apportare questo genere di modifiche in un Tema Child. Leggi il nostro articolo sul Tema Child.

Si fa riferimento alla Versione 3.x. Per la Versione 4.x guarda la documentazione di Bootstrap 4.x

Seguendo lo schema sopra, puoi aggiungere il bottone di Twitter:

Font Awesome + Css aggiuntivo

Sul file del tuo tema single.php (in genere è chiamato così ma alcuni sviluppatori utilizzano altri nomi) incolla dopo <?php the_content(); ?> il seguente codice html combinato con php:

Le icone Font Awesome possono essere richiamate con la classe “fa” o “fab”, a seconda della versione installata.

Bottoni di condivisione: icone e css custom

Puoi usare anche delle icone personalizzate! Ti basterà sostituire “<i class=”fab fa-facebook”></i>” col percorso assoluto dell’icona sul tuo server (dopo l’upload delle icone ovviamente), in questo modo:

Ti suggerisco delle icone di 64 x 64 pixel, ci sono siti appositi su cui scegliere il proprio set di icone gratuitamente e secondo i propri gusti (tipo flaticon.com). Se sceglierai questa soluzione, potrai usare lo stesso codice html/php di cui sopra e il seguente codice css:

Piccola chicca: vuoi aggiungere una piccola animazione al passaggio del mouse? All’elemento <li> aggiungi la classe “scale”, così: <li class=”scale”> e poi aggiungi il seguente codice css:

Conclusioni

Spero che la tua reazione finora sia stata “WOW!!!!”. Ho implementato questo sistema di bottoni di condivisione senza plugin anche in siti “seri” e devo dire che ho alleggerito non di poco “il peso” di risorse css e javascript.

Adesso fammi sapere qui nei commenti se anche tu hai implementato i bottoni di condivisione senza plugin. Alla prossima guida! Ah dimenticavo… condividi! 😉

Condividi sui Social



Potrebbero interessarti anche...



Lascia un commento

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