-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (94 loc) · 5.58 KB
/
index.html
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>facebook-button: Facebook button as Web Components.</title>
<link rel="stylesheet" href="https://1000ch.github.io/gh-pages.css/gh-pages.css">
<!-- Place this tag in your head or just before your close body tag. -->
<script defer src="https://buttons.github.io/buttons.js"></script>
<script defer src="https://unpkg.com/github-corner"></script>
<script type="module">
import { windowReady } from 'https://unpkg.com/html-ready';
import XMarked from 'https://unpkg.com/x-marked';
import { FacebookLikeButton } from 'https://unpkg.com/facebook-button/dist/facebook-like-button.js';
import { FacebookShareButton } from 'https://unpkg.com/facebook-button/dist/facebook-share-button.js';
customElements.define('x-marked', XMarked);
customElements.define('facebook-like-button', FacebookLikeButton);
customElements.define('facebook-share-button', FacebookShareButton);
windowReady.then(() => {
const xmarked = document.querySelector('x-marked');
const div = document.querySelector('div');
const h2 = xmarked.shadowRoot.querySelector('h2');
xmarked.shadowRoot.querySelector('div').insertBefore(div, h2);
});
</script>
</head>
<body>
<div>
<!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/1000ch/facebook-button" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star 1000ch/facebook-button on GitHub">Star</a>
<!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/1000ch" data-size="large" data-show-count="true" aria-label="Follow @1000ch on GitHub">Follow @1000ch</a>
</div>
<github-corner>
<a href="https://github.com/1000ch/facebook-button">GitHub</a>
</github-corner>
<x-marked highlight class="container">
# facebook-button ![GitHub Actions Status](https://github.com/1000ch/facebook-button/workflows/test/badge.svg)
Facebook button as Web Components.
## Install
Using npm:
```bash
$ npm install facebook-button
```
## Usage
Import and register scripts.
```html
<script type="module">
import { FacebookLikeButton } from 'https://unpkg.com/facebook-button/dist/facebook-like-button.js';
import { FacebookShareButton } from 'https://unpkg.com/facebook-button/dist/facebook-share-button.js';
customElements.define('facebook-like-button', FacebookLikeButton);
customElements.define('facebook-share-button', FacebookShareButton);
</script>
```
Just put `<facebook-like-button>` and `<facebook-share-button>` element in your HTML.
```html
<facebook-like-button></facebook-like-button>
<facebook-share-button></facebook-share-button>
```
### `FacebooLikeButton`
- `href`: required string, URL to like or share
- `layout`: string, must be either `button_count`, `button` or `box_count`, default to `button`
- `size`: string, must be either `small` or `large`, default to `small`
- `width`: number, width of `<facebook-like-button>`
- `action`: string, `like` or `recommend`, default to `like`
### `FacebookShareButton`
- `href`: required string, URL to like or share
- `layout`: string, must be either `button_count`, `button` or `box_count`, default to `button`
- `size`: string, must be either `small` or `large`, default to `small`
- `width`: number, width of `<facebook-share-button>`
## Demo
<facebook-like-button href="https://github.com" layout="button" action="like"></facebook-like-button>
<facebook-like-button href="https://github.com" layout="button_count" action="like"></facebook-like-button>
<facebook-like-button href="https://github.com" layout="box_count" action="like"></facebook-like-button>
<facebook-like-button href="https://github.com" layout="button" size="large" action="like"></facebook-like-button>
<facebook-like-button href="https://github.com" layout="button_count" size="large" action="like"></facebook-like-button>
<facebook-like-button href="https://github.com" layout="box_count" size="large" action="like"></facebook-like-button>
<facebook-like-button href="https://github.com" layout="button" action="recommend"></facebook-like-button>
<facebook-like-button href="https://github.com" layout="button_count" action="recommend"></facebook-like-button>
<facebook-like-button href="https://github.com" layout="box_count" action="recommend"></facebook-like-button>
<facebook-like-button href="https://github.com" layout="button" size="large" action="recommend"></facebook-like-button>
<facebook-like-button href="https://github.com" layout="button_count" size="large" action="recommend"></facebook-like-button>
<facebook-like-button href="https://github.com" layout="box_count" size="large" action="recommend"></facebook-like-button>
<facebook-share-button href="https://github.com" layout="button" size="small"></facebook-share-button>
<facebook-share-button href="https://github.com" layout="button_count" size="small"></facebook-share-button>
<facebook-share-button href="https://github.com" layout="box_count" size="small"></facebook-share-button>
<facebook-share-button href="https://github.com" layout="button" size="large"></facebook-share-button>
<facebook-share-button href="https://github.com" layout="button_count" size="large"></facebook-share-button>
<facebook-share-button href="https://github.com" layout="box_count" size="large"></facebook-share-button>
## License
[MIT](https://1000ch.mit-license.org) © [Shogo Sensui](https://github.com/1000ch)
</x-marked>
</body>
</html>