embed-fbcmt (Embed Facebook Comment Plugin)

This is a plugin allow embed Facebook Comment Plugin 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:

<iframe src="https://anime-vsub.github.io/embed-fbcmt?<options>"></iframe>

All mentioned options of FB comment plugin 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

pnpm add embed-fbcmt-client

You can use this plugin anywhere I will give an example with 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

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

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

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

function useEmbed(el: HTMLIFrameElement | Ref<HTMLIFrameElement>): {
   code: CODES // code status embed
   loading: boolean // true is loading
   error: boolean // true is error emited
}

component:

<template>
   <EmbedFbCmt href="https://google.com" />
</template>

<script lang="ts" setup>
import { EmbedFbCmt } from "embed-fbcmt-client/vue"
</script>

function useEmbedSize(
  el: HTMLIFrameElement | Ref<HTMLIFrameElement | undefined> | undefined
): {
  width: Ref<number>
  height: Ref<number>
}