How can we resize a website which appears in an iFrame ? Is it possible if the website is wider than the Facebook page to make it appear a bit smaller so that we can see it all ?
Here is the code I used to avoid the scroll bar at least:
<html>
<head></head>
<body>
<iframe style="width:827px; height:1000px;" src="#"></iframe>
</body>
</html>
Thanks by advance !
Change the height and width for example for my facebook i changed it to
style="border:none; overflow:hidden; width:215px; height:290px;"
Just make sure to add the overflow hidden part so it hides any extra
Use this code just after your opening tag
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID', //Your facebook APP here
cookie : true, // enable cookies to allow the server to access the session
});
}
window.onload = function() {
FB.Canvas.setAutoGrow(91);
}
</script>
also add this css statement to your header section.
<style>
body {overflow:hidden;} /*This is handy for removing horizontal/vertical scrollbars as we won't need them if we autosize; */
</style>
Related
I have put a Facebook likebox and a Twitter feed into my Meteor app's homepage. The first time you navigate there, it works fine. But if you leave the page (while staying on the site), and then return, they are blank. This happens on multiple browsers and on Mac and PC.
I am using Iron Router, and Twitter template code like this:
<template name="twitter_feed">
<div class="news-box">
<a class="twitter-timeline" href="..." data-widget-id="..."></a>
</div>
</template>
with javascript:
Template.twitter_feed.rendered = function () {
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);js.id=id;
js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}(document,"script","twitter-wjs");
}
(It's the same if I put the javascript into the template directly using <script>.)
How can I fix this? Here's the site if it helps: Signup Zone.
Thanks!
This is a problem for site that loads content in AJAX.
You need to manually force those widgets to re-parse the page. One workaround could be using jQuery to regenerate the Facebook likebox and Twitter feed each time content changes. Another hack would be setTimeout as follow:
Template.home.rendered = function() {
setTimeout(function() {
twttr.widgets.load(this.firstNode);;
FB.XFBML.parse(this.firstNode);
}, 0);
}
Reference:
https://twittercommunity.com/t/cannot-update-tweet-button-with-ajax/16989
https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/
Here's a solution that doesn't need any scripting.
Use the iframe version of the Facebook likebox code.
For Twitter, there is no iframe version. But we can make one by putting its anchor <a> tag in its own html document, and then including an iframe to that.
Eg. for my Meteor app, I have put this twitter.html into public:
<html>
<head>
<meta charset="utf-8">
<title>Twitter timeline</title>
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<a class="twitter-timeline" href="..." data-widget-id="..."></a>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);js.id=id;
js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}(document,"script","twitter-wjs");
</script>
</body>
</html>
And I have replaced the twitter_feed template with this:
<template name="twitter_feed">
<div class="news-box">
<iframe src="/twitter.html" scrolling="no" frameborder="0"
style="border: none; overflow:hidden; width:404px; height:650px; float:right"
allowTransparency="true"></iframe>
</div>
</template>
And now it shows fine on second and subsequent views.
I am using Facebook C# SDK in my ASP.net application.
I have an iFrame application whose iFrame Size set to Showscrollbars.
The application was working fine till yesterday, but today the iFrame is not stretching to its width (From the documentation Facebook's iFrame width is 760px Link here). The page in my application's width is set to 95%. So I think its not a width problem in my application.
.
I have to use Showscrollbars option for my application.
Did facebook Changed any settings for the iFrame Apps? Help please.
UPDATE Looks like facebook broke something or they are trying to get rid of scrollbar options. I have to change my application to use AutoResize Option. I made the following changes to my asp.net application and it is working fine except one issue (see at the bottom of the question)
<head runat="server">
<title></title>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.Canvas.setAutoResize();
};
</script>
</head>
<body>
<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId: '12345678', //replace with your facebook appid
cookie: true,
status: true,
xfbml: true
});
</script>
</body>
iFrame stretches vertically when the content increases. That's cool but the
ISSUE is Read Here on StackOverflow. I am working on it. If any one figures it out please let me know.
I had the same problem and fixed it with this simple bit of CSS in the iFrame page
body {overflow:hidden;}
everything still fits nicely, with nothing cut off. just gets rid of those pesky scrollbars!
it certainly sounds like a bug, worked fine in all other browsers but FF 3.6
adding the above also has the advantage of not having the srollbars momentarily show on load.
Use code below and it's works on all of my iframe apps :)
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId: '123456789',
status: true,
cookie: true,
xfbml: true
});
FB.Canvas.setAutoResize();
FB.Array.forEach([200, 600, 1000, 2000, 5000, 10000], function(delay) {
setTimeout(function() {
FB.Arbiter.inform("setSize", FB.Canvas._computeContentSize());
}, delay)
});
</script>
Is there a way to add an iframe to a facebook page without having to do the onClick functionality?
Right now I am using this code and it works fine except you have to click the link to make it show the iframe?
<!-- Start iframe CODE -->
Like me to show the iFrame link!
<fb:visible-to-connection>
<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Click here to show the iFrame!</a>
</fb:visible-to-connection>
<div id="outside_location"></div>
<fb:js-string var="link_1">
<fb:iframe height="500" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%; height: 1400px; border:none" src="http://apps.ignitesocialmedia.com/php/facebook/sandbox/tabs/iframe.php"></fb:iframe>
</fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>
<!-- End iframe CODE -->
It seems as though this has been done in a couple places but I cannot figure it out.
http://forum.developers.facebook.net/viewtopic.php?pid=262170#p262170
Why is the height of my Facebook Like button (technically the iframe that gets generated) always getting set to 80px? Example page is here: http://www.davidkasper.net/test.html I am using the javascript sdk and have had it work on other pages but for some reason the height will not change dynamically on this one! I can even do something like
<fb:like style="height:40px">
and that will indeed set the visible height, but the iframe will still be 80px, whereas I can see it changing in the demo at http://developers.facebook.com/docs/reference/plugins/like
The iframe being generated is allowing space for showing facebook profile pictures. Add the show-faces="false" attribute and it will collapse the height.
<fb:like show-faces="false"></fb:like>
I fix this problem with css
#fb-bar iframe{min-height:80px !important;}
where #fb-bar is wrapper for < fb:like >. In html
<div id="fb-bar">
<fb:like href="link"></fb:like>
</div>
I finally found the answer for this!!
The problem was having the wrong base domain set for the app that I specified in the FB.init javascript.
window.fbAsyncInit = function() {
FB.init({appId: '**131226520233112**', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
See the difference between http://davidkasper.net/test.html vs http://davidkasper.net/test2.html
By the way I would never have discovered this without the URL Linter from Facebook http://developers.facebook.com/tools/lint/ Clearing all the errors it detected solved the problem!
David,
I was having the same problem too. I simply put the fb:like tag inside of a DIV with an ID of 'facebook-like'. Then I setup a CSS rule to limit the height and/or width of any iframe that exists in the 'facebook-like' DIV. Worked for me!
From the reference it says
The most important social plugin is
the Like button, which enables users
to post pages from your site back to
their Facebook profile with one click.
You can add a Like button to any page
with an iframe tag:
<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
There are a number of options for the
Like button, including the option to
include the names and profile pictures
of the user's friends who have also
liked the page. Here is a like button
for the Facebook Developers site...
To me that indicates you should just use the iframe and set the width/height properties in the style tag...
<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
scrolling="no" frameborder="0"
style="border:none; width:300px; height:25px"></iframe>
Go to http://developers.facebook.com/docs/reference/plugins/like
Uncheck the 'Show Faces' checkbox. This will reduce the height to 35px.
I have an iframe application build up on php.
I have set iframe size as resizable.
There is a problem the display is not proper if the content is too large.
I have applied the code available on http://wiki.developers.facebook.com/index.php/Resizable_IFrame
My xd_receiver.htm file is inside my templates folder where my php files are residing.
The code which I am using is:
<div id="FB_HiddenIFrameContainer" style="display:none; position:absolute; left:-100px; top:-100px; width:0px; height: 0px;"></div>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(["CanvasUtil"], function(){
FB.XdComm.Server.init(xd_receiver.htm>);
FB.CanvasClient.startTimerToSizeToContent();
}
);
</script>
Please guide on how to make the display correct.
even though In am not sure about this, but Large content could be the the real issue,
try to move this part to the end of your page
FB_RequireFeatures(["CanvasUtil"],
function(){
FB.XdComm.Server.init(xd_receiver.htm>);
FB.CanvasClient.startTimerToSizeToContent();
} ); </script>