facebook social plug-in not showing up when added dynamically

Question

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 ?

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

score 24 · Accepted Answer · answered Mar 18 '15 at 23:17

24

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/

answered Mar 18 '15 at 23:17

CBroe

91,630
14
92
150

Thanks Cbro, this helped me a lot! :) – Rene Polo Sep 22 '15 at 22:41
This fixed a two day problem for me! Thank you so much, @CBroe! – Hideya Oct 31 '16 at 18:47
I wish I could give you 100+, weirdly I was looking for this in the docs and never found it :') – Saúl Martínez Vidals Aug 10 '18 at 19:36
You Are Wonderful ! – w3spi Dec 08 '20 at 19:36

score 0 · Answer 2 · answered Apr 19 '21 at 18:46

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

facebook social plug-in not showing up when added dynamically

2 Answers2

Linked

Related