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>
}

function useEmbedHeight(
  el: HTMLIFrameElement | Ref<HTMLIFrameElement | undefined> | undefined
): Ref<number>