In this blog we will demonstrate how to create an interactive share button with a simple "READ_MORE" as our call-to-action. See live demo near the bottom of this article.


<table class="content_date" >
<tr>
<td>
<a href="https://cdn.kahimyang.com/resources/interactive_prompt.webp" 
onmouseover="this.title=''"
onmousedown="this.title='This is the prompt when the user clicks on your share button. This is shown after the OAuth consent dialog. This also shows the call-to-action Read More button '"
rel="lightbox" >
<img loading="lazy" src="https://cdn.kahimyang.com/resources/interactive_prompt.webp" width="310" border="0" alt="Prompt to Google+ interactive post" />
</a>

This is the prompt when the user clicks on your share button. This is shown after the OAuth consent dialog. This also shows the call-to-action 

"Read More" button (Click on image to enlarge).

</td>
<td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</td>
<td>
<a href="https://cdn.kahimyang.com/resources/google_interactive.webp" 
onmouseover="this.title=''"
onmousedown="this.title='Here is how the interactive share post looks like in the Google+ stream. Notice the Read More button. That is the added call-to-action button.'"
rel="lightbox">
<img loading="lazy" src="https://cdn.kahimyang.com/resources/google_interactive.webp" width="360" border="0" alt="Google+ interactive post" />
</a>

Here is how the interactive share post looks like in the Google+ stream. Notice the "Read More" button. That is the added call-to-

action button (click on image to enlarge).

</td>
</tr>

</table>



To add interactive post to your web page you need to create a Google <a href="https://code.google.com/apis/console/" class="news_link" 

target="_blank" title="API console">APIs Console project</a> and generate a client ID on the API Access pane. In the JavaScript origins field 

make sure to enter your domain name. In our case and for testing purposes we also added http://localhost, just so we can test the button 

before deployment. If you chose to add http://localhost, don't forget to remove them when no longer needed.




Add the Google+ Javascript code to your page, where possible in the head section of the page. This is the asynchronous version of Google+ code. It 

is recommended to use this code for performance reasons.&nbsp;&nbsp;Although the synchronous version of the script also works.



<pre class="brush: xml">
&lt;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);
 })();
&lt;/script>
</pre>




Then add the HTML markup where you want the button to appear in the page. Use either a div, span or button.



<pre class="brush: xml">
&lt;span id="ig_share" class="igc_share g-interactivepost"
 data-clientid="your_client_id_from_app_console"
 data-contenturl="#{evArticleBean.urlx}"
 data-calltoactionlabel="READ_MORE"
 data-prefilltext="This is the initial comment of the post"
 data-calltoactionurl="#{evArticleBean.urlx}"
 data-cookiepolicy="single_host_origin">
 &lt;span class="ig_icon">&nbsp;&lt;/span>
 &lt;span class="ig_label">Share this on Google+&lt;/span>
&lt;/span>
</pre>



Class g-interactivepost is required whether you are using span, div, or button. igc_share is our custom style for our button, see 

further down below for details of this class.



data-clientid is what you created earlier from the API console. This is a required attribute. 


data-contenturl is the content of the post. This is what appears on the Google+ stream. This is similar to the standard shared post. This 

is a required attribute.


data-cookiepolicy. See <a href="https://developers.google.com/+/web/share/interactive#determining_a_value_for_cookie_policy" target="_blank" 

class="news_link" title="data-cookiepolicy">here</a> for determining the value of data-cookiepolicy. This is also a required attribute.


data-calltoactionlabel is the call to action button that appears below the text preview of the posted item (data-contenturl). In our example, 

we used READ_MORE. The default is OPEN, it also goes to default if what you specified cannot be identified. According to Google+, this label is 

translated to user's language. See the <a href="https://developers.google.com/+/web/share/interactive" class="news_link" target="_blank" 

title="Google+">interactive post page</a> for complete of list of possible values. 


data-calltoactionurl - is the URL of the data-calltoactionlabel. The domain name specified here should match with that of the data-contenturl. 

 In our example, since we are only using READ_MORE, this points to the same URL of the data-contenturl. 


data-prefilltext - This is the initial comment to the post.


data-approvalprompt - This can either be auto or force. When force is used, the OAuth consent dialog is always shown when user click on the 

button.


See the <a href="https://developers.google.com/+/web/share/interactive" class="news_link" target="_blank" title="Google+">Google+ interactive post 

page</a> for complete list of button attributes.



Below is the CSS style we used for our button.



<pre class="xml">
&lt;style>
 #ig_share.igc_share {
 padding: 5px;
 background: transparent;
 cursor: pointer;
 line-height: 20px;
 /* border: 1px solid #e6e6e6; */
 border-radius: 4px;
 }
 #ig_share.igc_share .ig_icon {
 width: 20px;
 height: 20px;
 display: inline-block;
 background: url('/kauswagan/images/btn_white.png') 
 transparent 0 0px no-repeat;
 }
 #ig_share.igc_share:hover {
 background-color: #cc3732;
 color: #fff;
 border: #dd4b39;
 }
 #ig_share.igc_share:hover .ig_icon {
 background: url('/kauswagan/images/btn_red.png') 
 transparent 0 0px no-repeat;
 }
 .ig_label {
 font-size:11px; /* Label of the button */
 }
&lt;/style>
</pre>


In designing your button, it is recommended to follow <a href="https://developers.google.com/+/branding-guidelines#interactive-post" target="_blank" 

class="news_link" title="Google+ branding guidelines">Google+ branding guidelines</a>.



Below is a live demo. It will share interactive post, this page, to your G+ stream. 



 <span id="ig_share" class="igc_share g-interactivepost"
 data-clientid="541181906723-4qgk1idpt5l8q21dref3hvat6eseoomp.apps.googleusercontent.com"
 data-contenturl="https://kahimyang.com/kauswagan/howto_blogs/1457-using_google__interactive_post_for_web_pages"
 data-calltoactionlabel="READ_MORE"
 data-calltoactionurl="https://kahimyang.com/kauswagan/howto_blogs/1457-using_google__interactive_post_for_web_pages"
 data-cookiepolicy="single_host_origin">
 &nbsp;
 Share this on Google+
 



That's it Good Luck.

Using Google+ interactive post for web pages