使用 javascript 设置 Google +1 按钮网址答案

【问题标题】：Set Google +1 button url with javascript使用 javascript 设置 Google +1 按钮网址
【发布时间】：2011-12-21 21:44:42
【问题描述】：

我正在构建一个基于滑块并通过 javascript 加载新图像的图片库，并且需要通过 javascript 设置 Google +1 按钮的 URL，以便可以在每张图片上设置 +1。

我还需要根据每张图片重新加载 +1 按钮（网址将有一个包含图片 ID 的查询字符串参数以使其唯一）。这可能吗？

【问题讨论】：

标签： javascript jquery social-networking google-plus-one

【解决方案1】：

<!-- Place this tag where you want the +1 button to render -->
<div class="g-plusone" data-annotation="inline" data-href="#"></div>

<!-- Place this render call where appropriate -->
<script type="text/javascript">
(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);
})();

您可以使用以下代码通过 jQuery 更改 gplus href 属性。确保首先包含 jquery 库，然后使用下面的代码：

<script type="text/javascript">
   jQuery(".your-button").click(function(){
       jQuery(".g-plusone").attr("data-href","Your-Value-Goes-Here");
   });
</script>

【讨论】：

【解决方案2】：

把这个写在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" });

【讨论】：