0

I found this page on how to embed a Facebook post. However, I am confused as where I should put the <script></script> tag on my React page.

I have tried putting it on my App.js like such

function App() {
  return (
    <div className="app">
      <BrowserRouter>
      <div id="fb-root"></div>
      <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
        <CssBaseline/>
        <Routes>
          <Route element={<Layout />}>
              <Route path = "/posts" element={<Posts />} />
          </Route>
        </Routes>
      </ThemeProvider>
      
      </BrowserRouter>
    </div>
  );
}

export default App;

And then putting the embedded page code itself on one of my components

<Box>
         
          <div class="fb-post" 
        data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
        data-width="500">
          </div>        
</Box>

I have also tried putting the script tag inside the component

<Box>
         <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
          <div class="fb-post" 
        data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
        data-width="500">
          </div>        
</Box>

But none of these works and I cant see the embedded post in my <Box> component. Theres no error on my console as well.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy