Question

我有一个画廊页面，其中有一个主页面和小拇指，当他们点击小拇指时它会在主图像部分显示它但是我的谷歌+按钮只会反映页面加载时的第一个图像和图像是更改它不会更新新图像。

任何帮助都会很棒谢谢。

我的代码

它在字符串构建器

中

<div id='divGPlusone' class='g-plusone' data-size='medium' data-annotation='inline' data-width='300' data-href='http://" & siteURL & "'></div>

JS

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

Answer 1

听起来您希望能够为主页+1，并为动态加载的唯一图像设置+1。您在问题中的+1按钮代码足以满足主页+1。

每次用户点击图片时，您都希望为图片动态创建新的+1按钮，或更改现有按钮的data-href参数。您选择哪个选项可能决定您的页面设计。我将举两个方法的例子：

动态为图片插入新的+1按钮：

<script type="text/javascript">
  // Assuming you have an existing method that is swapping the images.
  function loadImage() {
    // Existing image swap code runs

    // Assume you have a URL that can be externally referenced and points directly
    // to the unique image rather than to the main page, otherwise, doesn't make a 
    // lot of sense to +1 it.
    var uniqueImagePage = 'http://example.com/gallery/image005.html';

    // Dynamically render a new +1 button
    // First insert a node to attach the button to.
    var div = document.createElement('div');
    div.id = 'image005';

    // Assume you have a container element that your image also goes into
    var container = document.getElementById('imgContainer');

    // Append the new +1 button into that container
    container.appendChild(div);

    var plusOneOptions = {
      'href' : uniqueImagePage,
      'width' : '300'
      // Any other params
    };
    gapi.plusone.render('image005',plusOneOptions);
  }
</script>

动态更改现有+1按钮的网址

我们假设您现有的+1按钮具有与其DIV相关联的ID：

<div
  id="imagePlusOneButton"
  class="g-plusone"
  data-href="http://example.com/oldurl.html">
</div>

然后，当您在图库中交换图片时，您将更改网址：

<script type="text/javascript">
  // Assuming you have an existing method that is swapping the images.
  function loadImage() {
    // Run existing image swap code.

    // Change the +1 button URL
    var plusDiv = document.getElementById('imagePlusOneButton');

    // Change URLs associated with the current button
    plusDiv.setAttribute('data-href','http://example.com/newUrl.html');

  }
</script>

如果你不想为每个图像注入新的+1按钮，而是有一个用于主页面，而另一个用于当前显示的图像，则此方法也适用于第一种方法。

gapi.plusone.render() method是使用+1按钮执行任何动态操作所需的操作。有时您还需要将全局配置参数parseTags设置为explicit，具体取决于您希望标记呈现的时间。

Google Plus按钮图像更新

1 个答案: