Facebook Embed

Answered

Macao paper wasp posted this in #help-forum

Macao paper waspOP

2023-10-01T08:41:37.000Z

Hi All,

I'm trying to embed facebook into my page, but i either get the widet not loading or hydration errors about span's in div.

Can anyone point me in the right direction?

page.jsx

import Facebook from './components/Facebook';

export default async function Home() {
return (
    <section>
    ...
    <Facebook />
    </section >

Facebook.jsx

facebook.jsx
"use client"

export default function Facebook() {
    return (
        <div className="w-full h-full rounded-lg border-green-500 border-4 fb-page" data-href="https://www.facebook.com/mypage/" data-tabs="timeline" data-width="430" data-height="400" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
        </div>
    )
}

layout.jsx

export default function RootLayout({ children }) {
  return (
    <html lang="en" >
      <head>
        <script async defer crossOrigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0" nonce="iuMqvirQ"></script>  
      </head>
      <body className={inter.className}>
        <div id="fb-root"></div>
        <Navbar />
        {children}
        <Footer />
      </body>
    </html>
  )

Answered by riský

i think the best thing to do here then is to [dynamic import](https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading) the script and component and disable ssr

View full answer

11 Replies

riský

2023-10-01T08:43:22.000Z

you probably should use a react library such as: https://www.npmjs.com/package/react-facebook (note that i haven't used it)

Macao paper waspOP

2023-10-01T08:45:38.000Z

i don't really want to sign up as a developer for facebook just to embed a page was why i didn't use that package

riský

2023-10-01T08:48:36.000Z

what about this one: https://www.npmjs.com/package/react-social-media-embed#facebook it has no mention for appId

Macao paper waspOP

2023-10-01T08:49:45.000Z

Only supports single posts, not the thread of all posts on the page unfortunately

riský

2023-10-01T08:56:14.000Z

i think the best thing to do here then is to [dynamic import](https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading) the script and component and disable ssr

Answer

Macao paper waspOP

2023-10-01T08:59:12.000Z

Sorry i had tried that, when you dynamic import, it doesn't load at all..... Nothing in the console about any errors, just nothing happens. Should have mentioned that ... Stupid facebook, i give up ðŸ¤£

riský

2023-10-01T08:59:55.000Z

even if you add the script into the Facebook component?

Macao paper waspOP

2023-10-01T09:00:17.000Z

hadn;t tried that let me see

that did it

Thanks!

riský

2023-10-01T10:17:01.000Z

ill mark it as solved as there isn't really any simpler way of doing