In questo template abbiamo realizzato un tasto per la condivisione sui social che “cattura” dinamicamente titolo e immagine del post tramite URL della pagina in cui è inserito. Il tasto lo puoi vedere in azione in questa pagina in basso a destra.
Per catturare l’immagine in evidenza dell’articolo, lo script usa il meta tag Open Graph og:image. Dovrebbe essere già presente sul tuo sito se utilizzi un plugin per la SEO. Tuttavia se non è presente, lo script funziona ugualmente, condividendo soltanto le informazioni che trova.
È stato ideato per condividere sui social e app di messaggistica principali, ovvero Facebook, Twitter, Telegram e WhatsApp, formattando in grassetto il titolo e in corsivo il messaggio sulle chat. Oltre alle informazioni del post, il tasto aggiunge un messaggio personalizzato per invogliare l’apertura del link. Puoi impostarlo cambiando questo valore nel codice Javascript
var message = "Ciao! Volevo condividere con te questo interessante contenuto. Dai un'occhiata e fammi sapere cosa ne pensi!";
Le icone social, all’apertura, sono disposte in modo da circondare il tasto principale. Puoi modificare la posizione per esempio per disporle verticalmente o orizzontalmente, cambiando i seguenti valori. Inoltre con la seguente durata della transizione, le icone vengono mostrate gradualmente
.floating-menu .menu-open:checked ~ .menu-item:nth-child(3) {
transition-duration: 150ms;
transform: translate3d(5px, 60px, 0);
}
.floating-menu .menu-open:checked ~ .menu-item:nth-child(4) {
transition-duration: 300ms;
transform: translate3d(-40px, 33px, 0) ;
}
.floating-menu .menu-open:checked ~ .menu-item:nth-child(5) {
transition-duration: 450ms;
transform: translate3d(-40px, -20px, 0) ;
}
.floating-menu .menu-open:checked ~ .menu-item:nth-child(6) {
transition-duration: 600ms;
transform: translate3d(5px, -45px, 0);
}
All’inizio del codice, trovi anche lo script per richiamare fontawesome, utilizzato per le icone. Se nel tuo tema è già presente, lascialo commentato o rimuovilo. Se non è presente e dunque non vedi le icone, togli i commenti per abilitarlo. Puoi personalizzare i tasti con le icone che preferisci, per esempio fas fa-share è l’attuale icona di condivisione
