Hide Plusone Button After Click

I want to hide google's +1 button after the user clicks on it using jQuery; this is the code I'm using but it seems it's not functioning properly: JS: $(function() { $('#button')

Solution 1:

Use the +1 tag callback parameter to fire the hide function. There's probably a better way to select the +1 button but this works for the purpose of a demo.

<g:plusonesize="tall"callback="poHide"></g:plusone><scriptsrc="http://apis.google.com/js/plusone.js"></script><script>functionpoHide(){ $("#___plusone_0").fadeOut(); }</script>

Demo: jsfiddle.net/Gju6T

Solution 2:

You may want to try the HTML5 equivalent syntax:

<divclass="g-plusone"data-size="standard"data-count="true"></div>

All in all, the rendered HTML will be the thing to look at.

Solution 3:

I think this is what you need, but put it at the end of your page just above </body>

$('g\\:plusone').live('click',function (){
   $(this).remove();
});

ELSE try this...

$('iframe').contents().find('#plusone').live('click',function (){
       $(this).remove();
    });

orrr

<script>functionmycall(str){
 console.log(str);
 //$(str).hide();//???
}
</script><g:plusonesize="small"class="plusone"callback="mycall"></g:plusone>

Solution 4:

The button is rendered into an iframe you don't have access to. The <g:plusone> tag is replaced by JS with an iframe and you cannot observe this button via jQuery, for example with live() or bind(). You have to use the API of the button which can be found here. There you find the option "callback" you could use like this:

<scripttype="text/javascript"src="jquery-1.6.1.min.js"></script><scripttype="text/javascript"src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
</script><scripttype="text/javascript">// Call the API method after the page loaded
$(document).ready(function() {
   gapi.plusone.render("HIDE",
       {"size": "standard", "count": "true", "callback" : "hideTheButton"});
});
// Method to remove the elementfunctionhideTheButton() {
   $("#HIDE").hide();
}
</script><divid="HIDE"><g:plusone></g:plusone></div>