Facebook and Instagram Embed does not work together

[cspui]

Hi, I found out that putting Facebook and Instagram Embed together will cause one of the embed or both of them to not work correctly (does not load). Upon closer inspection on the network call, noticed it will only call to www.facebook.com and not www.instagram.com endpoints if both embed exist.

But if removing either one of the embed it will call to correct endpoint and load correctly. All other embed seems to load correctly only facebook and instagram embed.

[iamalvisng]

I have the same issue too.

[PeterHueer]

Maybe both sdk's are influencing each other... I solved it with showing different posts in different platform tabs.

Edit: Init instagram before facebook fix the problem.

Edit 2: window.FB.__buffer = true; can also fix the problem. See first line of instagram embed.js for embedding https://www.instagram.com/embed.js (try {(window.FB && !window.FB.__buffer) || (function()). For whatever reason it will listen to the FB property from the facebook sdk....

https://developers.facebook.com/community/threads/167685065704089/

[cspui]

Hi @PeterHueer, thanks for the solution. I rearrange to make call Instagram before Facebook embed and also adding if (window.FB) window.FB.__buffer = true;. Currently it is working only after a first refresh for the page for instagram to load, it seems that it need cache some response for it to work after a refresh. If I disabled cache in Dev tools Network tab options, after refresh instagram still fails to load.

[PeterHueer]

Make sure that the instagram embed.js script will load after the instagram <blockquote...

Sounds like the init function of the instagram embed script was executed before the Dom has the explicit blockquote element

Another solution in my mind is just to write a script which listen to the instagram event of load. (I think there is a window.instgrm.Event where you can subscribe on the load event) After instgrm is loaded you can add the fb sdk to the Dom. But I never tested it... just an idea

[figurae]

For anyone interested, I was researching this issue and found that this is the last version of Instagram SDK without this bug:

https://www.instagram.com/static/bundles/metro/EmbedSDK.js/d9addf525b6a.js (It's from around six months ago)

[olivermontes]

For anyone interested, I was researching this issue and found that this is the last version of Instagram SDK without this bug:

https://www.instagram.com/static/bundles/metro/EmbedSDK.js/d9addf525b6a.js (It's from around six months ago)

Is working @figurae

import React, { useEffect } from 'react';
import { InstagramEmbed } from 'react-social-media-embed';

const InstagramBlockEmbed = (props: any) => {
  const { value } = props;

  useEffect(() => {
    const script = document.createElement('script');
    // Fix for Instagram embeds https://github.com/justinmahar/react-social-media-embed/issues/41#issuecomment-1622120110
    script.src = "//www.instagram.com/static/bundles/metro/EmbedSDK.js/d9addf525b6a.js";
    script.async = true;
    document.body.appendChild(script);
  }, []);

  return (
    <InstagramEmbed
      url={value.url}
      width={Number(value.width)}
      height={value.height > 0 ? Number(value.height) : 'auto'}
    />
  );
};

export default InstagramBlockEmbed;