https://github.com/anime-vsub/embed-fbcmt
a simple iframe embed facebook comment plugin for websites
https://github.com/anime-vsub/embed-fbcmt
api embed facebook-api facebook-comments facebook-comments-plugin message message-api spa vue
Last synced: 26 days ago
JSON representation
a simple iframe embed facebook comment plugin for websites
- Host: GitHub
- URL: https://github.com/anime-vsub/embed-fbcmt
- Owner: anime-vsub
- License: mit
- Created: 2023-01-04T13:38:38.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-07T11:25:48.000Z (over 2 years ago)
- Last Synced: 2025-10-07T00:46:37.312Z (4 months ago)
- Topics: api, embed, facebook-api, facebook-comments, facebook-comments-plugin, message, message-api, spa, vue
- Language: TypeScript
- Homepage: https://embed-fbcmt.vercel.app
- Size: 2.68 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# embed-fbcmt (Embed Facebook Comment Plugin)
[](https://github.com/anime-vsub/embed-fbcmt/actions/workflows/release.yml)
[](https://github.com/anime-vsub/embed-fbcmt/actions/workflows/pages/pages-build-deployment)
[](https://badge.fury.io/js/embed-fbcmt-client)
[](https://github.com/anime-vsub/embed-fbcmt/blob/main/LICENSE) 
[](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
```
> 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
Change lang to Japanese
import { ref } from "vue"
import { setPropValue } from "embed-fbcmt-client/vue"
const cmtRef = ref<HTMLIFrameElement>()
```
### Functions
```ts
function setPropValue(el: HTMLIFrameElement | Ref, propName: string, value: string): Promise
```
- Options:
- `el`: iframe embed plugin
- `propName`: option name set
- `value`: value set to prop
- Return: `Promise` 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): {
code: CODES // code status embed
loading: boolean // true is loading
error: boolean // true is error emited
}
```
component:
```vue
import { EmbedFbCmt } from "embed-fbcmt-client/vue"
```
```ts
function useEmbedSize(
el: HTMLIFrameElement | Ref | undefined
): {
width: Ref
height: Ref
}
```
```ts
function useEmbedHeight(
el: HTMLIFrameElement | Ref | undefined
): Ref
```