CODEWITHSUNDEEP
javascriptgoogle-plusinteractive
Jay
Jay

Reputation: 511

Google+ - How to open the interactive post dialog without a button click?

Is there a way to open the Google+ interactive post dialog without the need of clicking the button first? I would like to have it displayed in a website directly.

Below is the related code from the G+ examples.

JavaScript:

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

HTML:

<button
      class="g-interactivepost"
      data-contenturl="https://plus.google.com/pages/"
      data-contentdeeplinkid="/pages"
      data-clientid="xxxxx.apps.googleusercontent.com"
      data-cookiepolicy="single_host_origin"
      data-prefilltext="Engage your users today, create a Google+ page for your business."
      data-calltoactionlabel="CREATE"
      data-calltoactionurl="http://plus.google.com/pages/create"
      data-calltoactiondeeplinkid="/pages/create">
      Tell your friends
    </button>

Upvotes: 0

Views: 1145

Answers (1)

Matt Smith
Matt Smith

Reputation: 91

Add an id to that button element (You can possibly use a different element entirely as long as you include all the supplied attributes -- can't be sure without testing) and style it to be hidden. From there, just trigger a click on it on whatever event you want.

I.E. HTML:

<button
  id="thisdumbbutton"
  class="g-interactivepost"
  data-contenturl="https://plus.google.com/pages/"
  data-contentdeeplinkid="/pages"
  data-clientid="xxxxx.apps.googleusercontent.com"
  data-cookiepolicy="single_host_origin"
  data-prefilltext="Engage your users today, create a Google+ page for your business."
  data-calltoactionlabel="CREATE"
  data-calltoactionurl="http://plus.google.com/pages/create"
  data-calltoactiondeeplinkid="/pages/create">
  Tell your friends
</button>

CSS:

#thisdumbbutton{ display: none; }

JS:

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

   $('#something').hover(function(){
      $('#thisdumbbutton').click();
   });
  })();
</script>

Upvotes: 1

Related Questions