【发布时间】:2012-12-04 18:07:13
【问题描述】:
我们正在考虑允许用户通过几个不同的社交媒体网络分享链接。 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'));
【问题讨论】:
-
您页面上的
echo工具的输出是什么?见:https://developers.facebook.com/tools/debug/og/echo?q=<YOUR URL> -
对于三个返回的 502 错误,echo 的输出是“文档返回无数据”,对于没有参数的主站点,它显示整个页面的来源。
-
由于该网站是针对移动设备的,您是否知道正在发生的任何用户代理嗅探可能会阻止服务器显示该页面?
-
我没有考虑过。我们可以包括 FB 刮板用户代理(我相信 facebookexternalhit)来测试它,并将在今天晚些时候尝试。尽管如此,参数问题仍然存在,在主站点上。我们不会在那里嗅探任何 UA。
-
现在我想起来了,我把它反过来了。主站点有 UA 嗅探和重定向(虽然不在 page1.jsp 主站点或移动站点上),而移动版本根本没有任何嗅探。
标签: facebook web-scraping send