动态 Google 加一个 +1 按钮（带有更改的网址）答案

【问题标题】：Dynamic Google plus one +1 button (with changing url)动态 Google 加一个 +1 按钮（带有更改的网址）
【发布时间】：2012-10-27 13:16:19
【问题描述】：

我有一个带有照片库的网站，我希望加一个按钮指向照片页面而不是画廊本身，这意味着我需要在用户翻阅图像时动态更改它。这样做的正确方法是什么？

【问题讨论】：

标签： php javascript web google-plus google-plus-one

【解决方案1】：

把这个写在head标签里：

// Load +1 script
(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);
})();

HTML 代码：

<div id="plusone_container">

</div>

然后在任何你想设置 +1 按钮的 url 的地方写这个 jQuery：

    $("#plusone_container").html('<div id="plusone"></div>');
    gapi.plusone.render("plusone", { "href": "Your URL" });

【讨论】：

【解决方案2】：

来自official documentation：

设置 +1 目标网址

+1 的网址按以下顺序确定：

按钮的 href 属性此属性明确定义 +1 目标网址。

页面的标签如果未提供 +1 按钮的 href 属性，Google 将使用页面的规范 URL。有关为页面定义规范 URL 的更多信息，请参阅此帮助文章。

document.location.href 提供的 URL，不推荐使用。如果这些项目都不存在，Google 将使用在 DOM 中找到的页面 URL。由于此 URL 可能包含会话 ID、锚点或其他实际上不属于规范 URL 的参数，因此我们强烈建议您为 +1 按钮设置 href 属性或向您的页面添加标签。

假设您有一组代表不同照片的标签。让我们假设每张照片都用这样的东西表示：

<div class="single-photo">
    <img/>
    <a href="http://single.photo.com/path">My photo</a>

</div>

添加 +1 按钮的最简单方法就是这样做：

<div class="single-photo">
    <img/>
    <a href="http://single.photo.com/path">My photo</a>
    <div class="g-plusone" data-href="http://single.photo.com/path" data-other-parameter="other-parameter-value"></div>
</div>

【讨论】：

我阅读了文档，但是如果我已经有一个现有的按钮从上述方法之一获取它的 url，我将如何更改它指向的 url 以响应用户翻阅图像？
如何渲染按钮？有两种不同的选择。你用的是哪一个？
我不确定我是否完全理解您的意思，但我想使用 Javascript 使用显式渲染来渲染它，但不更改页面的规范 href。但同样，如果有一种特定的渲染方式可以更轻松地动态更改它，那么这就是我将如何渲染它......
查看更新后的答案。我假设您可以轻松地为每个图像生成路径和 url。这样做比使用 javascript 更容易。
答案仍然成立。只需使用完整的解决方案说明here 即可获取完整的网址。

【解决方案3】：

通过创建显式呈现的按钮并更改规范链接的 href 来解决问题。如果没有向按钮提供 url，它会从规范链接属性中获取它的 url，然后通过重新渲染它，我可以让它每次都指向不同的 url。

【讨论】：

根据文档developers.google.com/+/web/+1button/#parsetags_param，您应该能够调用渲染方法并在 data-href 中传递 url。这对我不起作用——它总是停留在页面上的第一个。但是，如果我在每次渲染之前动态更改规范 url 并且根本不传递 data-href，我可以让它使用新的 url。