有没有注意到水景一页右页底边栏上的 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+ 徽章对外观设置进行了更新,增加了宽高设置和主题色调( light
和 dark
)同时减少了样式。下面的内容已经更新。
普通设置代码:
<!-- 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/>。转载请保留此信息及相应链接。