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 am having a problem getting a div containing facebook like/send buttons to expand when the buttons are clicked. I have searched and tried and tried to fix this, but I'm hitting a wall. I believe it has something to do with how the buttons render an iframe, but I'm not sure.
Here's the code, plain and simple (with an example link for og data).
<div id="fb_btns">
<fb:like href="http://www.imdb.com/title/tt0117500/" data-send="true" layout="button_count" width="450" show_faces="false" ></fb:like>
</div>
and the non-expanding div can be seen here
http://spadeballink.com/GALLOWS/TheGoddamnGallows.html
Any help counts! Thanks in advance!
*Also there is no css declaring the height of this div, the only heights declared are for html and body to be 100% (needed for the background image).
Are you using XFBML or Iframe version of like button? For Iframe version you need to use layout=standard for people to be able to see fly-out comment box.
I have a like button that is loaded from ajax on to my page. When the user clicks it, a popup appears with a textbox that the user can fill and a description of my website. I want to access the dom of that popup, which is in an iframe.
This is so I can add text to the textbox.
All of the following is done in Firebug's Console.
I access the iframe with this:
var x = document.getElementsByTagName("iframe")[3] // the '3' selects this specific iframe
Then, I try this...
x.documentWindow
And I get
undefined
Now this probably has something to do with it, but Firebug's DOM Window does not show inside the iframe. It just shows this:
<iframe id="f3fb49f36c" name="f1b13ffab" scrolling="no" style="border: none; overflow: hidden; height: 225px; width: 401px; " class="fb_ltr" src="http://www.facebook.com/plugins/comment_widget_shell.php?locale=en_US&master_frame_name=f39fb5fa34&offsetX=0&sdk=joey"/>
BUT, in in the Element tab under Chrome's Developer Tools, I can see everything inside it.
Any help you can offer is appreciated.
Take a look at https://en.wikipedia.org/wiki/Same-origin_policy.
It's not possible.
As of today my social commenting plugin is getting cut off.
In my tab page settings I chose fluid for height.
I have my main div with height:100%
Then i have a script that I used to auto resize the page and show all the comments if you clicked show more. This was working fine yesterday.
<script>
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
}
</script>
Here is a link to my tab page:
http://hostfb.com/files/2598/af1d87a797314ed16ec3db8b3f094c45f30f8cf3/
https://www.facebook.com/dewafelbakkers?sk=app_246342282051389
I need my page to extend to show ten comments and then extend more to show more comments if clicked.
Remove the fixed height of 500 on the div that wraps the plugin control (right about fb-root div).
I'm using the following code for my like button
<fb:like id="facebook-like" href="http://mysite.com/index.php" layout="button_count" width="450" show_faces="false" font=""></fb:like>
Some users have experienced the like button not showing up. Noted in 3.6.17 but observed in other versions. I'm somewhat familier with the firefox iframe bug, but I was currious if anyone has any work arounds for the facebook like button.
Like buttons that are rendered with javascript (<div class="fb-like"/> and <fb:like/>) get height=0 if they are initially hidden (display:none).
To work around this, create the element with javascript after the container is displayed, and then run:
FB.XFBML.parse();
Example:
result.show();
var like_box = $(".fb-like-inactive", result);
like_box.removeClass("fb-like-inactive");
like_box.addClass("fb-like");
FB.XFBML.parse();
This CSS solved it for me
.fb-like span, .fb-like iframe { height:25px!important; width:150px!important}
This is still an issue, as can be seen here (also contains fix):
http://codepen.io/wiledal/pen/cGnyq
Firefox does not draw the Facebook-like if the div is hidden at the time of parsing. In the example above I delay the showing of a div after different times. You can see that a like-button shown after 500ms does not get rendered in Firefox.
I managed a work around which does not cut off the comment dialog after liking, simply by using min-height and min-width instead of set values that was previously proposed.
.fb-like span, .fb-like iframe {
min-width: 100px !important;
min-height: 20px !important;
}
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.
Can you try calling the like button like so:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=195243810534550&xfbml=1"></script><fb:like href="http://mysite.com/index.php" send="false" width="450" show_faces="true" font=""></fb:like>
And let me know if you're still seeing issues.
Leaving an answer because I can't leave comments yet...
Oli's nice CSS hack looked like it worked initially:
.fb-like span, .fb-like iframe { height:25px!important; width:150px!important}
but it clipped the comment box that tried to pop up when we actually clicked the like button.
Per's delayed parse solution seems to do the job; here's a bit more detail. In our case we had the like button in a drop down menu, which looked like:
<ul>
<li class="control_menu">
<span>menu name</span>
<ul style="display: none;">
<li><div class="fb-like-inactive" data-href=...></li>
...
</ul>
</li>
...
</ul>
with code that shows the drop down ul when the user hovers over the control_menu element. We used this code to handle the delayed parsing:
$(document).ready(function() {
$('.fb-like-inactive').closest('.control_menu').hover(function() {
var inactive = $(this).find('.fb-like-inactive');
if (inactive.length && (typeof FB != 'undefined')) {
inactive.removeClass('fb-like-inactive').addClass('fb-like');
FB.XFBML.parse(this);
}
});
});
It finds the fb-like-inactive buttons, then looks up the tree to find the containing control_menu elements, then attaches an event to the control_menu elements to detect when the user hovers over them. When it detects a hover for a particular menu element, it looks for inactive like buttons within that element, marks them as normal fb-like, and then parses just the content of that element.
I hope this saves someone some time.
I just spent an hour on this and on a much more basic level, you need to know that the Facebook buttons will not render when testing your page locally.
It may seems obvious but it will only work when rendering from a webserver.
Per's solution is based on the XFBML version of the fb button and I wasn't sure how to do this with the "html5 version" or if it is really possible but I found a CSS/JS solution that doesn't clip content instead so here it is:
html
<button class="like-button">I like this stuff</button>
<!-- This is a hidden like-box -->
<div class="social-share aural">...stuff...</div>
CSS:
html body .aural {
position: absolute;
font-size: 0;
left: -9999px;
}
jQuery:
$('body').on("click", '.like-button', function(e) {
var $socialShare = $('.social-share');
$socialShare.css({'font-size':'1em'});
var sw = $socialShare.width();
$socialShare.animate({left: sw-80}, 400);
});
You may have to use !important rule (in both css and js) or nest the .aural class depending on the rest of your css. If it doesn't work I'd suggest trying to change the default layout so it doesn't override .aural or nest .aural and as a last resort use !important..
I had the same problem but the culprit was setting tracking protection in about:config to true.
This tip turned me on to the idea initially:
Lifehacker: Turn on Tracking Protection in Firefox to Make Pages Load 44% Faster
My solution is completely different to any of the above.
I have a character animation in my page, and one of the elements has the id="body" (which is perfectly reasonable) however this seemed to kill the FB script.
As soon as I renamed my id, the share started working again; I can only presume there was some kind of conflict, as id'ed elements can be referenced as global variables.
I found this out through the usual process of removing elements until things worked, so I'm fairly sure it was this.