Send To Messenger button isn't showing

Question

I want to integrate the Send To Messenger button to my web app. The problem is in localhost environment, the button does render, but in staging environment it doesn't. (even though the two environments use the same page_id and messenger_app_id)

This is the code of the Send To Messenger button:

<div
class="fb-send-to-messenger"
page_id="568015096933xxx"
messenger_app_id="402876686862xxx"
color="blue"
size="xlarge"
data-ref="123456"
cta_text="SUBSCRIBE_TO_UPDATES"></div>

• In localhost, the button is showing: HTML of the rendered button.

• In staging, the button is not showing: HTML of the rendered button.

Note: I did add the staging website's domain to the Facebook page's whitelist sites.

Answer 1

Here's my "dirty" workaround for this issue... Basically I copied the HTML of rendered button and built a component from it.

import { Meteor } from 'meteor/meteor';
import React from 'react';
import { LANGUAGE } from '/imports/constants';
import { compose, withProps, withHandlers } from 'recompose';

const SendToMessengerEnhancer = compose(
  withProps(() => {
    const user = Meteor.user();
    const language = (user.language === LANGUAGE.EN || user.language === LANGUAGE['EN-US']) ? 'en_US' : 'vi_VN';
    const { appId, pageId } = Meteor.settings.public.facebook;
    const ctaText = 'SUBSCRIBE_TO_UPDATES';
    const color = 'blue';
    const size = 'xlarge';
    return {
      language,
      appId,
      pageId,
      ctaText,
      userId: Meteor.userId(),
      color,
      size,
    };
  }),
  withHandlers({
    createMarkup: ({
      language,
      appId,
      pageId,
      ctaText,
      userId,
      color,
      size,
    }) => () => {
      const originEncoded = encodeURIComponent(Meteor.absoluteUrl());
      const domain = window.location.hostname;
      const channel = `http://staticxx.facebook.com/connect/xd_arbiter/r/xaOI6zd9HW9.js?version=42#cb=fab5aacb255238&domain=${domain}&origin=${originEncoded}f1c42e700a608a4&relation=parent.parent`;
      const channelEncoded = encodeURIComponent(channel);
      const html = `
      <div
        class="fb-send-to-messenger fb_iframe_widget"
        page_id="${pageId}"
        messenger_app_id="${appId}"
        color="${color}"
        size="${size}"
        enforce_login="false"
        data-ref="${userId}"
        cta_text="${ctaText}"
        fb-xfbml-state="rendered"
        fb-iframe-plugin-query="app_id=&amp;color=blue&amp;container_width=532&amp;cta_text=${ctaText}&amp;enforce_login=false&amp;locale=${language}&amp;messenger_app_id=${appId}&amp;page_id=${pageId}&amp;ref=${userId}&amp;sdk=joey&amp;size=${size}">
          <span
            style="vertical-align: bottom; width: 256px; height: 68px;">
            <iframe
              name="f3769e54c3c93e8"
              width="1000px"
              height="1000px"
              frameborder="0"
              allowtransparency="true"
              allowfullscreen="true"
              scrolling="no"
              allow="encrypted-media"
              title="fb:send_to_messenger Facebook Social Plugin"
              src="https://www.facebook.com/v2.12/plugins/send_to_messenger.php?app_id=&amp;channel=${channelEncoded}&amp;color=${color}&amp;container_width=532&amp;cta_text=${ctaText}&amp;enforce_login=false&amp;locale=${language}&amp;messenger_app_id=${appId}&amp;page_id=${pageId}&amp;ref=${userId}&amp;sdk=joey&amp;size=${size}"
              style="border: none; visibility: visible; width: 256px; height: 68px;"
              class=""
            ></iframe>
          </span>
        </div>
      `;
      return {
        __html: html,
      };
    },
  }),
);

const SendToMessengerView = ({ createMarkup }) => <div className="send-to-messenger-btn" dangerouslySetInnerHTML={createMarkup()} />;

export default SendToMessengerEnhancer(SendToMessengerView);

Some notes:

• My app is built on Meteor that's why you'll see Meteor.settings, Meteor.user(), etc
• I use recompose to help building HOCs

Hope this helps others who having the same issue.