I can't figure out how to solve this one. Also, because of the volume of FB like buttons, it is a little slower on my dev build, so delaying the display:none until end of page load won't work either.
facebook like button css overflow
I've noticed that the difference between hidden and unhidden container, that is, removing my 'hide' class from div#fb_like_button, the and that facebook places inside div.fb-like changes style attributes width and height.
I have used this several times myself, and with a little digging around in the Facebook code you can attach hover events and everything else to make it look like a custom button. You would have to find what elements to set opacity : 0 on.
When you create a html element with fb-like class, facebook javascript SDK convert it with a like button when document loaded. You can make a custom element and trigger click event of like button when user click your custom button.
I think that facebook goes through great lengths to make sure people can't trigger the "Like" button. This is to prevent scripts from automatically clicking the "Like" button when someone visits the site.
I used the below code to get the Like button of Facebook. Now the things is, I would like to change the size of the Like button that is rendered.I tried the width attribute which not not working at all. And I tried to override the CSS class that's used for the below code by facebook. But overriding the CSS class is also not working as well.So tell me how can I increase the height and width of the Like button.
Quite rightly so.... If you were able to change the size or style of a Like Button then we would see HUGE, bright red, flashing like buttons all over the internet - that would be awful. They're designed to be discreet, recognisable and non-obtrusive.
Unfortunately, the numbers for the website of my employer is nowhere near 22'000, so the powers that be have decided that we should not show the number of "likes" until said number is a little more in our favour. As far as I know, I don't have access to the layout of the button through Javascript or CSS (it's in an iframe served by facebook). Are there any other ways to hide the count?
The Like button coded to show "Recommend" is 84px wide and the "Like" button is 44px, will save some time for you CSS guys like me who need to hide how unpopular my page currently is! I put this code on top of my homepage, so initially I don't want it to advertise how few Likes I have.
Due to a change Facebook recently made in the way comment dialogs display, we had to change how we were hiding it. The way they show the comment dialog has been 'moving' the content inside of the my overflow:hidden element so that the button looks really odd to the user after they click the like button.
I know many solutions have been posted already, but mine is still somewhat different. It works for the HTML5 Version of the like button and only uses css to hide the count box. Don't forget to add the appId to test.
My solution is a little hood but it works. What I do is just basically detect where the number is going to be and use css to have a box cover over it. I guess you can also cheat the system and add more hits if you want. Here is my code using jquery but it will be different than others depending on where you place the like button on your page.
I'm currently developing a small website and I want to integrate a facebook 'Like' button. I copied and pasted the automatically generated code that they proveide on their website and the button is just cut off. As in the following picture:
I am developing a bulk sms application using JSF. I added the facebook like button but it doesn't show up on chrome (it shows up in IE). I checked the console and found a message - "Failed to load resource: net::ERR_BLOCKED_BY_CLIENT". My other site that formerly used to display the button also no longer shows it. Any help will be appreciated. Thanks
The issue was that I checked "block social media buttons" in AdBlockPlus settings. I did not use any tracking buttons on my website, though.The template used banned names in classes and file names. For example, there was a CSS class icon-social-facebook and an image icon-social-facebook.png. It turned out that AdBlockPlus was configured to use this list -downloads.adblockplus.org/fanboy-social.txt which blocked website elements with "icon-social-" in their names.
And of course I suppose if you're truly desperate you could do the old trick of "your own custom like button" that just redirects them to a page with only the "real" like button or that pops up a modal with "just the like button" that they have to reclick again :
Basically my website's pages are all .php and my stylesheet is.css how can I add a facebook like button. When I use the facebook developers page the codes available are: HTML5, XFBML, IFRAME and url. Would any of these be compatible with my website? I know where to paste the correct code (if any are compatible) in my footer.php file but where should I paste the other code as the facebook site says it needs to be just after the tag which I don't have....
If you want to add a like button yourself, you should dig in your footer.php (found in your template) and add the javascript code in your header.php.If you are not familiar with the structure of wordpress, you could just use a plugin, like this one: -like-button/
Although you say not the iframe, if you do scale the iframe with CSS3 it will increase the size of the button. It would probably be best to give the iframe a ID or class but something like this would work if it was the only iframe on the page:
Agree with BrynJ, best solution currently is to put the like button in a 20px high div container, and set the overflow to hidden (I read somewhere that FB recently moved the comment flyout into the iFrame, so the solution that modifies the styling of .fb_edge_widget_with_comment is probably not useful anymore for iFrame users).
I have done my research and haven't found any good information on my problem. If you go to www.metrochristianguide.com, you will see that I placed a "Like" button on the top of the page, and set the background color to red. I did this to see the horizontal alignment of the like button and text.
Some users have experienced the like button not showing up. Noted in 3.6.17 but observed in other versions. I'm somewhat familier with the firefox iframe bug, but I was currious if anyone has any work arounds for the facebook like button.
Firefox does not draw the Facebook-like if the div is hidden at the time of parsing. In the example above I delay the showing of a div after different times. You can see that a like-button shown after 500ms does not get rendered in Firefox.
It finds the fb-like-inactive buttons, then looks up the tree to find the containing control_menu elements, then attaches an event to the control_menu elements to detect when the user hovers over them. When it detects a hover for a particular menu element, it looks for inactive like buttons within that element, marks them as normal fb-like, and then parses just the content of that element.
Has anyone implemented a custom like button? I don't need the counter etc that their buttons provide, and to be honest, they are ugly. I have been searching around for the last 2 hours with no real luck.
I have read their API, while very easy to use I don't like the buttons generated from their or XFBML code. I am simply looking to find out if there is a way to make a custom link from something like this:
If their API doesn't expose what the generated buttons do for you to copy, one way to find out what the like button is actually doing (if it's not a hyperlink, and since it might be posting by ajax, this could happen) is finding out how the event is handled in javascript. This may be problematic if the script has been optimised/minified.
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 would help.
When using button classes on elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.
Hi Antonio, I have taken a look at your website.The like button described in this snippet was not intended to behave like this, and it did not by the time the snippet was published.This issue requires some CSS coding. May some javascript. You might want to post a new thread in the support forum of the theme : You will get a wider audience there.Thanks
The Facebook "like" counter and button do not seem to work, using the current 3.0beta2 tarball. It looks like the like counter is appearing and fading away immediately. Also the number doesn't seem to increment, I can click that link as many times as I want. So it doesn't seem like the bug is simply that the counter disappears but that the entire functionality doesn't follow through.
@Les Lim: Sorry, here's what I have:- The beta tarball of addthis installed- The link you see above is the output of: theme('addthis_toolbox');- the "Toolbox services" config, of /admin/settings/addthis, I have: "facebook_like_counter,tweet,counter_pill" (ie: addthis_config['services_toolbox'])
@jzacsh: Unfortunately, I don't know much about the facebook like button in particular - I'm not using it on any of my own sites. The AddThis module is really just a wrapper and a UI for implementng the AddThis API, which is in turn implementing the Facebook API. There's nothing about the module code itself that would touch the meta tags on a page. 2ff7e9595c