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 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(); ?>
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<h4 class="text-center">Condividi</h4> <br> <!-- Share buttons via Go WordPress --> <div class="row text-center" style="line-height: 40px;"> <div class="col-xs-3" style="background: #4a9eff;"><a style="display: block;" title="Condividi su Facebook" href="https://www.facebook.com/sharer?u=<?php the_permalink();?>&t=<?php the_title(); ?>" target="_blank" rel="noopener noreferrer"><i class="fa fa-facebook" style="color: #fff; font-size: 20px;"></i></a></div> <div class="col-xs-3" style="background: #3bff58;"><a style="display: block;" title="Condividi su WhatsApp" target="_blank" href="https://api.whatsapp.com/send?text=<?php the_permalink();?>" data-action="share/whatsapp/share"><i class="fa fa-whatsapp" style="color: #fff; font-size: 20px; font-weight: bold;"></i></a></div> <div class="col-xs-3" style="background: #0088cc;"><a style="display: block;" title="Condividi su Telegram" target="_blank" href="https://telegram.me/share/url?url=<?php the_permalink();?>&text=<?php the_title(); ?>"><i class="fa fa-telegram" style="color: #fff; font-size: 20px;"></i></a></div> <div class="col-xs-3" style="background: #b7b7b7;"><a style="display: block;" title="Invia in email" target="_blank" href="mailto:?subject=<?php the_title(); ?>&body=<?php the_permalink();?>"><i class="fa fa-envelope-o" style="color: #fff; font-size: 20px;"></i></a></div> </div> <!-- /Share buttons --> |
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:
|
1 2 3 |
<div class="col-xs-3" style="background: #4a9eff;"> <a style="display: block;" title="Condividi su Twitter" target="_blank" href="http://twitter.com/share?text=<?php the_title(); ?>&url=<?php the_permalink();?>&hashtags=Esempio1,Esempio2"><i class="fa fa-twitter"></i></a> </div> |
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)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.gowp-shares { list-style: none; margin: 0; padding: 0; display:flex; justify-content: space-around; } .gowp-shares li { width: 20%; line-height: 60px; } .gowp-shares li a { display: block; text-decoration: none; color: #fff; font-size: 20px; font-weight: bold; text-align: center; transition: all 1s ease-in-out; } .gowp-shares li a:hover {background: black;} .gowp-shares li:nth-child(1) {background: #4a9eff;} .gowp-shares li:nth-child(2) {background: #3bff58;} .gowp-shares li:nth-child(3) {background: #0088cc;} .gowp-shares li:nth-child(4) {background: #b7b7b7;} .gowp-shares li:nth-child(5) {background: #4a9eff;} |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!-- Share buttons via Go WordPress --> <ul class="gowp-shares"> <li><a title="Condividi su Facebook" target="_blank" href="https://www.facebook.com/sharer?u=<?php the_permalink();?>&t=<?php the_title(); ?>"> <i class="fa fa-facebook"></i></a></li> <li><a title="Condividi su WhatsApp" target="_blank" href="https://api.whatsapp.com/send?text=<?php the_permalink();?>" data-action="share/whatsapp/share"> <i class="fa fa-whatsapp"></i></a></li> <li><a title="Condividi su Telegram" target="_blank" href="https://telegram.me/share/url?url=<?php the_permalink();?>&text=<?php the_title(); ?>"> <i class="fa fa-send"></i></a></li> <li><a title="Condividi in Email" target="_blank" href="mailto:?subject=<?php the_title(); ?>&body=<?php the_permalink();?>"> <i class="fa fa-envelope-o"></i></a></li> <li><a title="Condividi su Twitter" target="_blank" href="http://twitter.com/share?text=<?php the_title(); ?>&url=<?php the_permalink();?>&hashtags=hashtag1,hashtag2,hashtag3"> <i class="fa fa-twitter"></i></a></li> </ul> <!-- /Share buttons --> |
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.
|
1 2 3 4 5 |
<i class="fab fa-facebook"></i> oppure <i class="fa fa-facebook"></i> |
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.
