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.
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 have noticed that this new horizontal scroll bar at the bottom which I am unable to remove. I have attached an image in which i have also clearly marked the scroll bar which i am talking about. I know there is canvas setting in app settings but that is for the scroll bars above this one. When i scroll the marked scroll bar to the right the chat & notifications also get scrolled something which didn't use to happen before.
This is a reported Facebook API bug: http://developers.facebook.com/bugs/182748101891780
You can add to the "fb-like" attribute data-width="100px" (or whatever width you like) and it solves this issue.
Found the problem to be this element from FB ui, in the right column:
<div style="width:246px; height:69px; " class="_56vv _56vw" id="u_0_j">
It's the Recommended Games block, which has a carousel inside it. It should have a overflow:hidden in CSS. Tried to access it from my app via javascript, but FB blocked it.
This is the solution I used since this issue was making me crazier.
I use Stylish to customize Facebook, and I have a style installed that blocks all the useless crap on that site, i.e. friend recommendations, ads, unused navigation items on the left, etc.
All I did was find the DIV that holds the entire right sidebar and disabled it. This effectively got rid of the scrollbar and centers the main content within the middle DIV.
Here's the line I added to Stylish:
#rightCol {display:none;}
And just for your reference, here's the whole list I use for Facebook:
.rightColumnWrapper {display:none;}
#navHome{display:none;}
#pagelet_ego_pane {display:none;}
#pagelet_friend_list_suggestions {display:none;}
#appsNav {display:none;}
#pagelet_ticker {display:none;}
#fbSidebarGripper {display:none;}
#pagelet_welcome {display:none;}
#rightCol {display:none;}
.groupMemberSuggestionsList{display:none;}
.groupRecommendationsList{display:none;}
Hope this helps if you haven't already found a solution.
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.
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 )
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.