I'm having a problem with the height of the Facebook Like button. I use the XFBML version with this tag
<fb:like layout="standard" show_faces="true" width="440" action="recommend" colorscheme="light"></fb:like>
On some sites, the height of the iframe which contains the button is dynamic. It has the height of 61px, when there are "faces" to display and 23px when there are no faces to display. This changes dynamcally when the user presses the like button (and a his face appears undes the button).
Examples of sites where this works:
hobby.idnes.cz/v-boji-s-mokrou-travou-vitezi-vretenove-sekani-nad-rotacnimi-sekackami-13j-/hobby-zahrada.asp?c=A100604_134111_hobby-zahrada_bma
Facebook Like Button demo page - http://developers.facebook.com/docs/reference/plugins/like
Unfortunately, when I try to insert the tag into my page, the height of the iframe is set to 80px and it doesn't change.
My current solution is to set the height of the box to 23px and set the overflow CSS property of its container to hidden. But with this solution I lose the ability to show faces.
This problem is already posted here on Stack Overflow, but with no solution. - stackoverflow.com/questions/2777196/facebook-like-button-fblike-height-always-80px
I've spent about 6 hours trying to figure this problem out. But I still think there must be a simple solution for this.
Thanks for any suggestions.
If you don't want to show faces, and keep the static 23px height, you can set the show_faces parameter on the XFBML fb:like tag to false. If you DO want to show faces, I'd wrap the <fb:like> tag in a container div and set it's height to 61px. This should allow whatever content is around the like button to stay in place, and the content of the iframe/like button change as faces are added/removed.
Related
I implemented html5 version of the like button on the header of my page.
once i navigate to another page and press the back button on the browser the FB button renders the iframe the size of 1000px * 1000px and masks the page content.
any solutions for this ? is this a known issue?
I can confirm this is happening for myself as well across multiple sites.
Facebook is aware of the issue which may take some time to fix according to https://developers.facebook.com/x/bugs/663421210369743/
In the short-term, many other developers seems to be suggesting to target the iframe specifically through css (or timeout javascript call) to force the height back to about 20px.
When using css, ensure you use !important to override the style attribute that ends up on the iframe from facebook.
I know this is an old post but it's still happening.
Add this inline to the code facebook gives you:
data-height="30px" data-width="130px"
And this to the CSS
.fb-like {
width: 130px !important;
}
Of course, you can change the width to whatever you want.
So your code should look like this (where XX is replaced with your parameters):
<div class="fb-like" data-href="XX" data-send="XX" data-layout="XX" data-show-faces="XX" data-height="30px" data-width="130px">
This is only a temporary solution until it is fixed as the facebook button disappears after a minute or so.
Probably not the best solution out there but adding the following css could work for now:
.fb-like iframe {
width: 500px!important;
height: 50px!important;
}
For me this is happening when the facebook like button is wrapped in "position relative" element with "z-index" higher then the content wrapper.
Check the position and the z-index of your elements.
I'm generating a like button with Facebook's 'standard' layout for my site via https://developers.facebook.com/docs/reference/plugins/like/ . I've set its width to 200 pixels, but notice that setting it to lower than 225 pixels has no effect, and the documentation on that page indeed specifies 225px as the minimum width for the standard layout. Unfortunately I need to make it 200 pixels wide to fit my site's design. Is there any way to force it into this width?
(The site's at http://gwwc2.centreforeffectivealtruism.org/ if you want to have a play with Firebug, though the like button gets generated by javascript so you'd probably have to duplicate that page and edit its source.)
The reason for the width restriction is the text displayed to non logged in users.
You'll find that if you shrink lower than 225px for that button style some users will find your layout disrupted (I've tried exactly this, the results were not good).
You can, however, choose a different button style.
Uncheck the send button option
Choose the button_count option
Set the width to 200px
Uncheck show faces
And you'll get this:-
<div class="fb-like" data-href="http://www.example.com" data-send="false" data-layout="button_count" data-width="200" data-show-faces="false" data-font="arial"></div>
Which fits your width requirement. Using box_count will also work well.
Take out &width=225 in the iFrame src attribute and pass no width at all. In the iframe style attribute, specify a css value width:200px; If you pass a value smaller than the minimum in the source URL, facebook will ignore it, but if you custom style the iframe itself to be that width, the contents will squeeze inside.
Create a CSS rule that states iframe { width:200px !important; )
I would make that rule specific to whatever DIV or container your Facebook widget is inside of. And of course, if it looks bad after you do this, you can take it out. But if you're just including a "Like" button (no faces), it should work.
The button-count Layout Style height of the "Like" button and corresponding counter block is 20px high. Is there any way to shrink that block to 16px using css of jQuery or any other method?
Thanks
It can't be done. The only customization you can do is what you see here:
http://developers.facebook.com/docs/reference/plugins/like/
See this article on why it's so difficult to resize iframes:
http://css-tricks.com/cross-domain-iframe-resizing/
Actually you can hide whatever you like by wrapping it with a div and doing some css. Or you can !important override any of the CSS facebook uses by doing it in your own stylesheet. Just open up your page in firebug after adding the button and you can figure out what css to override. Honestly it's not worth it though, the facebook iframe for their button tears up android browsers and slows down every page you put it on.
I added the button to a page and only wanted the button not a count or their blown out text message beside it. so I created a div with the id="facebook" and wrapped it around the div they give you on the dev site. Then added this CSS to my stylesheet.
#facebook {
max-width:42px;
max-height:20px;
overflow:hidden;
float:left;
}
You can use a couple of div's to wrap it then change the centering of the button as well using negative margins on the inner div. But again it's not honestly worth it to me so I stopped sending links to facebook and stick with twitter and pinterest.
Hope that helps.
I'd like to right align the Facebook like button, so that regardless of whether 0 or 10,000,000 people have liked it it lines up with the right side of the page. Is this possible?? I've looked everywhere to no avail.
Thanks for helping!
This is what we're looking to do, but right now we have to set a fixed width on the like button, so if the like count is 1 - the page isn't aligned properly, or if the like count is 250 the page isn't aligned properly.
You can wrap the facebook button inside a div, and set the div overflow hidden, just to make sure that it wont exceed the fixed width.
.mybutton{
width:50px;
overflow:hidden;
}
You can see this jsfiddle.
http://jsfiddle.net/62sCG/1/
I'm using facebook Send button on my website. Since a few days, this button has a background color set to white, which is really ugly on my website. I'm also using the Like button, working fine.
Here is an example: *
The background color is set in the body tag of the iframe, so I dont have access to it...
Any suggestion?
you can try setting colorscheme='dark' if you are using the XFBML code or add &colorscheme=dark to the end of the facebook URL in the iframe src attribute.
Using CSS will not work here since the content is being loaded in an iframe...
Have you guys tried out using allowTransparency="true" on the iframe tag?
colorscheme changes the button color and also puts a black background on the pop-up, but the white button background remains. I tried setting the fb:send element's width to the button width (about 53px) but the pop-up is a child of that element and gets cut off with that width.
I don't see a solution to it myself. In my project, I was going to put the button on top of an image background but instead I'll have to insert it in a white region below the image.
Yes, it can be done.
First, add an #id to your FB code (I use myself a span instead of a div):
<span id="fboverlay" class="fb-like" data-href="YOURFACEBOOKADDRESS" data-width="300" data-layout="button_count" data-show-faces="false" data-send="false"></span>
You can leave your code just as it is, just add that id="fboverlay" over there.
Then edit your css and add:
#fboverlay {
opacity: 0.6;
filter: alpha(opacity=60);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: gayscale(100%);
}
And that's it.
Shurelly it's using CSS3, therefore it's not 100% compatible (specially with old browsers), you know how it is...