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.
Related
I want to set up Page Plugin on my website to display nicely on screens with a variety of resolutions and pixel densities. In order to truly achieve that, I'd have to have to possibility to use rems in data-width attribute. Unfortunately, when I enter a rem value, the data-width attribute is ignored.
Is there a way to make the plugin behave nicely with rems?
To make the Facebook Page Plugin responsive on initial page load, instead of using rems, you'll want to remove the data-width attribute and instead add
data-adapt-container-width="true"
This will make the Facebook Page Plugin responsive, but only on the initial page render, with a minimum width of 180px.
I'm still trying to figure out how to make it truly dynamically responsive, in spite of Facebook's caveat (I'll post an update if I ever find the answer).
No Dynamic Resizing
The Page plugin works with responsive, fluid and static layouts. You
can use media queries or other methods to set the width of the parent
element, yet:
The plugin will determine its width on page load.
It will not react changes to the box model after page load.
If you want to adjust the
plugin's width on window resize, you manually need to rerender the
plugin.
Source: https://developers.facebook.com/docs/plugins/page-plugin
You could make it dynamically responsive by reinitializing the widget on browser resize, but by doing that you run the risk of eating up memory very quickly.
There is some other stuff you can try here as well
Responsive width Facebook Page Plugin
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 a select menu on a responsive page, which is set with a fluid width (% value). Everything looks fine until i decrease the page size, when the default value of the select menu (i.e when it's not focussed or clicked on) becomes squashed in the container and overflows, causing part of the text to be hidden, like this. Ideally, this needs to be solved.
I was thinking of incoporarting a line-break, using CSS/Javascript whenever the text overflows. However, I can not think of an appropriate CSS property or JS method to do this on a select element. Does anyone have experience with this or know how to solve it? You don't need to use my suggestion, feel free to come up with something else. The main thing is the text needs to be shown in it's entirety all the time on any screen size.
I have a jsfiddle link here, which uses CSS animations to simulate the page size decreasing.
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'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.