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

Ciao! Stai per scoprire come avere dei bottoni di condivisione, detti “Share buttons“, sul tuo tema grafico completamente responsive, senza l’ausilio di plugin esterni. In tempi in cui il Pagespeed, ovvero un sito leggero e performante, è un valore aggiunto, questa guida ti farà risparmiare parecchi kb 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.

I tuoi utenti potranno condividere i tuoi post su Facebook, WhatsApp, Telegram, Email e Twitter.

Share buttons fontawesome boostrap css

Share buttons font awesome boostrap css

Font Awesome + Boostrap

Sfruttando appieno le classi di entrambi i framework, ho creato il codice per implementare da subito, con un semplice copia e incolla, i share buttons. 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(); ?>

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

Come saprai il Css aggiuntivo lo trovi sullo strumento “Personalizza” di WordPress. Incolla il seguente codice Css:

(Aggiornato il 08/08/20, sostituito il bottone Mail con Twitter)

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:

Bene, se non hai commesso errori dovrebbe funzionare tutto alla perfezione. Volendo puoi sostituire le icone di Font Awesome con delle piccole icone personalizzate, magari delle piccole png 20×20 con background trasparente; oppure delle immagini più accattivanti, nel qual caso ti consiglio di rimuovere il colore di background (style=”background: #123456;”).

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

Conclusioni

Se la tua reazione finora è stata WOW (me lo auguro) beh adesso ti starai chiedendo “E perché qui non vedo icone?” ed avresti pure ragione. In realtà ho implementato questo sistema in altri siti professionali, questo blog lo uso solo per passatempo e preferisco impiegare il mio tempo nei contenuti piuttosto che negli aspetti grafici/tecnici.

Edit: le ho aggiunte, anche per darti una dimostrazione pratica (aggiungendo una piccola animazione al passaggio del mouse, un effetto hover).

Fammi sapere qui nei commenti se hai implementato i bottoni o se qualcosa (oddio spero di no) ha fatto cilecca.


Potrebbe interessarti anche...



Go WordPress

Questo Blog nasce dalla passione per WordPress. Nel tempo libero cerco di arricchirlo di nuove Guide. Se ti abboni alla Newsletter sarai sempre aggiornato sui nuovi contenuti (in regalo un Ebook fantastico!). Se ti va, puoi offrirmi un caffè seguendo il link sulla barra laterale. Buona lettura da Lino Tumminieri. Go WordPress!