0

I want to share facebook posts on my clients website. I did as mentioned facebook embedded post documentation.

I'm here using React NEXT.js framework.

Added the SDK right after opening body tag in my _document.tsx.

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v11.0"

nonce="Z4T7Zvkv">

Then I added the code in required page.

<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500" data-show-text="true"><blockquote cite="https://www.facebook.com/20531316728/posts/10154009990506729/" class="fb-xfbml-parse-ignore">Posted by <a href="https://www.facebook.com/facebookapp/">Facebook App</a> on&nbsp;<a href="https://www.facebook.com/20531316728/posts/10154009990506729/">Thursday, 27 August 2015</a></blockquote></div>

I want to show the post as mention in the documentation. Image - Post shown in the documention

But I'm getting the post as below image. Image - Post showing in my website

In chrome if I did Normal Reload the post not showing but only the blockqoute text. But when I'm doiing the Hard Reload then it's showing but right after a Normal Reload then the blockqoute text is showing.

Please help to me fix this issue.

Harishan
  • 1
  • 1
  • 1
    Does this answer your question? [facebook social plug-in not showing up when added dynamically](https://stackoverflow.com/questions/29133563/facebook-social-plug-in-not-showing-up-when-added-dynamically) – CBroe Jun 10 '21 at 06:23

1 Answers1

1

I also had this issue. FB.XFBML.parse() in my useEffect it worked.

useEffect(() => {
  FB.XFBML.parse();
}, []);

Read more about it here

Lucdabomb
  • 233
  • 4
  • 15