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.This method still works
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 bydeprecatingnot emphasizing the awesomeness of the mighty share button. By the way, you can still use it, the sharing system, but you have tomanually 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.
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.
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;'>It will then look like this :
<!--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>
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
However, this method doesn't suppor the style="display: inline;" to make the button aligned with other buttons or text.
ReplyDeleteHi there.
DeleteYou 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. ☺
Thanks for the inline-block parameter. It solves the alignment problem.
DeleteBut 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.
Hi again.
DeleteYou 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. ☺
If it's still not working, then we need to use table. I'll put a post about that.
DeleteThanks for the feedback. ☺
I tried this method but it makes my FB button in a new line rather than aligned with other buttons or text.
ReplyDeleteHow can I solve this problem?
I am now using the style="display: inline;" in the FB's original div to make it aligned.
I also found that using this method the sharing pop-up no longer shows up.... why?
ReplyDeleteThanks.
thks for the tricks, i use the code with a table.
ReplyDeleteYou're welcome! :)
Delete