我们正在考虑允许用户通过几个不同的社交媒体网络共享链接。Tweet、Pin it 和 LinkedIn 分享按钮都可以正常工作,但我们遇到的问题围绕着 Facebook 发送按钮。
该按钮似乎可以正常加载,但单击它时会显示一条消息“无法访问 www.website.com/page1.jsp?order_nbr=123456 上的页面”。
在使用对象调试器@Facebook 开发者站点时,会发生一些有趣的事情:尝试调试 www.website.com/page1.jsp?order_nbr=123456
抓取的响应代码时出现 502 错误(URL 返回了错误的 HTTP 响应代码)。尝试调试www.website.com/page1.jsp
我们得到 200(正常响应)。尝试调试m.website.com/page1.jsp
或m.website.com/page1.jsp?order_nbr=123456
,两者都返回相同的 502 错误。
当 . 之后的 URL 中有参数时,似乎存在问题?
,但是我们想知道是否需要设置其他内容,或者这可能是服务器配置问题。
如果有关于 facebook 如何抓取页面的技术解释,或者为什么他们的发送按钮可能会收到 502 错误,而上面提到的其他按钮运行正常?任何见解将不胜感激。
这是我们为了在移动网站上进行测试而精简的基本代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Testing - Order #123456</title>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/icon.png" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="viewport" content="width=device-width, user-scalable=yes" />
<meta name="format-detection" content="telephone=no" />
<link href="/css/test.css" rel="stylesheet" type="text/css" />
<meta property="og:title" content="Test - Order #123456" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://m.website.com/page1.jsp?order_nbr=123456"/>
<meta property="og:image" content="../../images/mobile_files/logo.png" />
<!--asynchronous loader-->
<script src="../../js/init.js" type="text/javascript"> </script>
</head>
<body>
<DIV id="fb-root"></DIV>
<DIV id="menu">
<DIV style="float: left; padding:2px; "><fb:send ref="top_left_m" ></fb:send></DIV>
<DIV style="float: left; padding:2px;"><a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a> </DIV>
<DIV style="float: left; padding:2px;"> <a data-pin-config="none" data-pin-do="buttonPin" href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Fm.website.com%2Fjsp%2Forder.jsp%3Fjob_order_id%3D%3C%25%3DjobOrderId%25%3E&media=http%3A%2F%2Fm.website.com%2Fimages%2Fmobile_files%2Flogo.png&description=Testing..."><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a> </DIV>
<DIV style="float: left; padding:2px;"><script type="IN/Share"></script> </DIV>
<DIV style="clear:both;"></DIV>
</DIV>
</body>
</html>
更新:调试器的输出与前几天不同,我相信由于重新部署和/或缓存(服务器和/或本地)先前的测试,但是仍然存在两个主要问题。
.#1 - 主站点正在抓取(返回代码 200)。移动站点返回 502 并且不返回任何内容。
.#2 - 如果我没有登录 Facebook,会出现一个弹出窗口,要求我登录。一旦我登录,窗口就会完全消失。如果我登录 Facebook,会短暂出现一个弹出窗口,然后完全消失。
.#3 - URL 中的参数已被排除为问题。
基于最大问题(#2)的性质......我将把我的问题改为......“为什么 Facebook 发送按钮弹出窗口关闭?”
(如果更合适的话,我会将#1 拆分为一个单独的问题,但我认为最好将所有问题都放在一个问题中来解决我的所有问题)
以防万一,这里是 JS 异步加载器:
(function(doc, script) {
var js,
fjs = doc.getElementsByTagName(script)[0],
add = function(url, id) {
if (doc.getElementById(id)) {return;}
js = doc.createElement(script);
js.src = url;
id && (js.id = id);
fjs.parentNode.insertBefore(js, fjs);
};
// Facebook SDK
add('//connect.facebook.net/en_US/all.js#xfbml=1', 'facebook-jssdk');
// Pinterest
add('http://assets.pinterest.com/js/pinit.js');
// Twitter SDK
add('//platform.twitter.com/widgets.js', 'twitter-wjs');
// LinkedIN
add('//platform.linkedin.com/in.js');
}(document, 'script'));