这听起来像你希望能够+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按钮的ID与其DIV关联:
<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
,具体取决于您希望标记呈现的时间。