Nuxt Component to Render Facebook Post/Video Oembed

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:

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.