I am adding facebook social plug in to a webpage

when I manually add :

<div class="fb-comments" data-href="" data-width="700" data-numposts="7" data-colorscheme="light"></div>

it works , however , when javascript code add it , it doesn't

any ideas ?

I am adding facebook social plug in to a webpage

when I manually add :

<div class="fb-comments" data-href="http://website.com/z" data-width="700" data-numposts="7" data-colorscheme="light"></div>

it works , however , when javascript code add it , it doesn't

any ideas ?

• javascript
• facebook

• Facebook doesn't allow it, so it generally doesn't work unless the script is present on pageload. There's probably workarounds ? – adeneo Commented Mar 18, 2015 at 22:04

2 Answers 2

The JS SDK goes through your document once when it is initialized, to look for such elements to parse into social plugins. If you want it to also parse content that you add to the document later, you need to call FB.XFBML.parse().

https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

That was great @CBroe!

Thank you! It worked in a Nextjs/React project.

As a reference, please, see a custom hook implementing it:

import { useEffect } from 'react';
let FB;

const useFacebook = ({ addTrack }) => {

  useEffect(() => {
 
    const facebookScript = document.createElement("script");

    facebookScript.id = 'fb-sdk';
    facebookScript.async = true;
    facebookScript.defer = true;
    facebookScript.crossOrigin = "anonymous";
    facebookScript.nonce = "5JOEwLPT";
    const track = addTrack ? `&appId=${process.env.NEXT_PUBLIC_FACEBOOK_ID}&autoLogAppEvents=1` : '';
    facebookScript.src = `https://connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v10.0${track}`;

    document.body.appendChild(facebookScript);

    const startScript = document.createElement('script');
    const code = `window.fbAsyncInit = function() {
      FB.init({
        appId            : '${process.env.NEXT_PUBLIC_FACEBOOK_ID}',
        autoLogAppEvents : ${addTrack},
        xfbml            : true,
        version          : 'v10.0'
      });
    };`;
    startScript.appendChild(document.createTextNode(code));
    document.body.appendChild(startScript);
    if(window.FB) {
      window.fbAsyncInit();
    }
    return () => {
      document.body.removeChild(facebookScript);
      document.body.removeChild(startScript);
    }
  }, [addTrack]);
};

export default useFacebook;

Full code Nextjs Facebook SDK comments sample: https://github.com/cmdaniel/nextjs-facebook-sdk