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的一样。不用图标的。是文字链接效果。

    • 嗯,了解。这种还真是没见到过,也没见它的文档里有提到。

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