Il plugin permette di inserire in una pagina i bottoni di condivisione dei maggiori social network utilizzando jQuery e CSS. Oltre ai classici social network come Facebook o Twitter è possibile abilitare Whatsapp (solo su mobile) e l’email.
Lo script è un fork dell’ottimo jsSocials [1] a cui vi rimando per la documentazione completa [2]. Nuove opzioni e funzionalità aggiunte verranno riportate in questo tutorial.
Il codice è responsive e quindi si adatterà facilmente a tutti i dispositivi. Per vedere l’effetto finale vi rimando alla demo [3]. Se accedete alla demo da desktop non vedrete il bottone Whatsapp ovviamente.
Per scaricare il file cliccate qui [4].
Lo script utilizza 2 modalità per mostrare le immagini relative ai social network:
- attraverso gli icon-font di Font Awesome
- attraverso delle immagini custom che troverete nello zip
La configurazione base è la seguente:
Di default vengono cercate le classi css di Font-Awesome. Se quindi volete usare gli icon font ricordate di includere il css da cdn (o da locale):
Se invece preferite usare delle immagini custom, ecco una sintassi di esempio:
In sostanza per ogni provider dichiaro il nome dell’immagine da usare. L’elenco completo dei provider è il seguente:
"facebook", "twitter", "linkedin", "pinterest", "googleplus", "email", "whatsapp", "telegram"
Con il parametro logoPath invece dichiaro il path (url assoluto o relativo) valido per tutti i file immagine. Se volete usare un path specifico per ogni immagine vi basta omettere “logoPath” e specificare il percorso direttamente dentro il parametro logo del provider. Ad esempio:
{
share:"email",
logo: "http://www.sito.it/img/email.png"
}
Altri parametri configurabili sono:
- url: è l’url della pagina da condividere. Di default viene cercato il valore del metatag Facebook “og:url” e successivamente l’url della pagina. Se volete sovrascriverli utilizzate “url”.
- showLabel: true o false. Mostra o nasconde il titolo del social network.
- showCounter: true o false. Mostra o nasconde il contatore. Se “false” non viene neanche installato nessun cookie di terze parti.
- minShowCount: numerico. Soglia numerica minima per visualizzare il contatore. Lasciare a zero per visualizzare qualsiasi valore.
- fixedNumber: numerico. Indica i decimali da visualizzare se abilitato il contatore.
- forceMobileProvider: forza la visualizzazione su desktop di provider mobili come Whatsapp e Instagram.
- layoutCount: mostra il contatore in tre modalità: “top” in alto, “right” a destra del bottone”, “inside” dentro. Quando si è in modalità “mobile” il contatore viene sempre mostrato “inside”.
- measures: è un array che permette di sovrascrivere le unità di misura dei contatori. Di default visualizza “mld”, “mln” e “mila”. Di default è configurato così: measures: {“mld”: 1000000000, “mln”: 1000000, “mila”: 1000}
- text: permette di impostare un testo specifico quando si condivide, specifico di Twitter, Instagram e Whatsapp. Sovrascrive il parametro “og:title” e il tag title della pagina.
- tandu: è un parametro specifico per Whatsapp che concatena il titolo e l’url della pagina.
- buttonMinWidth: lunghezza minima da assegnare ai bottoni. Dovete specificare anche l’unità di misura. Es.: 12px