refresh div containing facebook like button

Question

My like button code goes as follows:

<div class="like-btn">                                                                       

<fb:like href="http://www.example-url.com" layout="box_count" show_faces="true" width="450" action="like" colorscheme="light" ></fb:like>

</div>

My problem is that, I do not want the comment box to be displayed after clicking like. I'm using XFBML version of Like Button for tracking purpose, so comment box is inevitable.
I have multiple like buttons in the page with variable href's.
I have read all the questions/solutions regarding removing the comment box in this scenario, but none of them work. I'm hoping that Refreshing the contents of <div class="like-btn"> would help.

Could someone please help me figure out how I should tackle this problem?

Here is my attempt so far:

//copying content of the div since the href is retrieved via php and is variable
var content = $('.like-btn').html();
$('.like-btn').empty();
$('.like-btn').html(content);

UPDATE

The approach shown in the accepted answer works perfectly for the default like button (XFBML/HTML5) but not for the box-count styled.

It removes the contents of .like-btn , but when I append the content there is no visible change. — md1hunox, Aug 12 '13 at 06:10
that's because some Javascript parses and retrieves this doesn't mean anything to HTML, so you can't just add it to html. you really need to go down the CSS way. — Vincent Duprez, Aug 12 '13 at 06:13

score 2 · Answer 1 · edited Aug 12 '13 at 05:45

2

You can get the comment box class via code analysis and apply Solomon Closson's CSS answer to remove it from page display.

Something like:

<style type="text/css">
    .like-btn-comment-box { display: none !important; }
</style>

Where .like-btn-comment-box is the comment box class

edited Aug 12 '13 at 05:45

Fabián

565
1
7
30

answered Aug 12 '13 at 05:17

Vincent Duprez

3,772
8
36
76

Yeah, if you can get the comment box class and just apply it to the head, that would be the easiest way to do it. – Solomon Closson Aug 12 '13 at 05:21
But that class is inside the iframe, and AFAIK, its not possible to fiddle with contents of an iframe which is loaded from a different domain. please correct me if I'm wrong. – md1hunox Aug 12 '13 at 06:14
That's right, now the last idea I have, is to apply a complete hide on the button, add your own button (copy the image) and a javascript action onclick that clicks on the hidden button, is that understandable? – Vincent Duprez Aug 12 '13 at 06:18
hide the `iframe` than... use `display: none;` on the actual iframe, unless the button is being displayed in the `iframe` as well...? – Solomon Closson Aug 12 '13 at 06:53

score 1 · Accepted Answer · edited May 23 '17 at 10:25

1

With the way you are currently using it, try adding this to the page:

<style type="text/css">
.like-btn {
    height: 25px;
    overflow: hidden;
}
</style>

If that doesn't work, use the HTML5 Code for displaying the FB Like Button instead, something like this:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<style type="text/css">
.fb-like{
    height: 25px;
    overflow: hidden;
}
</style>

<div class="fb-like" data-href="http://developers.facebook.com/docs/reference/plugins/like" data-width="450" data-show-faces="false" data-send="true"></div>

We set the height of .fb-like to 25 pixels and overflow: hidden, which will prevent the comment box from popping up completely!

You can see it working here: http://devs.dream-portal.net/dp11/index.php

UPDATED

For the box-count style, you can use the iframe version for the box-count and no comment box gets displayed (atleast not to me):

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Freference%2Fplugins%2Flike&amp;width=450&amp;height=65&amp;colorscheme=light&amp;layout=box_count&amp;action=like&amp;show_faces=true&amp;send=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:65px;" allowTransparency="true"></iframe>

RE-UPDATED

You can also review the Top Answer on this stackoverflow question here with 114 up votes: Facebook Like Button - how to disable Comment pop up?

Try that and maybe it will work... not sure.

edited May 23 '17 at 10:25

Community

1
1

answered Aug 12 '13 at 05:10

Solomon Closson

6,111
14
73
115

2

I think vineetrok still needs the like button just not the resulting comment box – Vincent Duprez Aug 12 '13 at 05:13
Thanks for the answer, but doing display:none will simply hide it. I need to refresh it – md1hunox Aug 12 '13 at 05:14
maybe try `.remove` instead of `.empty()` Updated answer to remove it and than put it back into the parent element. If you need to give it a class and an element within it, than you just need to redefine the class and element before you put content in it. – Solomon Closson Aug 12 '13 at 05:14
Updated answer with even more ways to try... One of these approaches has to work. – Solomon Closson Aug 12 '13 at 07:00
I tried both answers, but sadly, the comment box appears atleast for a second, which is something I do not want. I have to completely remove it. I do not know whether I should still accept an answer or not :-/ – md1hunox Aug 12 '13 at 15:38
Updated answer - Please use HTML 5 code for the FB Like Button instead. You can see it working here: http://devs.dream-portal.net/dp11/index.php – Solomon Closson Aug 12 '13 at 16:03
You might be able to do it with just the simple ` – Solomon Closson Aug 12 '13 at 16:17
Actually its my bad, I didn't explicitly mention in the question that type of like button is `box-count`. sorry for that. Thus, I tried to use the above code with increased height, but the like button gets hidden by the comment box. – md1hunox Aug 13 '13 at 18:57
Well, I don't know than. To be honest, it doesn't make sense for FB to even show it since it hides after clicking it. I don't even understand the point of it, since you can't even type into it anyways... Just another annoying fb thing IMO. – Solomon Closson Aug 13 '13 at 20:12
Use the `iframe` version to get rid of the comment box. – Solomon Closson Aug 13 '13 at 20:20
@SolomonClosson Thanks for your answer, but yeah,on the default button your approach will work totally as seen from the example. Hence i'd mark this as answer. I cant use iFrame version of like button since I have to track it using the app id, the developer says its just not possible to use the iframe version. – md1hunox Aug 14 '13 at 19:13
What do you need to track exactly? The amount of likes? If so, why not just add another fb:like button, and set `width: 0;` and `height: 0;` and every so many seconds check it for more likes, and if their are more likes, than do whatever you need to do. – Solomon Closson Aug 14 '13 at 19:28
yeah, i've explored that option aswell in past. But somehow the developer doesn't agree with it. So, i'd leave it as it is for now. – md1hunox Aug 14 '13 at 19:35
Have you tried the top answer on this stackoverflow question? http://stackoverflow.com/questions/3247855/facebook-like-button-how-to-disable-comment-pop-up – Solomon Closson Aug 14 '13 at 21:19
Also, try changing `send=false` I'm sorry I couldn't be more help. – Solomon Closson Aug 14 '13 at 21:25
yes, that was probably the first thing i tried when I came across this problem. But anyways, thanks for the answer and follow up through the comments. :) – md1hunox Aug 15 '13 at 06:53

refresh div containing facebook like button

UPDATE

2 Answers2

UPDATED

RE-UPDATED