Make Google +1 button +1 a specific URL rather than the URL it's on?

Question

Can I make a Google +1 button +1 a specific URL - e.g. my front page, http://www.givingwhatwecan.org/ - rather than the URL the button's on? I've read that you can do this by putting that URL between the g:plusone tags like so:

<g:plusone>http://www.givingwhatwecan.org/</g:plusone>

However I've done this on both http://gwwc2.centreforeffectivealtruism.org/ & http://gwwc2.centreforeffectivealtruism.org/resources/index.php and it only seems to work on the former - if you click the +1 button on the latter, you'll be +1ing http://gwwc2.centreforeffectivealtruism.org/resources/index.php rather than http://www.givingwhatwecan.org/

Answer 1

Your code snippet does not match the one over at NicheProfit. (Though it does match the description, which is inaccurate.)

The custom URL is added as an href attribute on the g:plusone element:

<g:plusone href="http://www.example.com/"></g:plusone>

Alternately, just use Google's code generator, pop open the Advanced Options toggle, and fill out the "URL to +1:" field.

And here's the actual documentation on setting a target URL.

Disregard your two examples behaving differently. They're just wrong in the first place, so not worth debugging.

Answer 2

The new api requires that you do something like this:

<div class="g-plusone" data-href="http://domain.tld/example"></div>

Answer 3

Any user's want to show individual G+ button for different post/pages then they should recommend to use this code:

//where to show 1+ button...

<g:plusone expr:href="data:post.url" size="medium" annotation="bubble"></g:plusone>

and paste this below code before </body> tag:

<script>
    (function() {
        var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
        po.src = &#39;https://apis.google.com/js/client:plusone.js&#39;;
        var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
    })();
</script>