Google +1 按钮更新,可直接分享文章至 Google+

Google 更新了 +1 按钮,使之可以直接用于分享到 Google+。不过目前该代码并未更新到简体中文 Google +1 页面,因为国内不能通过正常的途径访问 Google+

更新之后的代码段如下,可参考 Google +1 按钮的介绍进行部署:

<!--  请将以下代码放在您希望呈现 +1 按钮的位置 -->
<g:plusone annotation="inline"></g:plusone>

<!-- 将以下代码放在<head>之后</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>

只需参照上面的介绍替换即可。效果图:

通过 +1 按钮分享文章到 Google+ 圈子

你甚至还可以自己定义用户在使用 Google +1 按钮分享你的文章时候使用的标题、图片和内容。只需要在 </head> 前加上下面的代码即可:

<!-- Update your html tag to include the itemscope and itemtype attributes -->
<html itemscope itemtype="http://schema.org/Blog">

<!-- Add the following three tags inside head -->
<meta itemprop="name" content="{这里写上分享后的标题}">
<meta itemprop="description" content="{这里写上描述,即分享的内容}">
<meta itemprop="image" content="{这里放上图片地址}">

如果不想放在页头里,也可以放在 <body> 标记之间。代码变为:

<!-- Update your html tag to include the itemscope and itemtype attributes -->
<html itemscope itemtype="http://schema.org/Blog">

<!-- Add the following three tags to your body -->
<span itemprop="name">{这里写上分享后的标题}</span>
<span itemprop="description">{这里写上描述,即分享的内容}</span>
<img itemprop="image" src="{这里是图片地址}">

当然了,一篇篇文章的去设置是不可能的,但是可以动态生成上述代码中 { } 部分的内容,这可是动态网站的强项。如果不会的话可以留言。建议参考为 WordPress 文章添加描述和关键词 Meta 元标记。根据我的测试,如上图,只要有 Meta 元标记,Google +1 按钮就会自动调用其标题和描述,这样一来就不行要额外增加这些描述代码了。

还有不少玩法,可以参考 Google Plusone 页面。如果你看到的是中文,可以在左上角切换为英文,这样才能看到更新后的代码与方法。只是需要用户能够访问 Google+ 以及 Google +1 服务器才能正常使用。

用户咱们够不着,不过可以让自己能看到 +1 按钮。一般按照修改 HOSTS 的方法能够正常访问 Google+ 的童鞋,只需要再增加一行,将 plusone.google.com 的 IP 也指向可用的 Google IP 即可。具体 HOSTS 可参考这里后面的部分。©

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

9 条关于 “Google +1 按钮更新,可直接分享文章至 Google+” 的评论

  1. 引用通告: Google 开始推广加一(+1)按钮 « 水景一页

  2. 他这个JS会调出图标的。我要的效果是就跟那些分享SNS的一样。不用图标的。是文字链接效果。

雁过留声,人过留名

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

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