Nuxt Component to Render Facebook Post/Video Oembed

April 16, 2020

Edit components/FacebookEmbed.vue

<template>
  <div>
    <div v-html="html" v-if="oembedHtml">
      <!--
      <div class="fb-post" data-href="https://www.facebook.com/unicef.malaysia/photos/a.10157374688954480/10157385763024480/" data-width="552"><blockquote cite="https://www.facebook.com/unicef.malaysia/posts/10157385763024480:0" class="fb-xfbml-parse-ignore">Posted by <a href="https://www.facebook.com/unicef.malaysia/">UNICEF Malaysia</a> on&nbsp;<a href="https://www.facebook.com/unicef.malaysia/posts/10157385763024480:0">Ahad, 29 Mac 2020</a></blockquote></div>
       -->
    </div>
    <div class="fb-post"
      :data-href="url"
      data-width="500" v-else-if="url"></div>
  </div>
</template>

<script>
export default {
  head: {
    script: [
      { hid: 'facebook', type: 'text/javascript', src: '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2', async: true, defer: true }
    ]
  },
  props: ['oembedHtml', 'url'],
  mounted() {
    FB.XFBML.parse(this.$el)
  }
}
</script>

Usage

<template>
  <div>
    <facebook-embed :oembed-html="oembed" />
    <!-- OR -->
    <facebook-embed :url="url" />
  </div>
</template>

<script>
import FacebookEmbed from '~/components/FacebookEmbed'

export default {
  data() {
    oembed: "<div class=\"fb-post\" data-href=\"https://www.facebook.com/nixonsiow/posts/3093544747376885\" data-width=\"552\"><blockquote cite=\"https://www.facebook.com/nixonsiow/posts/3093544747376885\" class=\"fb-xfbml-parse-ignore\"><p>A very very quick sketch for sharing during this difficult moment.\n#tqfrontliners #covid19\n\np/s: sorry for the bad drawing, and bad English</p>Posted by <a href=\"https://www.facebook.com/nixonsiow/\">Nixon Siow</a> on&nbsp;<a href=\"https://www.facebook.com/nixonsiow/posts/3093544747376885\">Sabtu, 21 Mac 2020</a></blockquote></div>",
    url: 'https://www.facebook.com/nixonsiow/posts/3093544747376885'
  }
  components: { FacebookEmbed }
}
</script>

NOTE: Refer Python Facebook Oembed to get oembed from facebook url, remember to use omitscript=True.

References:

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.