Skip to content

Commit e119ce6

Browse files
committed
update readme
1 parent 2c7efc3 commit e119ce6

File tree

1 file changed

+32
-18
lines changed

1 file changed

+32
-18
lines changed

README.md

Lines changed: 32 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,61 +5,75 @@ Simple social buttons for your site.
55
### [Demo](https://wcoder.github.io/share-buttons/)
66

77
## Browser support
8+
89
* Google Chrome
910
* Mozilla Firefox 3.5+
1011
* Opera 10+
1112
* Safari 3.2+
1213
* IE 8+
14+
* Android
15+
* iOS
1316

1417
## Install
18+
1519
Include `share-buttons.js` in the end of page:
20+
1621
``` html
1722
<script src="../dist/share-buttons.js"></script>
1823
```
24+
1925
Paste this html on the page:
26+
2027
``` html
2128
<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>
2633
</div>
2734
```
35+
2836
Added styles:
37+
2938
``` css
3039
.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;
3544
}
3645
.share-btn > a:hover {
37-
cursor: pointer;
46+
cursor: pointer;
3847
}
3948
```
49+
4050
Profit!!
4151

4252
## Customizing
53+
4354
Custom 'url', 'title', 'description':
55+
4456
``` html
4557
<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>
5062
</div>
5163
```
52-
Styles - full customization.
5364

65+
Styles - full customization.
5466

5567
## Examples
68+
5669
If your using [Font-Awesome](https://github.com/FortAwesome/Font-Awesome):
70+
5771
```html
5872
<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>
6377
</div>
6478
```
6579

0 commit comments

Comments
 (0)