embed-fbcmt-client
Version:
client package for embed-fbcmt
123 lines (104 loc) • 5.24 kB
Markdown
# embed-fbcmt (Embed Facebook Comment Plugin)
[](https://badge.fury.io/js/embed-fbcmt-client)
[](https://github.com/anime-vsub/embed-fbcmt/blob/main/LICENSE) <img alt="GitHub Issues" src="https://img.shields.io/github/issues/anime-vsub/embed-fbcmt" /> <img alt="Code Score" src="https://api.codiga.io/project/35013/score/svg" /> <img alt="Code Score" src="https://api.codiga.io/project/35013/status/svg" />
[](https://github.com/anime-vsub/embed-fbcmt/actions/workflows/test.yml)
[](https://github.com/anime-vsub/embed-fbcmt/actions/workflows/codeql.yml) [](https://github.com/anime-vsub/embed-fbcmt/actions/workflows/eslint.yml) [](https://github.com/anime-vsub/embed-fbcmt/actions/workflows/prettier.yml)
[](https://github.com/anime-vsub/embed-fbcmt/actions/workflows/typing.yml)
[](https://github.com/anime-vsub/embed-fbcmt/actions/workflows/try-build.yml)
This is a plugin allow embed [Facebook Comment Plugin](https://developers.facebook.com/docs/plugins/comments/) to website SPA
Demo: https://anime-vsub.github.io/embed-fbcmt?href=https://google.com&no_socket=true&num_posts=20
## Usage
Append this code to location show comment:
```html
<iframe src="https://anime-vsub.github.io/embed-fbcmt?<options>"></iframe>
```
> All mentioned [`options of FB comment plugin`](https://developers.facebook.com/docs/plugins/comments/) are available.
In addition, you can also use some of the following custom options:
| Option | Type | Default | Description |
| ------ | ---- | ------- | ----------- |
| `lang` | code lang | `en_US` | language the plugin will display (example: `vi_VN`, `ja_JP`...) |
| `loader_bg` | color | `rgba(0,0,0,0.8)` | adjust background color when plugin is loading |
| `loader_text` | color | `white` | adjust text color when plugin is loading |
| `origin` | host name | `*` | domain name will be sent the message. you can specify the hostname of the embedded website to increase security |
| `no_socket` | boolean | `false` | whether to disable `WebSocket` to save resources |
| `active` | boolean | `true` | if this plugin is enabled if `false` then the plugin displays a blank page |
| `no_popup` | boolean | `false` | remove loading popup and use error warnings when you customize them |
## Package NPM
This package allows you to send change requests to the plugin without losing the SDK reload time. A useful thing for SPA website
### Install
```bash
pnpm add embed-fbcmt-client
```
You can use this plugin anywhere I will give an example with `Vue`
```vue
<template>
<button @click="setPropValue(cmtRef, 'lang', 'ja_JP')">Change lang to Japanese</button>
<iframe ref="cmtRef" src="https://anime-vsub.github.io/embed-fbcmt?https://google.com&lang=en_US" />
</template>
<script lang="ts" setup>
import { ref } from "vue"
import { setPropValue } from "embed-fbcmt-client/vue"
const cmtRef = ref<HTMLIFrameElement>()
</script>
```
### Functions
```ts
function setPropValue(el: HTMLIFrameElement | Ref<HTMLIFrameElement>, propName: string, value: string): Promise<void>
```
- Options:
- `el`: iframe embed plugin
- `propName`: option name set
- `value`: value set to prop
- Return: `Promise<void>` a promise that resolves when the set option succeeds or fails
```ts
function listenEvent(
el: HTMLIFrameElement,
cb: (event: { type: "success" | "loading" | "error"; code: CODES }) => void
): () => void
```
- Options:
- `el`: iframe embed plugin
- `cb`: this function is cakked every time something changes in the embed
- Return: `() => void` cancel
```ts
function listenResize(
el: HTMLIFrameElement,
type: "width" | "height",
cb: (size: number) => void
): () => void
```
- Options:
- `el`: iframe embed plugin
- `cb`: this function is cakked every time something changes in the embed
- Return: `() => void` cancel
### For vue
```ts
function useEmbed(el: HTMLIFrameElement | Ref<HTMLIFrameElement>): {
code: CODES // code status embed
loading: boolean // true is loading
error: boolean // true is error emited
}
```
component:
```vue
<template>
<EmbedFbCmt href="https://google.com" />
</template>
<script lang="ts" setup>
import { EmbedFbCmt } from "embed-fbcmt-client/vue"
</script>
```
```ts
function useEmbedSize(
el: HTMLIFrameElement | Ref<HTMLIFrameElement | undefined> | undefined
): {
width: Ref<number>
height: Ref<number>
}
```
```ts
function useEmbedHeight(
el: HTMLIFrameElement | Ref<HTMLIFrameElement | undefined> | undefined
): Ref<number>
```