I'm trying to display the page plugin (https://developers.facebook.com/docs/plugins/page-plugin) inside a div that I set to 400px, and have the page plugin iframe adapt to this 400px width thanks to the adapt_container_width param. It doesn't work.
So, first things first, don't suggest that I set the page plugin's width to 400px directly. I'm just using this 400px on the parent as an example. Ultimately I won't know the screen size to which the parent will adapt. But I mean, if it doesn't even work with a hard-coded fixed width...
Here is the code (Vue) :
<div style="width: 400px">
<iframe
src="https://www.facebook.com/plugins/page.php?href=[...my page]&show_posts=true&width=500&height=800&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=[...the app id]"
width="500" height="800"
style="border:none;overflow:hidden"
scrolling="no"
frameborder="0"
allowfullscreen="true"
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
I've tried removing the width and height attributes, removing the width and height params in the url, setting it to 100% on one or the other... Nothing works. The iframe ends up being either 500px in width, or 300px if I don't set a width, which I guess is the default value. It never adapts to 400px.
I absolutely don't understand what that adapt_container_width=true is supposed to do or how to use it.
PS: Also, I'm using show_posts=true instead of tabs=timeline because of this other well known bug : https://developers.facebook.com/community/threads/281007613843950/. It is inconsequential to this problem.
EDIT
As suggested by a comment, I tried setting the width directly on the iframe. Setting it on the width attribute or by a style attribute doesn't work either. The only way I could MAKE IT WORK is by setting the width directly in the url parameters.
Thanks to the fact that I'm using Vue, I can modify the url dynamically on page load, so I can make it adapt to the screen size, but... I still don't understand the point of that adapt_container_width then, as I have to explicitly give it a fixed width at the deepest level I have access to.
If you're using some framework that allows you to dynamically change the HTML code at runtime like Vue, you can make the plugin responsive by modifying the width directly in the url parameters given to the iframe, with something like this :
<ClientOnly>
<iframe
:src="`https://www.facebook.com/plugins/page.php?href=[your page...]&show_posts=true&width=${screen_width}&height=800&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=[your app id...]`"
:width="screen_width" height="800" style="border:none;overflow:hidden" scrolling="no"
frameborder="0" allowfullscreen="true"
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
</iframe>
</ClientOnly>
Where "screen_width" is a variable that contains the current screen width... For me it's a computed value on page load :
const screen_width = computed(() => {
return window.innerWidth
})
You can then set the adapt_container_width to whatever... So, if anyone still has some input on what the hell this param is for, I'm still interested. Otherwise, this is "solved".
Related
I have a page for phone-devices with a width of 640px. Because I am going to use this in a fb-app I have it wrapped in an iframe with a width of 810px.
The problem is that no matter how I change the viewport-settings it never gets applied when browsing in the iframe. Accessing the page for phone-devices directly displays perfectly, but I somehow can't get the content to stretch the 810px of the iframe.
I can't make a working jsfiddle for this, but I have a case here: http://optimuscrime.net/display.html
The display.html-file simply has a
<iframe src="viewframe.html" style="width: 810px; height: 1200px;"></iframe>
viewframe.html has all it's content based on a width of 640px and a viewport-setting like this:
<meta name="viewport" content="width=640, initial-scale=1">
Before all the "show us what you've tried"-cries: I've tried every single combination of width, initial scale etc. The problem is that the content inside the iframe never gets affected by the viewport-settings.
My client has a wordpress site and one page is embedding a map via iframe:
<iframe
src="http://maps.google.com/maps?q=16162+Beach+Boulevard+%23100,+Huntington+Beach&hl=en&pcsi=2051297199499108728,1&geocode=FUCmAgIdBaP3-A&sll=33.728064,-117.988603&sspn=0.006295,0.006295&ie=UTF8&view=map&cid=2051297199499108728&hq=16162+Beach+Boulevard+%23100,+Huntington+Beach&hnear=&ll=33.730729,-117.987242&spn=0.005354,0.006437&z=16&iwloc=A&output=embed"
height="350"
width="690"
frameborder="0"
marginwidth="0"
marginheight="0"
scrolling="no">
</iframe>
When I view the page in my iPhone, it renders mobile-friendly and resizes the iframe to fit the viewport, but the state and zip code are getting cut off. I tried adjusting the height of the iframe and also the bottom padding, but it seems to be something on Google's end. Any idea how to fix this? I added a blue border to my iframe so you can see that it's not the iframe which is clipping the text:
I recommend posting a link to the site or posting some of the CSS. This would make it easier for the SO community to troubleshoot the issue.
I replicated your issue by removing the iframe attribute width="690". I suspect the Wordpress CSS or some JavaScript is overriding the iframe width and cramming everything into the iPhone screen width.
To override the automatic resizing I just gave the iframe an id and set the width explicitly in my CSS.
#WidthTest {
width:690px;
}
Regardless, I'm sure you can find a similar solution by digging around the Wordpress CSS/JavaScript.
I edited the code. This works great for me! You might want to change the width according to your needs.
<iframe width="380" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=16162+Beach+Boulevard+%23100,+Huntington+Beach&hl=en&pcsi=2051297199499108728,1&geocode=FUCmAgIdBaP3-A&sll=33.728064,-117.988603&sspn=0.006295,0.006295&ie=UTF8&view=map&cid=2051297199499108728&hq=16162+Beach+Boulevard+%23100,+Huntington+Beach&hnear=&ll=33.730729,-117.987242&spn=0.005354,0.006437&z=16&iwloc=A&output=embed"></iframe>
Here is a fiddle (jsfiddle.net/salman/RQBra/show/) that demonstrates the problem I am facing. The iframes appear as expected in all browsers (including Safari 5 for Windows). But when I viewed the page on two iOS devices (iPad and iPhone) the content of iframe overflowed and covered the entire area on the right hand side of the iframe. Here is a screenshot of a page that uses similar iframes:
How can I workaround this issue?
You can fix it in a div, but on the iPhone it won't be scrollable without some javascript. I've made a fiddle that shows how you can fix the size of the iframe.
http://jsfiddle.net/RQBra/29/
basically, you wrap your iframe in a wrapper and give it some css:
#wrapper {
position:relative;
z-index:1;
width:400px;
height:400px;
overflow:scroll;
}
A workaround for your specific case is to replace the <iframe> by an <embed> element.
<embed src="..." type="text/html" width="400" height="400"></embed>
It will have the desired effect on Safari Mobile and clip the content to the specified width and height dimensions instead of auto-sizing it. Hoewever, embed is not specifically designed for HTML content and unwanted effects may result when dealing with scrolling, contentWindow and different environments (it is not necessarily rendered natively), so test the case before using it in production.
W3C:
The element represents an integration point for an external
(typically non-HTML) application or interactive content.
Hmm, try to wrap the iframes in divs, but not constraining the iframe's width and height by themselves.
I am guessing inside Iframe there is an HTML file, so in HTML wrap the content in wrapper div
#wrapper {
position: relative;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
it's size will be relative to html body, than the viewportSizes may be as you wish
the second row is handling flickering on Iframe click, happens in ios'...
i have gwt app, and one of the 'page'(or display) has a iframe whose url point to google web page, however when deploy the app, google page doesn't show up. here is the code
<g:HTMLPanel styleName="{style.ctntBox}">
<div id="contactForm">
<g:Frame url="http://www.google.com/"></g:Frame>
</div></g:HTMLPanel>
if i replace the google webpage with a static image stored locally, it show up fine:
<g:HTMLPanel styleName="{style.ctntBox}">
<div id="contactForm">
<g:Image url="img/myImg.jpg"></g:Image>
</div>
</g:HTMLPanel>
can anyone tell me why it won't work with external link? Thanks
Answered on the GWT group: https://groups.google.com/d/msg/google-web-toolkit/nwlTBBVGJSA/pho1SVeviQEJ
Copied here for convenience:
Google refuses to be displayed in a frame using the X-Frame-Options HTTP header.
See http://code.google.com/p/google-web-toolkit/issues/detail?id=7055
The code you provided creates the UI, including the frame, just fine. The thing you're not doing is setting a height and width for your frame, so it's effectively invisible. Change your code to the following and you'll see your frame.
<g:HTMLPanel styleName="{style.ctntBox}">
<div id="contactForm">
<g:Frame url="http://www.google.com/" height="150px" width="150px" />
</div></g:HTMLPanel>
The reason you didn't have to specify the height and width for an image is because they are implicitly defined by the image itself. There's no way for GWT to know how big you want an iframe to render on your page, so you have to explicitly set the size.
How to control the facebook like box stream part height alone. Its normal to reduce height of whole box but if tries to control it fans images are not shown.
The css .fan_box .page_stream{ ...,width:300px} to .fan_box .page_stream{...,width:150px}
i'm asking because the stream box inside iframe
There isn't a way to change the height. Facebook doesn't provide a way to change the height and there isn't a way to change the height using JavaScript and CSS.
Why can't I do it with JavaScript and CSS?
CSS just doesn't apply through an iFrame because thats how an iFrame works -- its basically a window to another page with its own CSS.
Javascript won't allow you to access the content of an iFrame if the URL of the iFrame is different than the page that contains the iFrame. Doing:
document.getElementById('iframeID').contentWindow.document
Will give you the following warning in Chrome.
Unsafe JavaScript attempt to access frame with URL... Domains, protocols and ports must match.
The reason for this is to prevent XSS. Here's more on the Same Origin Policy.
I saw this on the Like Box page and figured I'd respond that you can use the 'data-height' attribute:
data-height="250"
Worked for me. Here's my example:
http://www.skonet.com/Resources/Articles/Index.aspx
you can reduce the height of the encasing div, hide its overflow and if you want push the top of it underneath an absolutely positioned element with a higher z-index like so:
<div style="position:absolute;z-index:2;top:0;left:0;width:300px;height:130px;background-color:#c0c;opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";"></div>
<div style="height:140px;width:140px;overflow:hidden;background-color:#0c0; margin-top: 60px;color: #fff;padding: 30px;font-family:arial;">
facebook like box goes here - only the green part will be visible if you make the pink box white and take out the 0.5 opacity and the bottom will get cut off so you can just display whatever part you want
</div>
I suppose you guys still need it and this is the most acurate trick I can provide and its also promising to work with the every day changing of the facebook like box by facebook.
Its a bit tricky but will work for you guys..
create two seprate like box of the same page, and close them in seprate div right in my case
<div class="up1">
facbook like box 1 code
<div class="up2">
facbook like box 2 code
Now in the css
use position absolute to class up1
.up1 {
position:absolute;
z-index:99999;
background-color:white;
}
and in up2
.up2 {
padding-top:87px;
}
What it does it will put the box 1 over the box 2 hiding its facebook like and bla bla making it feel like you have one box that contain picture and streaming of your desired lenght
I was looking around cos I had a problem like this one. Facebook has no standard way of customizing the stream if the faces and header are checked.
The solution is to take them differently. If you need the stream as long as 1000px, just uncheck everything except the stream. This will change its height from the default 300px to whatever value you type in the height field.
See an example below:
<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="2000" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="true"></div>
Then if you still need the one with faces, get a new code and set the height differently, then uncheck the others. Below is an example:
<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="500" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
Don't forget to add the SDK before these codes.
I know it's a long time since this was posted, but here is the solution that helped me today
Yes the data-height to 250 will work as it reduce the outside iframe
Now try to set data-height to 1000 - it is still 300px height,
because the inner div inside the iframe hard coded to 300px and
you can not control that as it is in a cross domain iframe...
<div class="fb-like-box" data-href="http://www.facebook.com/example" data-width="292" data-height="250" data-show-faces="true" data-stream="false" data-header="false"></div>
Adjust the height in this code to what works best for you.