Динамичен Google плюс един бутон +1 (с променящ се url)

Имам уебсайт със фотогалерия и искам бутонът плюс едно да сочи към страницата със снимки, а не към самата галерия, което означава, че ще трябва да го променя динамично, когато потребителят прелиства изображенията. Какъв би бил правилният начин да направите това?


person Geva Tal    schedule 07.11.2012    source източник


Отговори (3)


Напишете това в етикета head:

// 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

От официалната документация:

Задаване на целеви 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

Проблемът е решен чрез създаване на бутон, който е изрично изобразен, и промяна на href на каноничната връзка. Ако към бутона не е предоставен URL адрес, той взема своя 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