给自己的博客添加 Google+ 徽章(Badge)

有没有注意到水景一页页底边栏上的 Google+ 徽章呢?(没看见的话您就 out 了,赶紧参考这里修改您的 HOSTS 吧。)是的,Google+ 的官方徽章已经可以使用了,而且相当简单。如果你还没有给自己网站添加一个来自 Google+ 的小徽章,不妨看看下面的介绍。

前不久 Google 公开了 Google+ 企业信息页,当然个人也可以给自己的小组织申请一个信息页。实际上任何非个人,包括团体或事物都可以申请自己的 Google+ 信息页,比如我就给自己的网站申请了一个 Google+ 信息页。当时见到后台有个 Google+ 的徽章,可是却说象你在右上方看到的这种还在设计中,暂时只能使用一个小图标,blah, blah, blah… 可实际上,如果将自己的个人 Google+ 首要语言设置为英语,此时你拥有的企业信息页也会变成英文的,然后就能看到这种挂件式的徽章了。

当然,如果你不想那么麻烦,也可以直接按照下面的方法操作来给自己的网站挂上 Google+ 徽章。而且,如果是你的个人网站,你还可以选择挂上自己的 Google+ 账号,而不需要为网站创建信息页。

下面分为三个步骤完成添加 Google+ 挂件的任务吧:

注意:下面例子中的那一串长长的数字是水景一页的 Google+ 信息页帐户号,请换成您自己的!

1、在 <head> 中添加声明。

将下面的代码添加到您网页的 <head></head> 之间:

<!-- Place this tag in the <head> of your document-->
<link href="https://plus.google.com/114857171023250218278" rel="publisher" />

2011-12-18 更新:

如果是一个拥有多个作者的网站,因为作者们可能有自己的 Google+ 主页,所以 Google 建议只在网站首页添加该信息,而不要让它出现在内容页面上。对于 WordPress 博客,这一点很好实现,只需要使用下面的代码,即,在上面的代码前后加上一个判断是否为首页的语句:

<?php if ( is_home() || is_front_page() ) : ?>
<link href="https://plus.google.com/114857171023250218278/" rel="publisher" />
<?php endif; ?>

2、添加 +1 按钮 JavaScript 代码。

以下代码使用异步方式加载 +1 按钮的 JavaScript 代码。

是的,没看错,就是 +1 按钮。如果您曾经添加过 +1 按钮的 JavaScript 代码,这一步就可以省略了。

将下面的代码添加到您网页的合适位置,当然可以直接放在 1、 中代码的紧后面;也可以放在页面底部 <footer> 中,即 </body>之前的任意位置。这一部分代码没有需要改动的地方。

<script type="text/javascript">
window.___gcfg = {lang: 'zh-CN'};
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();</script>

3、找个位置放置徽章代码吧。

徽章的代码很简单,而且是 HTML5 兼容的。如果您也使用 WordPress 博客,可以将这段代码放在一个文本微件(text widget)中。注意这里需要将那串数字替换成你自己的。

2012-01-28 更新:

Google+ 徽章对外观设置进行了更新,增加了宽高设置和主题色调( lightdark )同时减少了样式。下面的内容已经更新。

普通设置代码:

<!-- Place this tag where you want the badge to render -->
<g:plus href="https://plus.google.com/114857171023250218278" width="300" height="131" theme="light"></g:plus>

兼容 HTML5 格式代码:

<!-- Place this tag where you want the badge to render -->
<div class="g-plus" data-href="https://plus.google.com/114857171023250218278" data-width="300" data-height="131" data-theme="light"></div>

当然了,Google 现在的用户体验更好了,已经给大家准备了非常容易设置的创建 Google+ 徽章配置程序。只需要在那里配置好,然后参考本文介绍的代码放置位置就可以了。©

本文发表于水景一页。永久链接:<http://cnzhx.net/blog/add-google-plus-badge-to-site/>。转载请保留此信息及相应链接。

时间过去太久,评论已关闭。
如果您有话要说,请到讨论区留言并给出此文章链接。
谢谢您的理解 :-)