Facebook Messenger 聊天小部件未加载
Posted
技术标签:
【中文标题】Facebook Messenger 聊天小部件未加载【英文标题】：Facebook Messenger chat widget not loading 【发布时间】：2019-02-20 10:32:32 【问题描述】：我已将我们 FB 页面上的域列入白名单并生成了聊天小部件。该代码没有在页面上显示任何内容（所有内容拦截器都已禁用）。
在我们的 CMS 上，我们无法将代码添加到正文的开头/开头或结尾。
然后我使用了以下指南： https://medium.com/@jamesfuthey/how-to-add-facebook-live-chat-to-your-website-dd48fc8bb066 && https://www.labnol.org/internet/embed-facebook-customer-chat-widget/30663/
即创建开发者应用程序并使用 APP_ID。 这也不起作用请参阅：https://www.trentstudents.org/test-fb1
我也尝试将脚本手动添加到页面的正确位置，即
var facebookWidget = `
<div class="fb-customerchat" page_id="127611563950728"></div>
<script>
window.fbAsyncInit = function()
FB.init(
appId : '383830712455959',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.11'
);
;
(function(d, s, id)
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
fjs.parentNode.insertBefore(js, fjs);
(document, 'script', 'facebook-jssdk'));
</script>
`;
$('body').prepend(facebookWidget);
最后我尝试从https://www.lsu.co.uk/ 复制和编辑代码 示例页面在这里： https://www.trentstudents.org/test-fb2
被 iframe 源策略阻止（我试图将代码 id 和域修改为我们的 - 显然我错过了一些东西）
<div id="fb-root" class=" fb_reset"><div style="position: absolute; top: -10000px; width: 0px; height: 0px;">
<div>
<iframe name="fb_xdm_frame_https" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" allow="encrypted-media" id="fb_xdm_frame_https" aria-hidden="true" title="Facebook Cross Domain Communication Frame" tabindex="-1" src="https://staticxx.facebook.com/connect/xd_arbiter/r/vy-MhgbfL4v.js?version=44#channel=f1f65df83379dd4&origin=https%3A%2F%2Fwww.lsu.co.uk" style="border: none;"></iframe></div><div></div></div><div class="fb-customerchat fb_invisible_flow fb_iframe_widget" attribution="setup_tool" page_id="127611563950728" logged_in_greeting="Hi! 👋 How can we help you?" logged_out_greeting="Hi! 👋 How can we help you?" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=383830712455959&attribution=setup_tool&container_width=0&locale=en_US&logged_in_greeting=Hi!%20%F0%9F%91%8B%20%20How%20can%20we%20help%20you%3F&logged_out_greeting=Hi!%20%F0%9F%91%8B%20%20How%20can%20we%20help%20you%3F&page_id=10144058117&sdk=joey"><span style="vertical-align: bottom; width: 1000px; height: 0px;"><iframe name="f105c6e6d6280d4" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" allow="encrypted-media" title="" src="https://www.facebook.com/v3.2/plugins/customerchat.php?app_id=383830712455959&attribution=setup_tool&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2Fvy-MhgbfL4v.js%3Fversion%3D44%23cb%3Dfac9b0f08f1698%26domain%3Dwww.lsu.co.uk%26origin%3Dhttps%253A%252F%252Fwww.lsu.co.uk%252Ff1f65df83379dd4%26relation%3Dparent.parent&container_width=0&locale=en_US&logged_in_greeting=Hi!%20%F0%9F%91%8B%20%20How%20can%20we%20help%20you%3F&logged_out_greeting=Hi!%20%F0%9F%91%8B%20%20How%20can%20we%20help%20you%3F&page_id=10144058117&sdk=joey" style="border: none; visibility: visible; width: 288pt; height: 214px; border-radius: 9pt; bottom: 63pt; padding: 0px; position: fixed; right: 9pt; top: auto; z-index: 2147483647; max-height: 100%;" class=" fb_customer_chat_bounce_in_v2" data-testid="dialog_iframe"></iframe></span></div><div class="fb_dialog fb_dialog_advanced fb_customer_chat_bubble_animated_no_badge fb_customer_chat_bubble_pop_in" style="background: none; border-radius: 50%; bottom: 18pt; display: inline; height: 45pt; padding: 0px; position: fixed; right: 18pt; top: auto; width: 45pt; z-index: 2147483646;"><div class="fb_dialog_content" style="background: none;"><iframe name="blank_f105c6e6d6280d4" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" allow="encrypted-media" tabindex="-1" data-testid="bubble_iframe" src="https://staticxx.facebook.com/connect/xd_arbiter/r/vy-MhgbfL4v.js?version=44#forIframe=f105c6e6d6280d4" style="border: none;"></iframe></div></div></div> <script> window.fbAsyncInit=function()
FB.init(
appId: '383830712455959', autoLogAppEvents: true, xfbml: true, version: 'v3.2'
);
;
(function(d, s, id)
var js, fjs=d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js=d.createElement(s);
js.id=id;
js.src="https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
fjs.parentNode.insertBefore(js, fjs);
(document, 'script', 'facebook-jssdk'));
</script>
最后在尝试返回 facebook 页面并生成新代码时，它不再起作用。 视频在这里： https://tinytake.s3.amazonaws.com/pulse/d-manicx100/attachments/9953495/TinyTake20-02-2019-10-31-20.mp4
以下原始生成代码（包括自定义主题颜色）：
<!-- Load Facebook SDK for javascript -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function()
FB.init(
xfbml : true,
version : 'v3.2'
);
;
(function(d, s, id)
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_GB/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
(document, 'script', 'facebook-jssdk'));</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="127611563950728"
theme_color="#6E7377">
</div>
在这里看到： https://www.trentstudents.org/test-fb3
【问题讨论】：
【参考方案1】：答案是来自外部库的 css 文件阻止了它
.fb_reset#fb-root display:none;
奇怪的是，官方的SDK版本仍然不能只使用带有APP_ID的那个。我还将 JS 文件中引用的版本设置为 4.4（截至 2019 年 2 月 20 日）
最终工作代码：
<script>
window.fbAsyncInit = function()
FB.init(
appId : '383830712455959',
autoLogAppEvents : true,
xfbml : true,
version : 'v4.4'
);
;
(function(d, s, id)
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
fjs.parentNode.insertBefore(js, fjs);
(document, 'script', 'facebook-jssdk'));
</script>
<div attribution="setup_tool" class="fb-customerchat" minimised="false" page_id="127611563950728" theme_color="#6E7377"> </div>
【讨论】：
以上是关于Facebook Messenger 聊天小部件未加载的主要内容，如果未能解决你的问题，请参考以下文章
Messer npm - Facebook Messenger 的命令行聊天。这个怎么运作？
Facebook Messenger 聊天机器人显示“检查您的连接并重试”。