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="" data-width="552"><blockquote cite="" class="fb-xfbml-parse-ignore">Posted by <a href="">UNICEF Malaysia</a> on&nbsp;<a href="">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: '//', async: true, defer: true }    ]  },  props: ['oembedHtml', 'url'],  mounted() {    FB.XFBML.parse(this.$el)  }}</script>


<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=\"\" data-width=\"552\"><blockquote cite=\"\" 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=\"\">Nixon Siow</a> on&nbsp;<a href=\"\">Sabtu, 21 Mac 2020</a></blockquote></div>",    url: ''  }  components: { FacebookEmbed }}</script>

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


❤️ 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.