Skip to main content

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

Comments

Popular posts from this blog

Cool Math Tricks: Deriving the Divergence, (Del or Nabla) into New (Cylindrical) Coordinate Systems

The following is a pretty lengthy procedure, but converting the divergence, (nabla, del) operator between coordinate systems comes up pretty often. While there are tables for converting between common coordinate systems, there seem to be fewer explanations of the procedure for deriving the conversion, so here goes!

What do we actually want?

To convert the Cartesian nabla



to the nabla for another coordinate system, say… cylindrical coordinates.



What we’ll need:

1. The Cartesian Nabla:



2. A set of equations relating the Cartesian coordinates to cylindrical coordinates:



3. A set of equations relating the Cartesian basis vectors to the basis vectors of the new coordinate system:



How to do it:

Use the chain rule for differentiation to convert the derivatives with respect to the Cartesian variables to derivatives with respect to the cylindrical variables.

The chain rule can be used to convert a differential operator in terms of one variable into a series of differential operators in terms of othe…

The Valentine's Day Magnetic Monopole

There's an assymetry to the form of the two Maxwell's equations shown in picture 1.  While the divergence of the electric field is proportional to the electric charge density at a given point, the divergence of the magnetic field is equal to zero.  This is typically explained in the following way.  While we know that electrons, the fundamental electric charge carriers exist, evidence seems to indicate that magnetic monopoles, the particles that would carry magnetic 'charge', either don't exist, or, the energies required to create them are so high that they are exceedingly rare.  That doesn't stop us from looking for them though!

Keeping with the theme of Fairbank[1] and his academic progeny over the semester break, today's post is about the discovery of a magnetic monopole candidate event by one of the Fairbank's graduate students, Blas Cabrera[2].  Cabrera was utilizing a loop type of magnetic monopole detector.  Its operation is in concept very simpl…

Kids R Kapable

Just a little note to concerned ‘grownups’ everywhere.  If you look at a kid—and I mean really look—I don’t mean notice a person shorter than you, I mean make eye contact, notice their facial expression and observe their body language—If you look at a kid, don’t assume they need your help unless they’re obviously distressed, or ask for it.  You might think this is difficult call to make.  You might think, not having kids of your own, that you’re unable to make this determination.  You are.  You do in fact, already have the skills even if you’ve never been around kids  It’s a remarkably simple call to make, just use the exact same criteria you would for determining if an adult was in distress.  Because, guess what, kids and adults are in fact the same species of animal and communicate in the same way.  Honest.  If someone—adult or child—doesn’t need your help, feel free to say hello, give a wave, give a smile, but don’t—do not—try to force help on anyone that doesn’t want or need it.



Y…