I have tried various solutions to get the iframe to adjust according to the website's content height, so that I can do away with vertical scrollbars, but cannot get a satisfactory solution.
Many solutions ask for a section of code to be added on the 'server side'. If that means I have to edit lines of code within my Wordpress files, where would I do this?
Here is a link to the iframe in question.
Rather than try to adjust the Facebook page to fit your WordPress install, you're better off changing your WordPress theme to deal with being shown in a Facebook iframe.
When displayed in the iframe, you should have a theme that is fixed-width to your canvas, and no sidebars. Just a content pane. You would then have your regular theme for when visitors arrive outside of a Facebook frame.
The Virtual Theme plugin looks like it could help with this. I've never used it personally.
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
If your look at this screenshot: http://cl.ly/image/1J3m2e2x1G1z, you'll notice that the facebook iframe element overwrites the Karma comment bubble. Could anybody help me with either removing the bubble alltogether of with removing the facebook element?
thanks
This can probably be fixed pretty easily with css. If you have a link to the site I can take a look at it and tell you what you need to add to your stylesheet. Also, t.thielemans is right, it would be best set up a child theme (Not nearly as complicated as it sounds) which would prevent the changes from going away if you update your theme.
I noticed that yesterday all the Fixed-width canvas apps started looking strange: the Facebook chrome is pushed away from the canvas and takes up all the browser page's width, as it does for Fluid-width apps (see Farmville for example).
Is this a permanent behavior, or a bug?
If it's not a bug, is it documented anywhere? I could not find any info on that on Facebook's developer documentation.
(Most fixed width apps look kind of strange right now)
Cheers,
Julien
Facebook have added fluid width to all canvas applications.
You can find it if you go to:
https://developers.facebook.com/apps
Edit Settings
Settings -> Advanced
Canvas Settings -> Canvas Width (Fixed sets the canvas page width to 760 pixels. Fluid left aligns the canvas page and sets the width dynamically to fill the page.)
Interesting links:
Blogpost from Facebook devs on the subject.
Showcase of games that use fluid width
This was indeed a permanent behavior, though not documented beforehand.
I just installed the Facebook Like button XFBML plugin on my blog site, which uses K2 and Joomla (I copied the code directly from facebook developers.) The problem is that the plugin is too wide - it's the default 450px wide. Even when I enter 400px, and redo it, it stays 450 px wide. I can't seem to get it to resize for some reason. This is a big problem, because the right side of the comment box is hidden (I have a column on the ride hand side that covers it.) So, you can't push the "post" button. I've searched google and your database, but I can't find any posts about a similar problem. And I'm not sure where to go for help. Here is a link to an article on my site so you can see what I mean:
http://www.artdotlife.com/art/studio-blog/entertaining-baby/item/148-if-snow-white-and-the-seven-dwarfs-were-released-today-it-would-incite-mobs-of-angry-mothers-little-people-and-screenwriters-here%E2%80%99s-why
Thanks!
Ok, your using Joomla, no problem. When I look at the code all I see is . Using Firebug I can see that the comments plugin is runnin at 550px.
When you edit this module do you turn the editor off? I would try that and make sure you add the width variable to the comments tag as it's not showing up.
Comments also requires an href tag to work properly if I'm not mistaken. Not the issue with the width but just a heads up.
I'm working on a simple Facebook application and for the canvas page I'm using an iFrame. I need to make the width of the iframe wider to fit my site. Is there a way to control this and what would I need to do to support that?
There are two supported canvas page sizes (760px and 646px). These can be set on the developer settings for your application.
You can not make your canvas page wider, however you could make it narrower by making your application and FBML application and then putting your content inside of an fb:iframe tag with a reduced width.
Here is the fb developer's wiki entry on canvas. They set the width it in the canvas tag.
e.g. <canvas id="Canvas1" width=200 height=270></canvas>
fb mark up for iFrame