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?

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?

• php
• javascript
• web
• google-plus
• google-plus-one

3 Answers 3

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

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 remended. 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 remend 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./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./path">My photo</a>
    <div class="g-plusone" data-href="http://single.photo./path" data-other-parameter="other-parameter-value"></div>
</div>

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.