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 <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 <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: