2

I have a website with a photo gallery and i want the plus one button to point to the photo page and not to the gallery itself, meaning that i will need to change it dynamically when the user flips through images. What would be the proper way of doing that?

Geva Tal
  • 340
  • 3
  • 14

3 Answers3

4

Write this in head tag:

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

The HTML Code:

<div id="plusone_container">

</div>

And write this jQuery anywhere you want to set +1 button's url:

    $("#plusone_container").html('<div id="plusone"></div>');
    gapi.plusone.render("plusone", { "href": "Your URL" });
Ali Gonabadi
  • 944
  • 1
  • 10
  • 28
2

From the official documentation:

Setting the +1 target URL

The URL that is +1'd is determined in the following order:

  1. The button's href attribute This attribute explicitly defines the +1 target URL.
  2. The page's tag If the +1 button's href attribute is not provided, Google uses the page's canonical URL. For more information on defining the canonical URL for a page, see this help article.
  3. The URL provided by document.location.href , which is not recommended. If none of these items are present, Google uses the URL of the page as found in the DOM. Because this URL might contain session IDs, anchors, or other parameters that are not actually part of the canonical URL, we highly recommend either setting the href attribute for the +1 button or adding a tag to your page.

Let's assume you have a collection of tags representing different photos. Let's assume each photo is represented by something like this:

<div class="single-photo">
    <img/>
    <a href="http://single.photo.com/path">My photo</a>

</div>

The easiest way to add a +1 button would be just doing this:

<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>
Serabe
  • 3,834
  • 19
  • 24
  • I read the documentation, but if i already have an existing button which got it's url from one of the methods above, how would i change the url it's pointing to in response to the user flipping through images? – Geva Tal Nov 07 '12 at 13:20
  • How are you rendering the button? There are two different options. Which one are you using? – Serabe Nov 07 '12 at 13:21
  • I'm not sure I fully understand what you mean, but I would like to render it with Javascript using the explicit render, but not change the canonical href of the page. But again, if there is a specific way to render it that will make it easier to change it dynamically then that's how I will render it... – Geva Tal Nov 07 '12 at 13:28
  • Look at the updated answer. I'm assuming you can easily generate both paths and url for each image. Doing it this way is easier than using javascript. – Serabe Nov 07 '12 at 13:39
  • I'm not sure you understood my issue, i will try to clarify: I want to create one +1 button point to the relevant image/video/swf that is being viewed at the moment in a player, not to create an individual button for each item (since they are not displayed simultaneously..) – Geva Tal Nov 07 '12 at 15:20
  • 1
    Still the answer holds. Just use something like the complete solution explain [here](http://stackoverflow.com/questions/189113/how-do-i-get-current-page-full-url-in-php) to get the full url. – Serabe Nov 07 '12 at 16:08
  • Ok,I solved the issue by changing the element, changing the href attribute and calling "gapi.plusone.render("plusone-div");" refreshes the button. Thanks for your help! – Geva Tal Nov 07 '12 at 16:16
0

Solved the problem by creating a button that is explicitly rendered, and changing the href of the canonical link. If no url is provided to the button it takes it's url from the canonical link attribute, then by re-rendering it i can make it point to a different url every time.

Geva Tal
  • 340
  • 3
  • 14
  • According to the documentation https://developers.google.com/+/web/+1button/#parsetags_param you should be able to call the render method and pass the url in data-href. This didn't work for me - it always stuck with the first one on the page. But if I dynamically change the canonical url just before each render and don't pass a data-href at all I can get it to use the new url. –  Feb 16 '15 at 21:22