Facebook 将其图标注入链接页面的技巧是什么？答案

【问题标题】：what is the trick Facebook uses to inject its icon onto a linked page?Facebook 将其图标注入链接页面的技巧是什么？
【发布时间】：2012-04-27 08:54:45
【问题描述】：

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

这是我尝试过但没有成功的方法，我的图标被替换为什么都没有（并且仅显示在 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>

在严的评论之后，我也尝试了没有成功 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>

【问题讨论】：

您指的是一个已知的 chrome 错误，如此处所述：stackoverflow.com/questions/8935205/…
好谷歌福！从来没有找到那个。

标签： facebook favicon chromium

【解决方案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/");

?>

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

【讨论】：

【解决方案2】：

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

/* 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 的首选内容。

【讨论】：

但这实际上并没有将目标站点的 URL 放在浏览器导航栏中，就像 Facebook 在重定向后所做的那样；还是我误解了什么？