With the new App Pages on a Facebook Apps Timeline is there any way to remove the 20px white border around the iframe?
Here is an example page, https://www.facebook.com/Firefox/app_219601608073693
If you make your background white then there are not really borders ;)
But in all seriousness - what you could do is use a "Wide (810px)" layout for your tab app and then create a smaller centered div element in which you can contain your entire application.
Eg:
<div style="width:520px; margin:0 auto;">
Your 520px centered content appears here!
</div>
Please don't be lazy like me :) Don't use inline styles.
Other than that I do not believe that there is a way to remove or customize any of Facebook's styling inside a timeline/page app...
Related
The likebox I created for nbglive.com is not resizable, no matter what method I use, and as such, it is causing great trouble as to how I can integrate it with our site without having it overlap the radio player.
Is it possible to get the like box to resize when the page is resized? I'm using twitter-bootstrap.
I am putting FB widgets (likebox and comments) into the Bootstrap's grid like this:
<div class="span4">
<div style="text-align: center;">
<div class="fb-like-box" data-href="{url}" data-width="234" data-show-faces="true" data-stream="false" data-border-color="#007Db7" data-header="false"></div>
</div>
</div>
where url is the variable containing web URL of the FB page.
with CSS:
div.fb-like-box,
div.fb-like-box > span,
div.fb-like-box > span > iframe[style],
div.fb-comments,
div.fb-comments > span,
div.fb-comments > span > iframe[style] {
width: 100% !important;
}
Facebook loads its component asynchronously with styles set according to the width data attribute. I set it to some safe value: looks bad but does not overflow to other elements for different view-ports. My CSS overrides all the FB's width settings that are necessary to resize the widgets (I set 100%, so it adjusts to the containing div). It is not documented and possibly it will stop to work when FB changes their designs, so choose your default width (234px for me) wisely ;)
Example with LikeBox of at the bottom of the right-hand side panel and in the sidebar. Note the responsive behavior when you change the size of the browsers window.
Here is an easy way:
$(".fb-like-box").attr("data-width", $(document).width());
Do your cording according to your CSS as below
<div class="comment-box">
<div class="fb-comments" data-href="site_url" data-width="100%" data-numposts="5" data-colorscheme="light" data-mobile="auto-detected"></div>
</div><!--comment-box-->
cut and copy java-script as fb gives in headder
i have a webview in my application and it works fine. it fits horizontolly (not scrolls) and scrolls vertically. but any word which is longer than 320 pixel makes it scrolls horizantally and makes the font larger. i don't would like horizontal scroll. i would like it to be continued in new line. how can i do?
thanks.
The problem you have is actually not related to the UIWebView in itself. What the web view does is just display any html you provide. This means that you have to format the html to do as you want. One way to accomplish that is to use a div as follows.
<div style="width: 320px; word-wrap: break-word">
text with looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooongword goes here
</div>
Caveat: I don't know very much about html and css so there might be better ways of accomplishing this.
I have a black web page at yourcashflowpros.com that integrates with fb comments. Fb comments looks like $&%! against a black bg, can someone tell me if i can change the css on the comments or should I just change the background to make it look right?
Thanks
Todd
Well, its in an iframe so your css wouldn't affect it. The easy approach would be to make the background container of your fb:comments block white (with a little padding on left and right), that would make the comments block look right.
change
<fb:comments width="900"></fb:comments>
to
<fb:comments width="900" style="background-color: white; padding 10px;"></fb:comments>
The fb:comments tag has a css attribute you can specify to pull in your external stylesheet.
<fb:comments numposts="4" title="My Blog Comments" css="http://www.yourwebsite.com/css/comments.css?1234" simple="1"></fb:comments>
http://developers.facebook.com/docs/reference/fbml/comments_(XFBML)/
I added face book like button on my site is there any way to disabled the count which is display next to the button.
http://www.knowledgenotebook.com/FB/notShow.png
You can but not directly.
You have to set data-layout="box_count", wrap button code with extra element, set overflow and move button up. It will be something like that:
<style>
.fb-wrap {height:20px; overflow:hidden;}
.fb-wrap div {position:relative; top:-41px;}
</style>
<div class="fb-wrap"><div class="fb-like" data-href="http://mysite.com/" data-send="false" data-layout="box_count" data-show-faces="false"></div></div>
This will work more bulletproof than crop by width because of internationalization
Yeah, honestly I'm very disappointed that Facebook still didn't do anything to make the button configuration easier (show/hide count, change size, etc.). All the other mayor social buttons - Twitter, G+, LinkedIn, Pinterest have this option available, and there's no need to make CSS workarounds which not always work (mentioned above case of different languages).
For simple sites, just add a fixed width to the iframe ( width:47px !important; )
For the multilingual sites where you have to display the Like/Recommend text in more than one language (EN: Recommend, DE: Empfehlen) the text length is different and you can't set a fixed width, but you can use layout=box_count and set a fixed height:
height: 70px; margin-top:-41px;
You can't.
http://developers.facebook.com/docs/reference/plugins/like
The count is not a configurable attribute
You can. All you need to do is set the width to 47 in facebook's iframe code.
There are a few answers for the different cases where you can hide the count in the answers here:
Facebook Like-Button - hide count?
The side effect is that you have to hide the comment flyout as well.
The default attributes you have available are here:
http://developers.facebook.com/docs/reference/plugins/like/
The code loads an iFrame on your site and you maybe able to adjust the size of the iFrame to hide certain components based on the design "Layout Style" you choose.
You can hide it using css styles, adjusting the width and hiding overflow, but be aware it's forbidden.
Facebook Policy
IV. Application Integration Points
4 d. You must not obscure or cover elements of our social plugins, such as the Like button or Like box plugin
If you want to include a share and like button (and don't need internationalization) this works:
<style>
.fb-wrap {height:20px; overflow:hidden;}
.fb-wrap div {position:relative; left: 27px; margin-left: -27px;}
</style>
<div class="fb-wrap">
<div class="fb-like"
data-width="160"
data-layout="button_count"
data-show-faces="false"
data-send="true">
</div>
</div>
All I had to do was change data-layout attribute from "box-count" to "button". Worked fine.
<div class="fb-share-button" data-href=#longURL data-layout="button">
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.