Monkey Raptor

Sunday, May 26, 2013

Eliminating The Count Bubble From The Horizontal Facebook Like Button

Hear ye, hear ye...
Facebook has the new like and share buttons. You can generate the new like and share buttons at this link and this link, respectively (you need to login to Facebook).

I dig the Facebook share button much more better than the like button.

This rant is obsolete
If it's share, you don't have to like what you share right? But, like, man, you have the obligation to like the thing you share. What if you wanna share some horrible news, or some other non-like-able materials? Do you like them? NO, SIR.
But you still feel the urge to share the story (post) to your friends on Facebook, right? Uh huh.

Facebook is so ... hm hm
They generalized the sharing with the liking by deprecating not emphasizing the awesomeness of the mighty share button. By the way, you can still use it, the sharing system, but you have to manually put the unique URL for every page of your site/blog post [update : turns out, it's already automatic - 'capturing' the current HTTP URL of the page/post - you just need to follow the steps from the developer link above], and create your own button.
This method still works
On UNRELATED matter, let's take a look. This is a standard horizontal like (hate) button. Which has no adjustable parameter, at the time this post was typed, to hide the count thingy.
I want to friggin triple-flippin-roundhouse kick the count bubble so it won't be there anymore.
Create a <div> tag to wrap the button element. And put inline CSS on the wrapper element. Like so:
<div style='width:49px; height:24px; overflow:hidden;'>
  <!--this is the HTML part of the FB like button-->
  <div class='fb-like' data-layout='button_count' data-send='false'
    data-show-faces='false' data-width='60'></div>
</div>
It will then look like this :
I shaved the count bubble. Long live Chuck Norris!
Why did you shave it? You might ask. Because. Just for the fun of because.
This is a part of my fun-rant moment.
Actually, we can substitute the word 'like' to 'recommend', but screw that, I'm having my own fun time.
If you want to use Facebook Share dialog with your own button, I've posted about it here
By
Eliminating The Count Bubble From The Horizontal Facebook Like Button
https://monkeyraptor.johanpaul.net/2013/05/eliminating-count-bubble-from.html
This post labels list
What do you think?

9 comments

  1. UnknownJune 20, 2013 at 1:32 PM

    However, this method doesn't suppor the style="display: inline;" to make the button aligned with other buttons or text.

    ReplyDelete
    Replies
    1. MonkeyRaptorJune 20, 2013 at 2:47 PM

      Hi there.
      You can use < table > for that, or using display:inline-block; then replace the closing /> with a separated closing < /div > for the FB HTML part.

      Like so :
      < div style='width:44px; height:20px; overflow:hidden; display:inline-block; vertical-align:middle;' >

      < div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='60' > < /div >

      < /div >

      After that closing div you can put your other content(s). It will be displayed inline with the like button.

      About the FB pop up, I tried that earlier, and it's working just fine. I just 'cropped' the like button with CSS here, and not doing anything with the JavaScript.

      I hope it helps. ☺

      Delete
    2. UnknownJune 20, 2013 at 6:01 PM

      Thanks for the inline-block parameter. It solves the alignment problem.

      But the pop-up really didn't show up when the overflow:hidden parameter is there. When I removed overflow:hidden from your code, the pop-up worked. However, the like-count showed up as well.

      It appears that the overflow:hidden hid the pop-up too. Maybe FB has made the pop-up show up in the same div.

      I am curious why it worked at your end.

      Delete
    3. MonkeyRaptorJune 20, 2013 at 10:19 PM

      Hi again.
      You can use the example code snippet on my 1st reply. It works. You have to separate the FB LIKE div (div class='fb-like'...) and the div that use overflow-hidden.
      I don't think the overflow-hidden for the button will affect the pop up iFrame. It's a different object.

      I hope it helps. ☺

      Delete
    4. MonkeyRaptorJune 21, 2013 at 1:59 AM

      If it's still not working, then we need to use table. I'll put a post about that.
      Thanks for the feedback. ☺

      Delete
  2. UnknownJune 20, 2013 at 1:33 PM

    I tried this method but it makes my FB button in a new line rather than aligned with other buttons or text.

    How can I solve this problem?

    I am now using the style="display: inline;" in the FB's original div to make it aligned.

    ReplyDelete
  3. UnknownJune 20, 2013 at 1:45 PM

    I also found that using this method the sharing pop-up no longer shows up.... why?

    Thanks.

    ReplyDelete
  4. grip-koAugust 6, 2013 at 6:16 AM

    thks for the tricks, i use the code with a table.

    ReplyDelete

Tell me what you think...