Skip to content

anime-vsub/embed-fbcmt

Repository files navigation

embed-fbcmt (Embed Facebook Comment Plugin)

Release pages-build-deployment npm version

GitHub license GitHub Issues Code Score Code Score

Test CodeQL ESLint Prettier TypeScript Checker Declaration Try build

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>