@@ -5,61 +5,75 @@ Simple social buttons for your site.
5
5
### [ Demo] ( https://wcoder.github.io/share-buttons/ )
6
6
7
7
## Browser support
8
+
8
9
* Google Chrome
9
10
* Mozilla Firefox 3.5+
10
11
* Opera 10+
11
12
* Safari 3.2+
12
13
* IE 8+
14
+ * Android
15
+ * iOS
13
16
14
17
## Install
18
+
15
19
Include ` share-buttons.js ` in the end of page:
20
+
16
21
``` html
17
22
<script src =" ../dist/share-buttons.js" ></script >
18
23
```
24
+
19
25
Paste this html on the page:
26
+
20
27
``` html
21
28
<div class =" share-btn" >
22
- <a class =" btn-vk" data-id =" vk" >VK</a >
23
- <a class =" btn-facebook" data-id =" fb" >Facebook</a >
24
- <a class =" btn-twitter" data-id =" tw" >Twitter</a >
25
- <a class =" btn-mail" data-id =" mail" >EMail</a >
29
+ <a class =" btn-vk" data-id =" vk" >VK</a >
30
+ <a class =" btn-facebook" data-id =" fb" >Facebook</a >
31
+ <a class =" btn-twitter" data-id =" tw" >Twitter</a >
32
+ <a class =" btn-mail" data-id =" mail" >EMail</a >
26
33
</div >
27
34
```
35
+
28
36
Added styles:
37
+
29
38
``` css
30
39
.share-btn > a {
31
- border : 1px solid #ccc ;
32
- padding : 5px ;
33
- font-size : 12px ;
34
- font-family : Verdana , Arial ;
40
+ border : 1px solid #ccc ;
41
+ padding : 5px ;
42
+ font-size : 12px ;
43
+ font-family : Verdana , Arial ;
35
44
}
36
45
.share-btn > a :hover {
37
- cursor : pointer ;
46
+ cursor : pointer ;
38
47
}
39
48
```
49
+
40
50
Profit!!
41
51
42
52
## Customizing
53
+
43
54
Custom 'url', 'title', 'description':
55
+
44
56
``` html
45
57
<div class =" share-btn" data-url =" https://..." data-title =" ..." data-desc =" ..." >
46
- <a class =" btn-vk" data-id =" vk" >VK</a >
47
- <a class =" btn-facebook" data-id =" fb" >Facebook</a >
48
- <a class =" btn-twitter" data-id =" tw" >Twitter</a >
49
- <a class =" btn-mail" data-id =" mail" >EMail</a >
58
+ <a class =" btn-vk" data-id =" vk" >VK</a >
59
+ <a class =" btn-facebook" data-id =" fb" >Facebook</a >
60
+ <a class =" btn-twitter" data-id =" tw" >Twitter</a >
61
+ <a class =" btn-mail" data-id =" mail" >EMail</a >
50
62
</div >
51
63
```
52
- Styles - full customization.
53
64
65
+ Styles - full customization.
54
66
55
67
## Examples
68
+
56
69
If your using [ Font-Awesome] ( https://github.com/FortAwesome/Font-Awesome ) :
70
+
57
71
``` html
58
72
<div class =" share-btn" data-url =" https://..." data-title =" ..." data-desc =" ..." >
59
- <a class =" btn-vk" data-id =" vk" ><i class =" fa fa-vk" ></i > VK</a >
60
- <a class =" btn-facebook" data-id =" fb" ><i class =" fa fa-facebook-square" ></i > Facebook</a >
61
- <a class =" btn-twitter" data-id =" tw" ><i class =" fa fa-twitter" ></i > Twitter</a >
62
- <a class =" btn-mail" data-id =" mail" ><i class =" fa fa-envelope-o" ></i > EMail</a >
73
+ <a class =" btn-vk" data-id =" vk" ><i class =" fa fa-vk" ></i > VK</a >
74
+ <a class =" btn-facebook" data-id =" fb" ><i class =" fa fa-facebook-square" ></i > Facebook</a >
75
+ <a class =" btn-twitter" data-id =" tw" ><i class =" fa fa-twitter" ></i > Twitter</a >
76
+ <a class =" btn-mail" data-id =" mail" ><i class =" fa fa-envelope-o" ></i > EMail</a >
63
77
</div >
64
78
```
65
79
0 commit comments