anime-vsub / embed-fbcmt

a simple iframe embed facebook comment plugin for websites

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>