Question

当A在Facebook上发布链接，然后B点击Chrome中的链接（不在Firefox中，并且未测试其他链接）时，B看到Facebook上的白色“f”显示在蓝色背景图标（favicon.ico）上在链接页面的选项卡上。有时，大概是当页面有自己的图标时，刷新该标签会用正确的图标替换图标;但最常见的是Facebook图标仍然存在。起初我认为Facebook正在以某种棘手的方式使用框架，但使用View Source，似乎并非如此。如何以一种方式编程href或重定向，以便像Facebook一样将自己的图标预加载到链接页面上？

(screenshot)

这是我尝试过的没有成功，我的图标被替换为什么（只在Firefox中的标签和导航栏中显示，仅在Chromium的标签中显示，但这不是重点）：

http://unixshell.jcomeau.com/tmp/linktest/index.html

jcomeau@unixshell:~/www/www/tmp/linktest$ cat index.html
<html>
<head>
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<a href="redirect.html?url=http://homesteadingsurvivalism.myshopify.com/">homesteadingsurvivalism.myshopify.com</a>
</body>
</html>
jcomeau@unixshell:~/www/www/tmp/linktest$ cat redirect.html 
<html>
<head>
<link rel="shortcut icon" href="favicon.ico" />
<script language="javascript" type="text/javascript">
var newpage = window.location.search.substring(5);
window.setTimeout('window.location = newpage; ', 3000);
</script>
</head>
<body>
<p>Redirecting to selected site, please wait...</p>
</body>

在Yan的评论之后，我也尝试了redirect.cgi没有成功：

jcomeau@unixshell:~/www/www/tmp/linktest$ cat redirect.cgi; QUERY_STRING=url=http://this.is.a.test/ ./redirect.cgi 
#!/bin/bash
echo -ne "Content-type: text/html\r\n"
echo -ne "Location: ${QUERY_STRING:4}\r\n"
echo -ne "\r\n"
cat <<-EOF
    <html>
    <head>
    <link rel="shortcut icon" href="favicon.ico" />
    </head>
    <body>
    Redirecting to ${QUERY_STRING:4}
    </body>
    </html>
    EOF
Content-type: text/html
Location: http://this.is.a.test/

<html>
<head>
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
Redirecting to http://this.is.a.test/
</body>
</html>

Answer 1

当我向http://www.facebook.com/l.php?u=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DBwCjI4mWPFI&h=yAQG6-ic8AQF_aOjn3QCJxdul6VnDN1Ho_ltT2gX90NF-vQ发出GET请求时，我收到以下响应（为了便于阅读，我在HTML中添加了一些换行符）：

HTTP/1.1 200
Content-Length: 349
Cache-Control: private, no-cache, no-store, must-revalidate
Expires: Sat, 01 Jan 2000 00:00:00 GMT
P3P: CP="Facebook does not have a P3P policy. Learn why here: http://fb.me/p3p"
Pragma: no-cache
Refresh: 1;URL=http://www.youtube.com/watch?v=BwCjI4mWPFI
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Set-Cookie: ***removed***
Content-Type: text/html; charset=utf-8
X-FB-Debug: ***removed***
Date: Fri, 27 Apr 2012 00:49:25 GMT
Connection: close

<html>
<head></head>
<body>
<script type="text/javascript">
document.location.replace("http:\/\/www.youtube.com\/watch?v=BwCjI4mWPFI");
</script>
<script type="text/javascript">
setTimeout("(new Image()).src=\"\\\/laudit.php?r=JS&u=http\\u00253A\\u00252F\\u00252Fwww.youtube.com\\u00252Fwatch\\u00253Fv\\u00253DBwCjI4mWPFI\";",5000);
</script>
</body>
</html>

简短的试用版了解到Refresh标题足以让它发挥作用。这是PHP中的一个简单实现：

<?php

header("Refresh: 1;URL=http://www.a-website-without-favicon.com/");

?>

但是，如前所述：只有在您所指的网站没有图标时，这才有效。

Answer 2

虽然我不完全确定Facebook是如何做到的，但您可以尝试使用代理PHP脚本和建议here加载AJAX内容。

/* proxy.php */
<?php echo file_get_contents($_GET['url']);?>


<html><body><div id="contentArea"></div></body></html>

$("#contentArea").load('proxy.php?url=http://example.com');

首先，您将使用首选favicon.ico加载自己的空白页。然后使用AJAX，您将加载保留旧favicon.ico的首选内容。

Facebook使用什么技巧将其图标注入链接页面？

2 个答案: