{"id":18,"date":"2011-07-22T16:49:00","date_gmt":"2011-07-22T10:49:00","guid":{"rendered":"http:\/\/promincproductions.com\/blog\/?p=18"},"modified":"2014-05-03T18:46:36","modified_gmt":"2014-05-03T12:46:36","slug":"advanced-google-plus-button-implementation","status":"publish","type":"post","link":"https:\/\/promincproductions.com\/blog\/advanced-google-plus-button-implementation\/","title":{"rendered":"Advanced Google Plus Button Implementation"},"content":{"rendered":"<p>I was having an issue implementing a Google Plus button.&nbsp; I was trying to use a jQuery append statement to write the Google Plus code.&nbsp; But, for whatever reason it didn&#8217;t work&#8230;<\/p>\n<p>So I ended up using their javascript api call, which I personally thought was a bit under-documented.&nbsp; And searching the internet returns nothing more than bloggers that are too lazy to write their own content, so they instead regurgitate the same content on Google&#8217;s developer page along with some screen shots (good work Bloggers, way to be valuable to the internet!).<\/p>\n<p>So here is what my solution was.&nbsp; Given the corporate level of the site I&#8217;m working on, I don&#8217;t have server side access and need to find ways to make things work rather than always do them the easy and &#8220;right way&#8221;.&nbsp; I have access to a global javascript file though, and so that with some jQuery placed on certain pages and areas within the site that I do have access to make things work just fine.&nbsp; I know this isn&#8217;t always the best practice, but you gotta do what you gotta do at times.<\/p>\n<p>But to the point of this post.&nbsp; In the head of my site pages, I call the requried&nbsp; Plus One API file.<\/p>\n<pre>&lt;<span>script<\/span><span> type<\/span>=<span>\"text\/javascript\" <\/span><span>src<\/span>=\"<a href=\"https:\/\/view-source:https:\/\/apis.google.com\/js\/plusone.js\" data-lasso-id=\"17\">https:\/\/apis.google.com\/js\/plusone.js<\/a>\"&gt;<br \/>  {parsetags: 'explicit'}<br \/>script&gt;<\/pre>\n<pre><\/pre>\n<p>Then, in my page where I want the +1 to appear, I&#8217;ve added:<\/p>\n<p><\/p>\n<div><\/div>\n<p>And lastly, the code that seems to be under-documented on the web&#8230; the meat and potatoes.&nbsp; Call the following script.<\/p>\n<p>The call back portion is an optional feature that is poorly documented.&nbsp; But that will allow you to do an action based on the user clicking on the button.&nbsp; Example is fire tracking, or display an overlay saying thank you, ask them why they &#8220;-1&#8243;&#8216;d you page, etc.&nbsp; Interesting note is that it is against Google&#8217;s policies to use a +1 for a giveaway.&nbsp; In other words, you can&#8217;t solicit +1&#8217;s and draw a winner for a gift certificate or anything like many do with Facebook likes&#8230;<\/p>\n<p>But to expand on the callback a bit more, the parameter calls the name of a javascript function.&nbsp; Example:<br \/>function gPlusCallback(data) {<br \/>&nbsp;&nbsp;&nbsp; if(data.state==&#8221;on&#8221;){<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \/\/Your code for a +1 action<br \/>&nbsp;&nbsp;&nbsp; }else if(data.state==&#8221;off&#8221;){<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \/\/Your code for a -1 action<br \/>&nbsp;&nbsp;&nbsp; }<br \/>}<\/p>\n<p>Note: this function needs to be global in scope, else it won&#8217;t get triggered.<\/p>\n<p>Hope this helps you out!<\/p>\n<pre><\/pre>\n<pre><\/pre>\n<pre><\/pre>\n<pre><\/pre>\n<pre><\/pre>","protected":false},"excerpt":{"rendered":"<p>I was having an issue implementing a Google Plus button.&nbsp; I was trying to use a jQuery append [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wprm-recipe-roundup-name":"","wprm-recipe-roundup-description":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[5],"tags":[],"class_list":["post-18","post","type-post","status-publish","format-standard","hentry","category-website-development"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p4BbcR-i","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":1,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/18\/revisions"}],"predecessor-version":[{"id":52,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/18\/revisions\/52"}],"wp:attachment":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/media?parent=18"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/categories?post=18"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/tags?post=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}