Lorenzone.it - versione per la stampa

Bottoni Social con jQuery e CSS

Bottoni Social con jQuery e CSS

Elucubrato da saibal il 24 settembre 2015 alle 11:40 nella categoria Elucubrazioni

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:

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:


Link in questa pagina:

[1] jsSocials: http://js-socials.com/

[2] documentazione completa: http://js-socials.com/docs/

[3] demo: http://demo.lorenzone.it/013/index.php

[4] cliccate qui: http://www.lorenzone.it/?dl_id=145