动态Google加一个+1按钮(更改网址)

时间:2012-11-07 13:09:34

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

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

3 个答案:

答案 0 :(得分:4)

在头标记中写下:

// 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>

并将此jQuery写入您想要设置+1按钮的网址:

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

答案 1 :(得分:2)

来自official documentation

  

设置+1目标网址

     

+ 1的URL按以下顺序确定:

     
      
  1. 按钮的href属性   此属性明确定义+1目标网址。
  2.   
  3. 页面标记   如果未提供+1按钮的href属性,Google会使用该网页的规范网址。有关为页面定义规范URL的详细信息,请参阅此帮助文章。
  4.   
  5. document.location.href提供的URL,不推荐使用。   如果这些项目都不存在,Google会使用在DOM中找到的网页网址。由于此网址可能包含会话ID,锚点或实际上不属于规范网址的其他参数,因此我们强烈建议您为+1按钮设置href属性或向网页添加标记。
  6.   

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

<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>

答案 2 :(得分:0)

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