0

I'm using Gatsby to build a website that has a "specials" page with embedded Facebook. The Facebook embed does not display unless I manually reload the page or go directly to the "specials" page (rather than navigating to "specials" from the home page).

I have the Facebook script in my layout.js component file using React-Helmet:

export default ({ children }) => {
  return (
    <div id={layoutStyles.body}>
      <Helmet>
        // ...other tags
        <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v5.0"></script>
      </Helmet>
      <Navigation />
      <div id={layoutStyles.main}>{children}</div>
      <Footer />
    </div>
  )
}

And in my specials.js file I have the rest of the code for embedding:

// ...
render() {
    return (
      <Layout>
        <div id="fb-root"></div>
        <p>Scroll to see more specials.</p>
        <div id={styles.facebook} className="fb-page" data-href="https://www.facebook.com/LakesideMarcell/" data-tabs="timeline" data-width="500" data-height="" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/LakesideMarcell/" className="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/LakesideMarcell/">Lakeside Lumber &amp; Hardware LLC</a></blockquote>
        </div>
        <p>If you don't see specials here click the link above to see our specials on Facebook.</p>
      </Layout>
    )
  }
}
export default Specials

I've tried moving the script tag around in the code but the result is the same problem. I also tried using componentDidMount with state, and a function that called window.location.reload(), but I cold not get the page to reload only once.

I've used the same code embedded in a version of the website not using Gatsby and I don't have this issue so it must be something to do with Gatsby. Is there a way to fix this or reload the page once without user action?

eoja
  • 1,642
  • 2
  • 12
  • 21
  • The Facebook SDK doesn't know that you changed the content of the page so you have to use https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/ – WizKid Dec 22 '19 at 05:52
  • @WizKid Thanks for the reply. I'm sure you are right. But for simplicity at the moment I switched to using the iframe version and that works as expected. – eoja Dec 23 '19 at 19:25

0 Answers0