Установите Google +1 кнопку URL с помощью JavaScript

Question

Я создаю галерею изображений, основанную на слайдере, и загружаю новые изображения с помощью javascript, и у меня есть требование установить URL-адрес кнопки Google +1 с помощью javascript, чтобы +1 можно было установить для каждого изображения.

Мне также нужно перезагрузить кнопку +1 в зависимости от каждого изображения (URL будет иметь параметр строки запроса, содержащий идентификатор изображения, чтобы сделать его уникальным). Это возможно?

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

Вы можете использовать следующий код для изменения атрибута gplus href с помощью jQuery. Обязательно сначала включите библиотеку jquery, а затем используйте код ниже:

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

Answer 2

Напишите это в заголовке тега:

// 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 везде, где вы хотите установить URL кнопки +1:

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