给自己的博客添加 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/>。转载请保留此信息及相应链接。

雁过留声,人过留名

您的电子邮箱地址不会被公开。 必填项已用 * 标注

特别提示:与当前文章主题无关的讨论相关但需要较多讨论求助信息请发布到水景一页讨论区的相应版块,谢谢您的理解与合作!请参考本站互助指南
您可以在评论中使用如下的 HTML 标记来辅助表达: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>