Novel uses of the Google+ button widget

I’m still learning the Google+ features for publishing but I realized how useful and simple it would be to perform various cool things using the + button.  The following examples are just the tip of the iceberg for what is possible using Google+ buttons like this.

A/B Testing

Let’s say that you’re interested in where the best place to put the button is and want to test whether you should place the button at the top, middle, or bottom of your page.  What you could do is create three buttons with different href targets so that each target is focused to the anchor, this will separate metrics for the various target buttons.  The following code shows how my buttons were specified with a little hipster ipsum to help make it a little more exciting.

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

<!-- Place this tag where you want the +1 button to render. -->
<a name="top">Top</a>
<g:plusone size="medium" href="http://wheresgus.com/gplustest.html#top" annotation="none" width="300"></g:plusone>
</p>
<p>
Nulla et butcher jean shorts, mustache sapiente fixie esse readymade. Small batch pork belly duis skateboard, mumblecore yYOLO.
{...}
</p>
<p>
Occupy +1 kale chips salvia lo-fi, organic fixie minim PBR aesthetic assumenda enim pariatur put a bird on it odio. Authentic banh mi freegan, nostrud irony aliquip photo booth yr direct trade assumenda godard. +1 occupy nostrud yr marfa cray. 3 wolf moon portland bicycle rights{...}</p>
<a name="middle">Middle</a>
<g:plusone size="medium" href="http://wheresgus.com/gplustest.html#middle" annotation="none" width="300"></g:plusone>
<p>
{...}
Occaecat nulla before they sold out VHS, bushwick fixie laboris. Farm-to-table letterpress ennui chambray nihil. Pinterestmessenger bag anim butcher keffiyeh, lomo occupy lo-fi street art vinyl.
</p>
<p>
{...}
Banksy anim american apparel, pariatur irony fap biodiesel master cleanse dolore gastropub cray squid labore jean shorts.
</p>
<a name="end">End</a>
<g:plusone size="medium" href="http://wheresgus.com/gplustest.html#end" annotation="none" width="300"></g:plusone>

</body>
</html>

The following image shows how this looks when rendered:

I created a live version of the content showing the various buttons in place, note that I disabled the balloons that show button counts because this could sway users to click one more than another. I also created another live version that will only show one button at a time.

After users click on the various buttons, Google will instrument the clicks and you can see them on your Google analytics dashboard as described in About Social Button Analytics in the Google developer documentation. With a little profile-fu you could instrument the specific A/B test for a number of additional scenarios.

Creating the world’s easiest custom voting application

Another novel use of the + button: adding voting to site aspects.  Just as before, I have implemented + buttons in HTML with unique identifiers for three images.  The way that I implemented this was to place vote buttons next to images to show a count of clicks.  A user could then just vote for as many items as they choose to vote for, and a live vote could be in place.

The following code shows how I create the + buttons for voting:

<p>
Please + your favorite!
</p>
<p>
<!-- Place this tag where you want the +1 button to render. -->
<a name="YOLO">YOLO</a><br/><g:plusone size="medium" href="http://wheresgus.com/gplusvote.html#YOLO" annotation="bubble"></g:plusone>
</p>
<p>
<img src="yolo.jpg">
<p>
<a name="3wolves">3 Wolf Moon</a><br/><g:plusone size="medium" href="http://wheresgus.com/gplustest.html#3wolves" annotation="bubble"></g:plusone>
</p>
<p>
<img src="3wolves.jpg">
</p>
<p>
</p>
<p>
<a name="end">Fixie Shirt</a><br/><g:plusone size="medium" href="http://wheresgus.com/gplustest.html#end" annotation="bubble"></g:plusone>
</p>
<p>
<img src="fixie.jpg">
</p>

The following screenshot shows the example voting demo:


You can also
see a live version of the voting demo here.

For further discussion

I’m sure there are a ton of novel uses that I haven’t thought up for buttons so feel free to share in comments. Also, if you’re going to be at Google I/O next week, I will be in the Google+ area, so find me and tell me all about it!