I'm trying to embed Facebook and Twitter feeds on a Nuxt website. Unfortunately, when I deploy it to Netlify, the place the feeds should be is totally blank. It works on the dev server. Here is the code that I am using:
<template>
<div class="w-auto">
<div class="fb-page w-auto h-auto"
data-href="https://www.facebook.com/x/"
data-tabs="timeline"
data-width="500"
data-height=""
data-small-header="false"
data-adapt-container-width="true"
data-hide-cover="false"
data-show-facepile="true"
>
<blockquote cite="https://www.facebook.com/x/"
class="fb-xfbml-parse-ignore"
>
<a href="https://www.facebook.com/x/">
Company Name
</a>
</blockquote>
</div>
</div>
</template>
This is just using the Facebook page plugin found here: https://developers.facebook.com/docs/plugins/page-plugin/
I think that the problem is with how I have added the script:
<script>
export default {
name: "facebook",
data () {
return {
isFBLoaded: false
}
},
head () {
return {
script: [
{
type: 'text/javascript',
id: "fb-root",
src: 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v10.0',
crossorigin: "anonymous",
nonce: "x2a8MRt9",
// Changed after script load
callback: () => { this.isFBLoaded = true }
}
]
}
}
}
</script>
It only appears to load when I hit the refresh button.