使用来自Canvas的交互式帖子

Question

I am trying to implement Google+ features in a canvas element -

is it possible to request an interactive post popup without the use of gapi.interactivepost.render()?

Similarly, is there a way to trigger gapi.auth.authorize() from JS and have it seen as a user-action? (as would be seen from a direct click on a link/button).

Answer 1

You can't render the Google+ button within within the canvas, but you can place a div over the HTML canvas and can render the button over the canvas. For example:

HTML for canvas and the button target

<p>
  <div id="canvasPlus" style="position:relative">
    <canvas id="canvas" width="800" height="600"></canvas>
    <div style = "position:absolute; top:20px; left:230px;" id="shareContainer">
      <button id="ipost">Share</button>
    </div>
  </div>
</p>

JavaScript for rendering the button over the canvas

<script type="text/javascript">
(function() {
  var po = document.createElement('script');
  po.type = 'text/javascript'; po.async = true;
  po.src = 'https://plus.google.com/js/client:plusone.js?onload=onPlusOneLoaded';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(po, s);
})();

function onPlusOneLoaded(){
  var params = {
    clientid: 'YOUR_CLIENT_ID',
    cookiepolicy: 'single_host_origin',
    scope: 'https://www.googleapis.com/auth/plus.login',
    contenturl: 'https://plus.google.com/pages/',
    calltoactionurl: 'https://plus.google.com/pages/',
    prefilltext: 'Hello Stack Overflow',
  };
  gapi.interactivepost.render('ipost', params);
  drawCanvas();
}

function drawCanvas(){
  var ctx = document.getElementById('canvas').getContext('2d');
  for (var i=0;i<25;i++){
    ctx.fillStyle = "rgba(200,0,0,.5)";
    ctx.fillRect (10 + 10*i, 10 + 10*i, 55, 50);
  }
}
</script>

I'm not sure what you're asking with regards to "seen as a user action" but you can trigger the authorization dialog with an API call such as:

gapi.auth.authorize({
  client_id: 'YOUR_CLIENT_ID',
  cookiepolicy: 'single_host_origin',
  scope: 'https://www.googleapis.com/auth/plus.login'
});

When you do this you lose the ability to perform over the air installs on Android.