I am using XFBML version of the Like button and it works great except for one thing, the comment box is being clipped by other elements on the page. I have researched this topic for a few days and came across several different solutions ranging from adjusting z-index to ensuring that any overflow: hidden are set to overflow: visible, none of which have resolved my issue.
There was also a post where you could hide the comment box altogether, but I feel like that would dilute the impact of a user liking something on my site, if they feel compelled to add a comment, that's potentially more click-throughs to my site.
My question is, is there any official FB documentation regarding this issue and how we, as developers, can work around it?
Finally figured it out. I am using CSS PIE to get rounded borders and drop shadows to work in IE browsers and for some reason I added z-index: 0 to the pie class. Upon removing the z-index from this class the comment popup worked as expected.
From:
.pie {
position: relative;
z-index: 0;
behavior: url(/css/vendor/pie/PIE.htc);
}
To:
.pie {
position: relative;
behavior: url(/css/vendor/pie/PIE.htc);
}
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 would like to add a facebook login button over a full screen Google Maps, as an overlay. I've found this topic: How to make a full screen Google Map with website menu overlay?
but when I add the required fb-root div to the HTML code, a blank block appears on the top, pushing the map below. I've tried to set display property of fb-root to none, set it with an absolute and negative positioning, but I haven't reach the goal. Here you may find my best attempt: Facebook login over Google map
Thanks in advance.
Find it out! Maybe it's not a super elegant solution, but I've managed to solve by setting a negative positioning to the google map. Here follows the css for the map
#googlemap { width: 100%; height: 100%; position:relative; top:-32px; }
I've updated the code on the link I posted, hope it helps someone.
I'm using Twenty Eleven theme of Wordpress.
In other themes, there is no problem but in twenty eleven there is a problem with Facebook like button's comments popup window. it's half shown. when I click "Like" button, the view is like below:
http://i.stack.imgur.com/Hgawi.png
I use Facebook plugin for Wordpress. How can I fix this problem?
Thank you so much for your help!
It's a bug in Twenty Eleven (and a few other themes, probably copy-pasted). Open your style.css and look for:
embed,
iframe,
object {
max-width: 100%;
width: 100%;
}
If you remove the max-width line, it should work! Maybe there's a more elegant solution but honestly, I don't know why the size of an iframe should always be limited to its container (in this case the FB button).
Maybe thats a better way of doing it!
Put a class on your Facebook Like Button div, in this case I used "fb-like" class.
.fb-like iframe,
.fb_iframe_widget iframe {
max-width: none;
}
Looking/testing for a lot of solutions I found one that hides the comment window (source here: https://stackoverflow.com/a/12829375/3687838 ) and then I wrote one that shows the window without being displayed in half. I'm not a programmer but from my small experience from tweaking wordpress plugins I came up with this ideea:
.fb-like {
z-index: 200;
position: absolute;
}
Copy/Paste it in your Custom CSS theme file. The z-index value can be changer even to 10000 if you want your window to be on top of everything.
If you want to hide the comment window, use the solution provided in the link above with a value of 27px instead of 20px.
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 am able to put a Facebook like button on my website, but how do I make it to be right-aligned within the div/iframe it is in?
I tried applying various CSS properties, but I could not get anything to move in the iframe.
I think this link could help too:
http://shades-of-orange.com/post/2011/01/09/Embed-Facebook-Like-Button-e28093-Right-Align-with-css-and-Settings.aspx
It says to set the width to "0". Then the box will be autoresize by Facebook and you can apply a float right to that box.
iframe is an inline element, you can use
text-align: right
for a div that contains that iframe, or float the iframe to the right, but just make sure to clear the float afterwards.
sample: http://jsfiddle.net/Mujj6/3/
and: http://jsfiddle.net/Mujj6/5/
Seems as though there are many ways to achieve this that work in different situations.
None of the above seemed to make any difference to the position of my 'like' button, however a little trial and error with a "margin-left" tag and I got it in the right place.
Thanks for everyone's input. The position relative trick doesn't always do it for me:
div.around-fb-like{
position:relative;
float:right;
}
So far this has been more dependable:
#fb-root{
position:absolute;
left:-1000%;
}
What is described in Embed Facebook Like button – Right align with CSS and settings works. However, in my website, I had to change the style to
position:relative; right:-130px;
the 'like' social plug-in seems to have changed styles within the iframe. what's the best way to prevent the 'like' from flowing right, on the following page?
[http://www.biographile.com/the-righteousness-and-ruin-of-science-on-this-week-in-history/16573/][1]
With DIV it's easy:
.fb-like{ vertical-align:top;}
posted also on SimpleMediaCode.info ( http://e-art.lv/x/fbas )