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.