Facebook “发送到通讯器”按钮为isn'；t显示

我想将按钮集成到我的web应用程序中。问题是在localhost环境中，按钮确实会渲染，但在staging环境中则不会。（即使这两个环境使用相同的

页面id

和

messenger\u应用程序id

）

这是“发送到通讯器”按钮的代码：

<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>

• 在localhost中，按钮显示：

• 在暂存中，按钮不显示：

注意：我确实将登台网站的域添加到了Facebook页面的白名单网站中。

这是我解决这个问题的“肮脏”方法。。。基本上，我复制了，并从中构建了一个组件

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);

从'Meteor/Meteor'导入{Meteor}；
从“React”导入React；
从“/imports/constants”导入{LANGUAGE}；
从“重新组合”导入{compose，withProps，withHandlers}；
const SendToMessengerEnhancer=compose(
用道具（（）=>{
const user=Meteor.user（）；
const language=（user.language==language.EN | | user.language==language['EN-US']）？“EN-u-US'：'vi_-VN'；
const{appId，pageId}=Meteor.settings.public.facebook；
const ctaText='SUBSCRIBE_TO_UPDATES'；
常量颜色='蓝色'；
常量大小='xlarge'；
返回{
语言
阿皮德，
pageId，
文本，
userId:Meteor.userId（），
颜色
大小
};
}),
带处理器({
createMarkup：({
语言
阿皮德，
pageId，
文本，
用户ID，
颜色
大小
}) => () => {
const originEncoded=encodeURIComponent（Meteor.absoluteUrl（））；
const domain=window.location.hostname；
常数通道=`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（信道）；
常量html=`
`;
返回{
__html:html，
};
},
}),
);
const SendToMessengerView=（{createMarkup}）=>；
导出默认SendToMessenger增强器（SendToMessenger视图）；

一些注意事项：

• 我的应用程序是建立在这个基础上的，这就是为什么你会看到Meteor.settings，

  Meteor.user（）

  ，等等
• 我用它来帮助建立HOC

---

希望这能帮助其他有同样问题的人。

您是否在控制台中看到任何错误？您是否记录了文档“事件订阅”部分中描述的事件@amuramoto我在控制台中没有看到任何错误。记录事件没有帮助，因为按钮甚至没有显示。我为此发布了我的作品，希望它能帮助其他人。@sonlexqt你还面临这个问题吗？你能把它放在某个地方并共享url吗？@GijoVarghese它正在使用我的解决方案，你可以看到它