Problems using Facebook messenger button in React app

Question

I am trying to integrate Facebook's Message Us plugin from Messenger Platform: https://developers.facebook.com/docs/messenger-platform/plugin-reference/message-us

..using React

This is the html I am using.

<div
  className="fb-messengermessageus"
  messenger_app_id="123"
  page_id="123"
  color="white"
  size="standard"
/>

I get this React warning:

Warning: Unknown props `messenger_app_id`, `page_id` on <div> tag. Remove these props from the element. For details, see https://fb .me/react-unknown-prop

and also error 500 on this request:

sdk.js:87 GET https://www.facebook.com/v2.8/plugins/messengermessageus.php?app_id=1137113…tion%3Dparent.parent&color=white&container_width=690&locale=en_US&sdk=joey 500 ()

1. Is it possible that the first warning triggers the second error?

Answer 1

Try using the HTML5-compatible custom data attribute versions of those attributes.

The documentation only explicitly mentions data-color and data-size - but I would be rather surprised if that didn't work the same way for the other plugin parameters. Most of the social plugins Facebook offers support passing the parameters as data-xy attributes.

And according to the React documentation the error message refers to, React should be fine with custom data attributes.