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 a cui vi rimando per la documentazione completa. 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. Se accedete alla demo da desktop non vedrete il bottone Whatsapp ovviamente.

Per scaricare il file cliccate qui.

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<link rel="stylesheet" href="assets/css/jssocials.css">
<link rel="stylesheet" href="assets/css/jssocials-theme-a.css">
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="assets/js/jquery.jssocials.js"></script>
<script>
$(document).ready(function() {
 
	$("#share-a").jsSocials({
		shares: ["facebook", "twitter", "linkedin", "pinterest"],
		url: "http://www.google.com",
		showLabel: false,
		layoutCount: "top"
	});
});
</script>

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

1

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Se invece preferite usare delle immagini custom, ecco una sintassi di esempio:

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
28
29
30
31
32
33
34

<script>
$(document).ready(function() {
 
	$("#share-a").jsSocials({
		shares: [
			{
				share: "facebook",
				logo: "facebook.png"
			},
			{
				share: "twitter",
				logo: "twitter.png"
			},
			{
				share: "linkedin",
				logo: "linkedin.png"
			},
			{
				share: "whatsapp",
				logo: "whatsapp.png"
			},
			{
				share:"email",
				logo: "email.png"
			}
		],
		url: "http://www.google.com",
		logoPath: "assets/img",
		showLabel: false,
		layoutCount: "top",
                measures: {"mld": 1000000000, "mln": 1000000, "mila": 1000}
	});
});
</script>

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:

1
2
3
4

{
   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