Selectively rendering interactive posts

In some rare cases, it makes sense to render interactive posts selectively, falling back to the share button.  For example, you might want to do this when your uses could be fickel enough to drop off when prompted to sign in but still might share content without being signed in to Google+ on your site. In most cases you should not be doing this because the user will automatically be prompted to sign in to your site if they haven’t already and the interactive post button is more engaging than the share button.

Anyways, if you want to do this (and again, this is in extremely rare cases) the following code will get you started.

In short, the page will render an interactive post as follows when logged in to the site:

Screen Shot 2013-03-11 at 10.38.38 AM

When not logged in, the page will render a share dialog:

Screen Shot 2013-03-11 at 10.38.22 AM

The following HTML shows markup where both the interactive post and share buttons are rendered within hidden div tags:

<html>
<head>
  <title>Google+ JavaScript Quickstart</title>
  <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';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
  })();
  </script>
  <!-- JavaScript specific to this application that is not related to API
     calls -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" ></script>
</head>
<body>
  <!-- Place the tag where you want the button to render -->
  <div id="ipost" style="display:none">
    <div
      class="g-interactivepost"
      data-contenturl="https://plus.google.com/pages/"
      data-contentdeeplinkid="/pages"
      data-clientid="YOUR_CLIENT_ID"
      data-cookiepolicy="single_host_origin"
      data-prefilltext="Engage your users today, create a Google+ page for your business."
      data-callback="onInteractiveCallback"
      data-calltoactionlabel="CREATE"
      data-calltoactionurl="http://plus.google.com/pages/create"
      data-calltoactiondeeplinkid="/pages/create">
    <button>Tell your friends</button>
    </div>
    <button id="disconnect">Disconnect</button>
  </div>
  <div id="share" style="display:none">
    <g:plus action="share"></g:plus>
    <span id="signinButton">
      <span
        class="g-signin"
        data-callback="signinCallback"
        data-clientid="YOUR_CLIENT_ID"
        data-cookiepolicy="single_host_origin"
        data-requestvisibleactions="http://schemas.google.com/AddActivity"
        data-scope="https://www.googleapis.com/auth/plus.login">
      <u>Click to upgrade</u>
      </span>
    </span>
  </div>
</body>

The following javascript sets up the disconnect button and adds handlers for the signin callback for the interactive post button.

 

$(document).ready(function() {
  $('#disconnect').click(disconnect);
});

function onInteractiveCallback(authResult){
  if (authResult['error']) {
    // There was an error, which means the user is not signed in.
    // As an example, you can handle by writing to the console:
    console.log('There was an error: ' + authResult['error']);
    $('#authResult').append('Logged out');
    $('#authOps').hide('slow');
    $('#gConnect').show();
    $("#share").show();
  } else {
    $("#ipost").show();
    $("#share").hide();
  }
}

function disconnect(){
 // Revoke the access token.
 $.ajax({
   type: 'GET',
   url: 'https://accounts.google.com/o/oauth2/revoke?token=' +
       gapi.auth.getToken().access_token,
   async: false,
   contentType: 'application/json',
   dataType: 'jsonp',
   success: function(result) {
     console.log('revoke response: ' + result);
     $('#authOps').hide();
     $('#profile').empty();
     $('#visiblePeople').empty();
     $('#authResult').empty();
     $('#gConnect').show();
   },
   error: function(e) {
     console.log(e);
   }
 });
 $("#ipost").hide();
 $("#share").show();
}

When the sign in callback fails when it is triggered by immediate mode indicating the user isn’t signed in, the div showing the share button is rendered along with the Google+ sign-in code. If the user signs in, they get the interactive post button, if they disconnect, they will see the share button.

Demo project here, sources on GitHub here.