這聽起來像你希望能夠+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
,具體取決於您希望標記呈現的時間。