Adding A JavaScript Controlled Google Plus Interactive Post Button

While learning all about adding a Google+ sign-in button, I noticed a new Google+ sevice, the interactive post.  An interactive post is the same as a normal Google+ post with the addition of a button that performs some 'action' on the target web site.  For an example Google+ interactive post, look here[4].  The Copasetic Flow web sites don't lend themselves to most social networking APIs, there's nothing to buy here yet, and there's no music or movies, but it occurred to me that there is somethinng to watch, the APRS tours[1].  Finally, I have an excuse to play with a social networking API!

The mechanisms for using Google+ interactive posts are fairly well described by Google on their docuementation page[2], so I won't walk you back through that.  Where I ran into a few simple problems, (two to be exact), was with trying to influence the post contents using JavaScript.

First, when trying to write to a button on the fly[3] using gapi.interactivepost.render(), I was under the impression that I could just add a naked div something like the following to my page and the render code would take care of the rest.

<div id="actbutton">
</div>

I was wrong.  In fact, what you need is a span or div that contains the class information for the interactive post button, (it makes perfect sense upon reflection).  Use something like this

<button id="actbutton" disabled="disabled" 
  class="g-interactivepost"
  data-contenturl="http://copaseticflows.appspot.com/aprsdotfly"
  data-contentdeeplinkid="/aprsdotfly"
  data-clientid="xxxxxx.apps.googleusercontent.com"
  data-cookiepolicy="single_host_origin"
  data-prefilltext="Engage your users today, create a Google+ page for your business."
  data-calltoactionlabel="WATCH"
  data-calltoactionurl="http://copaseticflows.appspot.com/aprsdotfly"
  data-calltoactiondeeplinkid="/aprsdotfly">
  Share APRS Tour on G+
</button>    

The only other issue I ran into had to do with the inclusion of the requestvisibleactions field in the options passed to the JavaScript render call.  When I was working on this the field was not included in Google's example code.  It turns out that the field is required and Google's code will barf without it.  So, change Google's example code to look more like:

      var options = {
          contenturl: 'http://copaseticflows.appspot.com/aprsdotfly',
          contentdeeplinkid: '',
          clientid: 'xxxxxx.apps.googleusercontent.com',
          cookiepolicy: 'single_host_origin',
          prefilltext: sh_title,
          calltoactionlabel: 'WATCH',
          calltoactionurl: tour_link,
          calltoactiondeeplinkid: '',
          requestvisibleactions: 'http://schemas.google.com/AddActivity'
      };
      // Call the render method when appropriate within your app to display
      // the button.
      gapi.interactivepost.render('actbutton', options);

AddActivity is the default value for the requestvisibleactions field, but it still has to be specified, or you'll get a  'request_visible_actions=undefined' error.

References 

1.  http://copaseticflows.appspot.com/aprsdotfly?tour=ahRzfmNvcGFzZXRpY2Zsb3dzLWhyZHISCxIJQVBSU1RyYWNrGJmzxAMM

2.  https://developers.google.com/+/web/share/interactive?invite=true

3.  https://developers.google.com/+/web/share/interactive?invite=true#rendering_the_button_with_javascript

4.  https://plus.google.com/u/0/108242372478733707643/posts/Hzb7hM8pMPK