The question has been asked prior but no clear response was obtained
I an using Facebook's plugin which lets one embed and promote any public Facebook Page on a website
I am trying to hide not remove the scroll bar from the side
I still want scroll functionality but I do not want the scrollbar to be visible
What is the best method to achieve this functionality
https://jsfiddle.net/wesuf2tq/1/
<md-card style="width:auto">
<md-card-header style="background-color: dodgerblue; font-size:15px;font-weight:600; color: white; ">
<i class="fa fa-facebook-square" aria-hidden="true" style="font-size:40px; margin:0 auto"></i>
</md-card-header>
<div class="facebookContainer" >
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FKobe%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
height="800" style="width:100%;border:none;overflow:hidden;"
scrolling="no" frameborder="0" allowTransparency="true"
allow="encrypted-media"></iframe>
</div>
</md-card>
There is absolutely no way to achieve this at all - the plugin loads its content into the iframe from a different origin, so the Same Origin Policy prevents you from accessing anything inside it via JavaScript, or to inject any custom styling.
You are limited to the configuration options Facebook offers here - and hiding the scrollbar is not one of them.
Related
It seems jQuery mobile and iframes don't play well.
Firstly, we know iframes are a bad idea - but in this case, we need to use it to load a form into our page - that has jQuery Mobile touch functions enabled.
Now, this works fine on all desktop devices, but on iOS - it seems when you select a form field that's in the iframe - and scroll - the form field loses focus and you can no longer enter text (even though the iOS keyboard is still visible). This is is a bit of a problem when there's a Captcha field in the form and users need to scroll to review the passphrase.
Any solution to this would be greatly appreciated! Thanks!
In ios Scroll bars in iframes are removed and render them as blocks. What I did for this solution is wrapping the Iframe inside a div and let the Iframe expand according to
<div id="myIframeParentDiv" class="myIframeParentDivClass">
<iframe style="z-index:2000" id="myIframe" width="100%" height="100%" src="" frameborder=0 ALLOWTRANSPARENCY="true" >
<p>Booking Engine error! your browser does not support iframes.</p>
</iframe>
</div>
STYLES
#myIframeParentDiv{
height: 100%;
width: 100%;
overflow:auto;
-webkit-overflow-scrolling: touch;
}
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 standard facebook plugin on my webpage. But though the size is specified, on various occasions (e.g. the PC is not logged in) the text overflows - ignoring the overflow:hidden. In simple words: it does not what it should do. Here goes the code:
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FKLARTEXT%2F207788969239606%3Fref%3Dhl&send=false&layout=standard&width=250&show_faces=false&font=verdana&colorscheme=light&action=like&height=30" scrolling="no" frameborder="0" style="border:none; align:"middle"; overflow:hidden; width:250px; height:30px;" allowTransparency="true"></iframe>
Any ideas?
Can you point us to some specific examples? There were some bugs recently causing social plugins to bleed over their divs. According to the bug tracker these should be fixed by now:
https://developers.facebook.com/bugs/500201816697073
https://developers.facebook.com/bugs/409142149161197
You can always help yourself by putting the social plugin inside another div with overflow:hidden:
<div style="overflow:hidden;width:300px;height:100px;">
<div class="fb-like" data-href="..."/>
</div>
I've got weird problem. I'm trying to add Facebook Like Button on my website, but it doesn't show up in Internet Explorer and Firefox. Yes, I've already added this:
<html xmlns:fb="http://ogp.me/ns/fb#">
and FB-Root and JS SDK. Whenever I'm trying to add XFBML or HTML5 version, it always doesn't show up in IE and Firefox. In Chrome and Safari it works well.
However, when I leave cursor on the button that is displaying div that contains FB like box over the mouse hover, it will display properly. Also, when I put this like button in any other place on my site, it will show up.
Here's the code:
<li id="menu-item-21" class="ikonka menu-item menu-item-type-custom menu-item-object-custom menu-item-21">
<a href="#"><span class="fb ikoneczka"></span>
<div class="box_pop">
<p>Text</p><hr/>
<div class="fb-like" data-href="http://facebook.com/facebook" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false"></div>
</div>
</a>
</li>
It looks like Firefox and IE are rendering this box at the start of loading the page. However, they leave space for them. It's weird.
I wish you could help me. Thanks in advance.
OK, so I found solution for this problem.
Firstly, I've clear up all z-index in my css file and set z-index: 8; for .box_pop.
Secondly, set .ikonka div to display: none; and leave .ikonka:hover div with nothing (you can just don't put this in css).
Thirdly, I've set up some jQuery:
<script>
$(document).ready(function() {
$('#your-li-id').hover(function() {
$(this).addClass('pretty-hover');
}, function() {
$(this).removeClass('pretty-hover');
});
});
</script>
Note: where is #your-li-id you must put here id of your li element. This script will add pretty-hover class to your li. Then, in CSS, put this:
.pretty-hover div{
display: block;
}
It should work now.
As you can see, you mustn't set display: none; into your CSS and then - also via CSS - just add display: block; on hover.
If you will do that, iFrame won't be visible in IE or even FF. You must do this trick with jQuery.
I had the same problem on Firefox only (v.29.0.1) and it turned out to be AdBlock plus (v.2.6) blocking the Like and Share buttons from rendering.
I've been trying to find out how on earth to add some kind like button on a facebook fan page. I know there are ways of doing this. This page for instance has implemented one kind of like button: http://www.facebook.com/JimBeam?v=app_100742133310820
I know both of these pages use applications and not the static FBML page that you usually use. So I created an application where it works beautifully.
On this application, the like button works. However when I try to add it to a tab on a facebook page I get an error saying: "HTML error while rendering tag "iframe": iframes forbidden by flavor TabFBM" So apparently iframes aren't allowed to render. But obviously there are ways around this so do you have any clue on how they did it on the other pages?
I'd really appreciate an answer, and I'm especially curious whether if someone could figure out how they restyled the like button on Jim Beam's page.
Facebook page's tab are FBML. And you can not directly add the like button (fb:like or anything else) on this page. But there is a "trick" to do this, and page you give implement the following:
The only way to get the like button is to load it in an iframe. But iframes are forbidden in page's FBML as well. So the trick is to load an html page with AJAX (fbjs calls) which contains an iframe with the fb:like button. As Facebook forbids javascript autofiring, you need a like or a picture to get clicked on before doing the ajax call to load your html's iframe. This mostly is a pain in the ass.
So, here is the proof of concept code.
First file: index.html:
<script type="text/javascript">
<!-- function launch_code() {
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.requireLogin = false;
ajax.ondone = function(data) {
document.getElementById('content').setInnerFBML(data);
}
document.getElementById('content').setTextValue('Loading, please wait.');
ajax.post('http://example.com/greatpageapp/iframe.html');
return false; }
//--> </script>
<div id='content'>
<input type='button' onclick='launch_code(); return false;' value='click on me' />
</div>
And the iframe.html contents:
<center>
<table valign="top" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="520" height="1500">
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fgoogle.com%2F&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
</td>
</tr>
</center>
Tested now and working. Hope that helps.