用Google Related Links抓住你的访问者

2009 11 3 08:15 PM 1618次查看

分类：Google 标签：Discuz!, Google

细心的用户可能会发现，今天论坛的帖子下方多了个谷歌相关链接栏目（如下图），实际上它是Google Labs今天推出的一项新服务：Google Related Links。


之前我也曾改写了一个Discuz!楼主热帖插件，仅管算法很简单，但仍要改很多代码，且消耗数据库资源，所以对初学者来说比较麻烦。
而这个Google Related Links却只需要加段JavaScript代码即可实现，任何水平的人都能简单做到，但前提是你的网页被Google收录了。

目前Google Related Links只提供了2种语言：英语和中文，看来Google很看重中国的用户啊。

试用的话只需去Google Related Links演示页面，把所有的输入框都填上，然后点“试一试”按钮即可。

在自己的网站上使用则需要申请：发邮件给relatedlinks@google.com，并说明您的gmail帐号，网站域名和网页浏览量（page view）即可。
考虑到收信人可能不懂中文，所以我是用英文写的，需要的可以照抄我的（红色文字填你自己的）：
标题：Apply for Related Links （申请相关链接）
内容：
Hi, Google Related Links Team

I'm very interested in the Related Links, may I have a chance to try it?

My account is 你的账号@gmail.com, domain is 你的域名, and pv is about 你的PV数 pages/day.

Thank you!
申请非常快，我发出去9分钟就收到回信了。回信内容就不写了，发现是个中国人，早知道就写中文了…

收到回信后就可以用Gmail账号登录Google Related Links了，然后就多出了一个管理Related Links项。
进入这个页面，就可以编辑、创建和删除Related Links了：


高级配置太长了，我就懒得截图了。唯一要注意的是，名字是不能修改和重复的。


创建好一个Related Links后，就可以获取代码了。而我拿到的代码如下：
<div id="relatedlinks_container_div"></div>
<script language=javascript defer>
  var escFun = window.encodeURIComponent ? window.encodeURIComponent : escape;
  var relatedlinks_js = document.createElement("script");
  relatedlinks_js.setAttribute("charset", "utf-8");
  relatedlinks_js.src = "http://relatedlinks.googlelabs.com/client/client.js?url=" +
      escFun(document.URL) + "&referrer=" + escFun(document.referrer) +
      "&relatedlinks_id=10034_2273265934970339989&title=" + escFun(document.title);
  document.body.appendChild(relatedlinks_js);
</script>
和Google分析的代码一样，我有种很想吐槽的欲望。不过没写document.write()也算是改进了吧。
例如第2行代码：首先属性值javascript没有带引号，其次XHTML里应使用type属性，再次只有IE浏览器支持defer。
看完代码后发现，这段JavaScript只是创建了一个srcipt标签而已。其中url是本页面的地址，referrer是referrer页的地址（实际上不要也行，去掉可以节省字节数），title是页面的标题（Google实际上就是在这里面找关键字）。
于是我构造了一个HTML页面，效果就出来了：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
		<title>Google Related Links测试</title>
		<meta name="author" content="keakon"/>
	</head>
	<body>
		<div id="relatedlinks_container_div"></div>
		<script type="text/javascript" charset="utf-8" src="http://relatedlinks.googlelabs.com/client/client.js?url=http%3A%2f%2fwww.keakon.cn%2fbbs%2fthread-716-1-1.html&relatedlinks_id=10034_2273265934970339989&title=%D3%C3Google%20App%20Engine%2BjQuery%B4%F2%D4%ECAJAX%C1%C4%CC%EC%CA%D2"></script>
	</body>
</html>
而实际上，如果是动态页面的话，这个JavaScript的地址完全没必要用JavaScript代码生成，直接在服务器端生成就够了，所以下面演示一个PHP的实现：
<div id="relatedlinks_container_div"></div>
<script type="text/javascript" charset="utf-8" src="http://relatedlinks.googlelabs.com/client/client.js?url=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?>&referrer=<?php echo urlencode($_SERVER['HTTP_REFERER']); ?>&relatedlinks_id=你的relatedlinks_id&title=<?php echo $title; ?>">
其中会用到不少$_SERVER里的东西，如果是用Google App Engine的话，应该使用os.environ字典获取这些变量。而$title是你的页面的标题，relatedlinks_id就改成你自己的吧。

而Discuz!也是用PHP，所以上面的方法当然也可用，只是得提前构造一下。
而我喜欢在模板里改写，所以得稍微改改，以符合Discuz!模板的要求。（顺便抱怨一下，Discuz!的模板不支持输出表达式，只能直接输出变量。）
最简单的方式是修改viewthread.htm模板（如果投票帖等也需要显示的话，则那些viewthread开头的模板都需要修改），找个喜欢的位置加上这段代码即可：
<div id="relatedlinks_container_div"></div>
<script type="text/javascript" src="http://relatedlinks.googlelabs.com/client/client.js?url=<!--{echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);}-->&relatedlinks_id=你的relatedlinks_id&title=<!--{echo urlencode($thread[subject]);}-->"></script>
这里我把charset删掉了，因为Discuz!的模板引擎会自动删掉它，而我尝试了很久，也没法修正这个bug，所以用IE浏览会出现乱码。此外还删掉了referrer，这个实际上是给Google做统计用的。

由于没写defer，这样会导致页面载入速度变慢，所以推荐将这段JavaScript代码放在页面最下面。而Discuz!的最下面就是footer.htm模板了，自己找个地方加上吧。
为避免影响其他页面，还可以包在<!--{if CURSCRIPT == 'viewthread' && $page == 1 && $thread['special'] == 0}-->和<!--{/if}-->标签之间。如果特殊主题也需要显示的话，把&& $thread['special'] == 0去掉。

改完编码后，就可以去管理页面看统计信息了：


目前这个client.js还不支持https访问，所以安全页面使用该代码会出现不安全警告。
此外，相关页面必须是被Google收录的，这点要求有点高。我认为Google应该自动将该页面（主要区域）上出现的链接放入相关链接的范围。

2011年5月30日更新：今天收到邮件，Google Related Links服务将在7月25日关闭。

1条评论 你不来一发么↓ 顺序排列 倒序排列

    向下滚动可载入更多评论，或者点这里禁止自动加载。

    想说点什么呢？