A question about Canvas Height setting in the Facebook Settings.
There are 2 options Auto-Resize and Fluid and they seem to function in the same way.
In the Canvas Tutorial, it seems that the 2nd option should be scroll bars for Canvas Height, so I'm assuming that Fluid option is a new feature.
But what is the difference between Canvas Height set to Auto-Resize or Fluid?
Here is the documentation
http://developers.facebook.com/blog/post/549/
If you would have placed your cursor over the question sign near the Canvas Height option, you might have seen this:
"Settable allows you to set the height via FB.Canvas.setSize() method in JavaScript SDK with default set to 800px. Fluid sets the height dynamically to fit the page and shows scrollbars if content exceeds the page size."
Also, the options are not Auto-Resize and Fluid, but Settable and Fluid
Related
I have just launched a beta version of my Facebook Canvas Application called Pazooza (http://apps.facebook.com/pazooza), but I am having trouble getting rid of the horizontal and vertical scrollbars in Firefox. In my app settings canvas width is set to 760px and canvas height to fluid. Does somebody have a canvas html template that they have used that I can try and get to work in my site where firefox doesn't show the horizontal and vertical scrollbars? My main html table that holds all other content is set to 740px, so I don't see how this voilates the extra width put on by a horizontal scrollbar.
Any help or advice would be appreciated.
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.
I am having an issue where the background image is cutting off to the right when you scroll left to right. This is happening when the app is hosted in the iframe for our business facebook page, not when you go to apps.facebook.com. I have changed the canvas width to fluid and it is not helping.
This is an example of what I am talking about, try scrolling to the right:
https://www.facebook.com/pages/TeleManager-Technologies-Inc/134181063301299?sk=app_241678922556190
This is the link for an actual app:
http://apps.facebook.com/irefill
As you can see in the second link, nothing is being cut off to the side. I tried playing with some css properties such as "overflow" and it still didn't help.
Thank you for your help.
I added a width to your body tag within side of the iframe body - {width:1000px;}
Because you hadn't declared a width on the , it was inheriting the width from the iframe it is nested in, which is 520px, the max-width for facebook page tabs.
Add on a width to your that is larger than the width of the image that is being cut off and you should be good to go.
You only have 520 pixel width to stay inside of on Facebook.
try limiting the
body{width:520px;}
You can access FB.Canvas.getPageInfo to read the information but they seem to be no way to scroll to a precise position in fluid height since FB.Canvas.scrollTo is only enabled when Canvas Height is set to "Settable (Default: 800px)" according to the developer documentation.
Any idea why? Is there any workaround?
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.