Динамический Google плюс одна кнопка +1 (с изменением URL)

У меня есть веб-сайт с фотогалереей, и я хочу, чтобы кнопка плюс один указывала на страницу с фотографиями, а не на саму галерею, а это означает, что мне нужно будет динамически изменять ее, когда пользователь листает изображения. Что было бы правильным способом сделать это?


javascript web php google-plus google-plus-one
person Geva Tal    schedule 07.11.2012    source источник

Ответы (3)


arrow_upward
4
arrow_downward

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

// 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" });
person Ali Gonabadi    schedule 26.06.2013

arrow_upward
2
arrow_downward

Из официальной документации:

Установка целевого URL +1

URL с +1 определяется в следующем порядке:

  1. Атрибут кнопки href Этот атрибут явно определяет целевой URL +1.
  2. Тег страницы. Если атрибут href кнопки +1 не указан, Google использует канонический URL-адрес страницы. Дополнительные сведения об определении канонического URL-адреса для страницы см. В этой справочной статье.
  3. URL-адрес, предоставленный document.location.href, что не рекомендуется. Если ни один из этих элементов отсутствует, Google использует URL-адрес страницы, найденный в DOM. Поскольку этот URL-адрес может содержать идентификаторы сеанса, привязки или другие параметры, которые на самом деле не являются частью канонического URL-адреса, мы настоятельно рекомендуем либо установить атрибут href для кнопки +1, либо добавить тег на свою страницу.

Предположим, у вас есть набор тегов, представляющих разные фотографии. Предположим, каждая фотография представлена ​​чем-то вроде этого:

<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>
person Serabe    schedule 07.11.2012
comment
Я прочитал документацию, но если у меня уже есть кнопка, URL-адрес которой был получен одним из вышеперечисленных методов, как мне изменить URL-адрес, на который она указывает, в ответ на то, что пользователь листает изображения? - person Geva Tal; 07.11.2012
comment
Как вы визуализируете кнопку? Есть два разных варианта. Какой вы используете? - person Serabe; 07.11.2012
comment
Я не уверен, что полностью понимаю, что вы имеете в виду, но я хотел бы визуализировать его с помощью Javascript, используя явный рендеринг, но не изменять канонический href страницы. Но опять же, если есть конкретный способ визуализации, который упростит его динамическое изменение, тогда я буду его визуализировать ... - person Geva Tal; 07.11.2012
comment
Посмотрите обновленный ответ. Я предполагаю, что вы можете легко создать оба пути и URL-адрес для каждого изображения. Сделать это проще, чем использовать javascript. - person Serabe; 07.11.2012
comment
Я не уверен, что вы поняли мою проблему, я постараюсь уточнить: я хочу создать одну кнопку +1, указывающую на соответствующее изображение / видео / swf, которое в данный момент просматривается в плеере, а не для создания отдельной кнопки для каждого элемента (поскольку они не отображаются одновременно ..) - person Geva Tal; 07.11.2012
comment
Тем не менее ответ остается. Просто используйте что-то вроде полного решения, объясните здесь чтобы получить полный URL. - person Serabe; 07.11.2012
comment
Хорошо, я решил проблему, изменив элемент ‹link href = pictureUrl rel = canonical›, изменив атрибут href и вызвав gapi.plusone.render (plusone-div); обновляет кнопку. Спасибо за вашу помощь! - person Geva Tal; 07.11.2012

arrow_upward
0
arrow_downward

Решил проблему, создав кнопку, которая явно отображается, и изменив href канонической ссылки. Если для кнопки не указан URL-адрес, он берет его из атрибута канонической ссылки, тогда, повторно отображая его, я могу каждый раз указывать на другой URL-адрес.

person Geva Tal    schedule 08.11.2012
comment
Согласно документации developers.google.com/+/web/+1button/# parsetags_param, вы должны иметь возможность вызывать метод рендеринга и передавать URL-адрес в data-href. У меня это не сработало - всегда оставалось с первым на странице. Но если я динамически меняю канонический URL-адрес непосредственно перед каждым рендерингом и вообще не передаю data-href, я могу заставить его использовать новый URL-адрес. - person ; 17.02.2015