Css – Facebook Like Button – how to disable Comment pop up box

buttoncssfacebookfacebook-likefacebook-likebox

I'd like to disable the Comment box that pops up when a user clicks the Facebook Like button ,

I followed the post Facebook Like Button – how to disable Comment pop up? and changed the CSS But it didnt work any other suggestions please

I cant use IFRAME otherwise i would not be able to use FB.Event.subscribe('edge.create',

Best Answer

From http://developers.facebook.com/docs/reference/plugins/like/:

When will users have the option to add a comment to the like?

If you are using the XFBML version of the Like button, users will always have the option to add a comment. > If you are using the Iframe version of the button, users will have the option to comments if you are using > the 'standard' layout with a width of at least 400 pixels. If users do add a comment, the story published > back to Facebook is given more prominence.

Just use the iframe version of the button and set the width to less than 400 pixels.

Related Solutions

Css – How to disable text selection highlighting

UPDATE January, 2017:

According to Can I use, the user-select is currently supported in all browsers except Internet Explorer 9 and its earlier versions (but sadly still needs a vendor prefix).

These are all of the available correct CSS variations:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Note that user-select is in standardization process (currently in a W3C working draft). It is not guaranteed to work everywhere and there might be differences in implementation among browsers. Also, browsers can drop support for it in the future.

More information can be found in Mozilla Developer Network documentation.

The values of this attribute are none, text, toggle, element, elements, all and inherit.

Html – How to create an HTML button that acts like a link

HTML

The plain HTML way is to put it in a <form> wherein you specify the desired target URL in the action attribute.

<form action="https://google.com">
    <input type="submit" value="Go to Google" />
</form>

If necessary, set CSS display: inline; on the form to keep it in the flow with the surrounding text. Instead of <input type="submit"> in above example, you can also use <button type="submit">. The only difference is that the <button> element allows children.

You'd intuitively expect to be able to use <button href="https://google.com"> analogous with the <a> element, but unfortunately no, this attribute does not exist according to HTML specification.

CSS

If CSS is allowed, simply use an <a> which you style to look like a button using among others the appearance property (it's only not supported in Internet Explorer).

<a href="https://google.com" class="button">Go to Google</a>

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

Or pick one of those many CSS libraries like Bootstrap.

<a href="https://google.com" class="btn btn-primary">Go to Google</a>

JavaScript

If JavaScript is allowed, set the window.location.href.

<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />

Instead of <input type="button"> in above example, you can also use <button>. The only difference is that the <button> element allows children.