Facebook HTML5 Like Button - Hide Comment Popup

Question

I need to disable the "Say something about this" popup box that is displayed after clicking the Facebook Like button.

The simple solution to this is to use the iFrame version of the Like button. However, my like page is hosted with woobox. I cannot change the like button from HTML5 to the iframe version but I do have access to add additional CSS and Javascript.

There have been a number of solutions posted to Stackoverflow but some users have pointed out that they no longer work Facebook Like Button - how to disable Comment pop up? I have tried all of these solutions and can confirm this.

Answer 1

Okay, I was able to create something that might help you.

Here's the JSFiddle: JSFiddle

What I basically did was I wrapped the like button in a div with hidden overflow. Only problem is, the comment box appears for a second right after loading the page, but goes away after. (it's still contained inside the div, but it covers up the like buttons for a second)

Another approach could be something like this: Changing iFrame elements

Where you would need to view the source and check Facebook's element id for the comment box. (looks like it's div#u_0_6._56zz._56z) Once you have the id you can try to .hide() or .css('display', 'none') Unfortunately, this id is really obscure and looks to me like it changes on a regular basis. So if it does change, your code obviously won't work.

The JSFiddle does seems to work. And it looks like your only sure option.

Answer 2

In reference to your issue with the Woobox layout specifically, you'll want to reference just the portion of the entry form that includes the Like button to hide the overflow on that. The following CSS will do the trick alone:

.form-group .input-group.type-like .inputs.grid { overflow: hidden !important; }

If you want to fully replace the default Like button with your own IFRAME version of the button plugin, you can use the following:

CSS to hide the default button:

.embedded .form-group .input-group.type-like .inputs.grid > div:first-child { display: none !important; }

and JS to include your own IFRAME version of the button instead, while keeping the general setup of the form the same

$(function() {
   $( '.embedded .form-group .input-group.type-like .inputs.grid' ).prepend( '<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fportraitize&amp;width&amp;layout=button&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=35&amp;appId=872100376149378" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:22px; width:60px; float:left;" allowtransparency="true"></iframe>' );
});

Answer 3

just add this style to the style="overflow: hidden !important;" to the div like i have done below

<div class="fb-like pull-right" data-href="http://thegoldbook.in/demo/singlequestion.php?ques_no='.$ques_id.'" data-width="100" data-layout="button" data-action="like" data-show-faces="false" data-share="true" style="overflow: hidden !important;"></div>