0

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.

kissu
  • 40,416
  • 14
  • 65
  • 133
John
  • 75
  • 11
  • I see what you tried to do here, but `head` is more for SEO IMO. Btw, are you full static or SPA only? – kissu May 07 '21 at 03:29

1 Answers1

0

This solution may be helpful: https://stackoverflow.com/a/39546590/8816585

Something like this

created() {
  (function(d, s, id){
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement(s); js.id = id;
   js.src = "//connect.facebook.net/en_US/sdk.js";
   fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
}

Otherwise, try out vue-facebook-page, it can be used with Nuxt too. The repo is a bit old but probably still working great.

kissu
  • 40,416
  • 14
  • 65
  • 133