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

Pubblicato 11 Giugno 2020 · Aggiornato 6 Giugno 2023

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 font awesome boostrap css

Indice Argomenti

Font Awesome + Bootstrap
Font Awesome + Css aggiuntivo
Bottoni di condivisione: icone e css custom
Conclusioni

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.

<h4 class="text-center">Condividi</h4>

<!-- 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();?>&amp;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 -->

<h4 class="text-center">Condividi</h4>

<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>

<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>

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:

<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>

<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">

</div>

Font Awesome + Css aggiuntivo

/* GoWp Share buttons */

.gowp-shares {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  }

.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;}

/* /GoWp Share buttons */

/* GoWp Share buttons */

.gowp-shares {

list-style: none;

margin: 0;

padding: 0;

display: flex;

justify-content: space-around;

align-items: center;

}

.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;}

/* /GoWp Share buttons */

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:

<!-- 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();?>&amp;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 -->

</li>

<li><a title="Condividi su WhatsApp" target="_blank" href="https://api.whatsapp.com/send?text=<?php the_permalink();?>" data-action="share/whatsapp/share">

</li>

</li>

</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">

</li>

</ul>

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

<i class="fab fa-facebook"></i>

oppure

<i class="fa fa-facebook"></i>

oppure

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:

...

<li>
 <a title="Condividi su Facebook" target="_blank" href="https://www.facebook.com/sharer?u=<?php the_permalink();?>&amp;t=<?php the_title(); ?>">
 <img src=".../wp-content/uploads/2022/01/mia-icona.png" alt="" />
 </a>
</li>

...

...

<li>

</a>

</li>

...

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:

/* GoWp Share buttons */

.gowp-shares {
	padding: 0;
	margin: 0; 
	list-style: none; 
	display:flex; 
	justify-content: center; 
	align-items: center;
	}
.gowp-shares li {
	border: 3px solid #ddd; /* un bordo grigio chiaro su temi a sfondo scuro */
	padding: 0;
	margin: 10px;
	border-radius: 100%;
	}
.gowp-shares li img {
	width: 50px; 
	height: auto;
	vertical-align: middle;
	}
/* Mobile Devices, Tablets Ipads */

@media only screen and (max-width: 768px) {
  .gowp-shares li {padding: 2px; margin: 5px;}
  .gowp-shares li img {width: 35px;}
}

/* /GoWp Share buttons */

/* GoWp Share buttons */

.gowp-shares {

padding: 0;

margin: 0;

list-style: none;

display:flex;

justify-content: center;

align-items: center;

}

.gowp-shares li {

border: 3px solid #ddd; /* un bordo grigio chiaro su temi a sfondo scuro */

padding: 0;

margin: 10px;

border-radius: 100%;

}

.gowp-shares li img {

width: 50px;

height: auto;

vertical-align: middle;

}

/* Mobile Devices, Tablets Ipads */

@media only screen and (max-width: 768px) {

.gowp-shares li {padding: 2px; margin: 5px;}

.gowp-shares li img {width: 35px;}

}

/* /GoWp Share buttons */

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:

/* Animazione hover */

.scale {transition: all 0.5s ease-in-out;}
.scale:hover {transform: scale(1.1);}

/* Animazione hover */

.scale {transition: all 0.5s ease-in-out;}

.scale:hover {transform: scale(1.1);}

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! 😉