Trouble Setting Up The Google Plus One Tag?

A Little Experiment - Google Plus One Not Working And How I Fixed It

 
This post is a little experiment.. rather than being an article pertaining directly to dating, it’s more about a technical component of the site: The Google Plus One button, and my issues with it not working. If this article is well received, I may very well post more of these.
 

Google Plus One

 
So, the other day I found out about the new Google Plus one feature. It’s a social feature, similar to Facebook “Like,” that allows website visitors to cast their vote for that site and tell Google how much they love it. It’s not used by any Google algorithms to influence the search results (yet), but the plan is to have the plus one votes listed beside the site in the search results. Apparently, if any of your friends on your Google profile have given a site the Plus One, you may be notified.
 
Down to the nitty gritty: I went to the Google Plus One homepage for webmasters, which allows you to create a button to add the “Plus 1″ button to your site. Filling out their form gives you something like this:
 

<!-- Place this tag in your head or just before your close body tag -->
<script type=”text/javascript” src=”http://apis.google.com/js/plusone.js”></script>

<!– Place this tag where you want the +1 button to render –>
<g:plusone></g:plusone>

 
I happily added the script tag to my header, and the <g:plusone> to a nested div just above CupidMarket’s main login box, then ran the build locally. What? It didn’t show up. The tag remained as <g:plusone>. Puzzled, I uploaded my changed gsp page to CupidMarket’s servers, and refreshed. Still the button didn’t show up. And when I inspected the source with Firebug, I saw that the html element g:plusone hadn’t been replaced (on a working site, the DOM is updated by Google’s “plusone.js” javascript, replacing it with an iframe containing the clickable button).
 
I scratched my head for a while, trying different things, and eventually gave up. Having stayed up too late (yet again), I decided I’d take out all the Google Plus One code the next evening.
 

Discovering An Undocumented Google Plus One Problem

 
The next evening I decided to give it one more try. I was nesting the <g:plusone> tag deep within the divs of my page body, so on a hunch I supposed that the Google DOM parsing code couldn’t handle it. I decided to try putting it as the first tag in the body. Behold! It worked! The <g:plusone> was replaced with the Plus One button iframe.
 
I took a look at the Google Plus One Full Documentation and discovered the explicit “parsetags” option, and noticed that with it, you could use the gapi.plusone.go() javascript method to specifically the exact name of the parent div that contains your <g:plusone> tag. So, I nested that tag in a new div, named “plusOneBox”, then called the gapi.plusone.go() javascript method, specifying the class as the argument.
 
And that code looks something like this:
 

<div class="plusOneBox">
<g:plusone count=”true” size=”standard” href=”http://www.cupidmarket.com”></g:plusone>
</div>
<script type=”text/javascript”>
gapi.plusone.go(”plusOneBox”);
</script>

 
Viola. I can now place my Google Plus One button anywhere I want on the page. It’s kind of an undocumented gotcha, since nowhere in the Google docs (as of June 7th, 2011) is it mentioned that the default button won’t work if you nest it within too many divs.
 

Summary

 
I hope you enjoyed this little experiment into the technical side of this site. If you enjoyed it, +1 the page. And if the Google Plus One Button is not working for you, follow the above steps to remedy your problem!