This is my first question asked, so if I leave out details please be a little lenient. Thanks!
I am using the Facebook Like Button plugin on my site (tried both HTML5 version and xfbml version). I have included all necessary tags and scripts for xfbml and HTML5 support. I have followed the "spec" and done a thorough amount of searching here and elsewhere to the problem:
The like button functions correctly, except that the flyout/popup that is supposed to show after clicking the button doesn't load. I mean load, not show (and yes I already checked for overflow:hidden issues per the spec). The new <span> (which includes the <iframe>) are added to the DOM immediately after the like button <span>, and they load all of the code that is supposed to be there:
<span class=" fb_edge_comment_widget fb_iframe_widget " style="top: 19px; left: 0px; z-index: 10000;">
<span>
<iframe id="fa02aa64d8da" class="fb_ltr" scrolling="no" name="fee6eb9f6f2768" style="border: medium none; overflow: hidden; height: 225px; width: 401px;" src="http://www.facebook.com/plugins/comment_widget_shell.php?api_key=233493930007947&locale=en_US&master_frame_name=fa12240bc73214&sdk=joey">
<html>
<head>
<body onload="onPageLoad()">
<script>
var onPageLoad = function() {
document.domain = 'facebook.com';
var loc = window.location.toString();
var index = loc.indexOf('?');
var qs = loc.substring(index + 1);
var params = qs.split('&');
var master_frame_name = '';
for (var i in params) {
var components = params[i].split('=');
if (components[0] == 'master_frame_name') {
master_frame_name = components[1];
break;
}
}
try {
var master_frame = parent.frames[master_frame_name];
master_frame.ExternalNodeConnectWidget.onCommentWidgetLoaded(document);
} catch (e) {}
};
</script>
</body>
</html>
</iframe>
</span>
</span>
Now after that <span> is loaded it is supposed to fire the script function onPageLoad which should load all of the data into the <iframe>. Instead I get a bunch of errors:
There is the infamous Unsafe Javascript attempt to access frame with URL
When you manually run the onPageLoad() function (in hopes of it loading the content into the iframe) in the console/Firebug, you get
(in Chrome 15)
Error: SECURITY_ERR: DOM Exception 18
code: 18
message: "SECURITY_ERR: DOM Exception 18"
name: "SECURITY_ERR"
__proto__: DOMException
(in Firefox 7)
Error: Illegal document.domain value
document.domain = 'facebook.com';
I presume this has to do with cross-domain requests, but it seems like for other people, they just get the error but the popup still loads properly. Any ideas how to get this to work?
This is a known Facebook bug: http://developers.facebook.com/bugs/293075054049400
Basically, one gets this behavior if secure browsing is enabled on the Facebook user's account.
If you have secure browsing disabled (as it is default) here is another possible solution:
You cannot use localhost in the og:url since Facebook cannot surf that page to get the data. So when developing, enter the live site URL in og:url, og:image, the like/share button url etc. Even that might not help, the click needs to be made on the live site, when I deployed it worked fine.
Anyone know a work around for this to make it easier when developing locally?
Related
I have currently implemented a vertical social-share plugin bar similar to one shown here.
http://www.socialmediaexaminer.com/10-ways-to-add-facebook-functionality-to-your-website/
I have used the same code generated for the like button from Facebook. I am using the HTML5 code generated. When using the Chrome browser, the Facebook like button displaces from its position slightly when the back button is pressed. I am not sure what is causing this to happen and how to resolve it.
Used code for the Facebook like button:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=504480219635937";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
When I look at your source, I see that you are using tables(that could be a potential problem). At a normal page load the span width and height are set. After you click on the back button these properties aren't set(these will be automatically calculated).In normal situations this will work, but I guess the data isn't refreshed/reloaded when you hit the back button and so the width and height will not be recalculated. You could try to set data-width="122" data-height="20".
eg. <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-width="81" data-height="20" data-show-faces="true" data-share="true"></div>
or force by CSS:
.fb-like iframe {
width: 81px !important;
height: 20px !important;
}
Also read following article: Ajax, back button and DOM updates
Edit: After doing some research another possible reason why this happens is related to the cache of WebKit browsers(strange, because it works on my iPhone). The solution they provide is to disable the onunload function:
window.onunload = function(){};
See The Safari Back Button Problem
Probably fix : After some deeper investigation I found out that Chrome gives an error in the console: fb:like failed to resize in 45s.
Following code would be a temporary fix(fb:login_button failed to resize in 45s):
#fb_login_button {
width: 80px;
}
#fb_login_button span,
#fb_login_button iframe {.
width: 80px !important;
height: 25px !important;
}
Again, I'm not sure about this
Yup, this seems to be a long-documented problem (applying to other plugins like login) which Facebook weren't able to fix for the like button.
One fix suggested on the dev forums is a very reasonable one: set data-show-faces="false" but does nothing for me.
Apparently
When the bug is triggered fb js fails to assign the iframe (.fb_iframe_widget_lift) a width/height. As a result the iframe has an auto width/height of 300px/1000px.
Ideally this would be an easy bug to patch around, as we could give
the iframe a min/max width/height. However, since all Like button
clicks show the post comment modal, this solution is less viable. In
the case of the box_count button layout part of the modal is displayed
atop the button, therefore constraining the iframe size looks extra
janky.
I don't know how to use PHP (and it's blocked on the site I'm editing actually) but in case it can help anyone else here's the final comment so far (posted yesterday)
Use the iframe version of the code, which you can get here:
https://developers.facebook.com/docs/plugins/like-button/ You need
the Javascript SDK loaded as well.
On the parent page, you need to use PHP to capture and store in a
session variable the complete URL of the parent page:
<?php $fburl = (#$_SERVER["HTTPS"] == "on") ? "https://" : "http://"; if ($_SERVER["SERVER_PORT"] != "80") {
$fburl .= $_SERVER["SERVER_NAME"] . ":" . $_SERVER["SERVER_PORT"] . $_SERVER["REQUEST_URI"]; } else {
$fburl .= $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"]; } session_start(); $_SESSION['savedurl'] = $fburl; ?>
Then, make the code to show the button(s) in the iframe like this:
<iframe src="//www.facebook.com/plugins/like.php?href=<?php session_start(); echo $_SESSION['savedurl']; ?>&width&layout=standard&action=like&show_faces=false&share=true&height=20&appId=your-app-id-goes-here" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:20px; width:330px;" allowTransparency="true"></iframe>
Change "your-app-id-goes-here" to your own appID.
This works because Facebook's iframe code is now contained within your
properly sized iframe, and therefore has no choice but to fit and stay
where it belongs...
There are names like Nike on the dev forum and it's still getting updated so hopefully further resolution's on the way – just thought I'd provide links and the latest available info here.
Here is the deal (over-simplified a bit)
I'm creating an application which has "tabs", each tab can have similar content displayed as iFrames.
So, I was hoping to share those in between tab switches, since the initial request from the iFrame load is somewhat of an expensive operation.
This, however, would require me to "save" the iframe, and then re-insert on the DOM.
There are two issues with that:
1) I can't seem to be able to access the iframe's contentWindow to call into javascript functions while it's resting in memory
2) The iframe reloads whenever it's inserted in the DOM.
I read that document.adoptNode might fix issue #2, so I tried the following
<html>
<head>
</head>
<body>
<script>
window.onload = function() {
setTimeout(adoptIFrame, 500);
};
var next = ['red', 'blue']
var index = 0;
function adoptIFrame() {
var iFrame = document.adoptNode(document.getElementById("frame"));
document.getElementById(next[index++ % 2]).appendChild(iFrame)
setTimeout(adoptIFrame, 500);
}
</script>
<div id="red" style="width:500;height:500;background-color:red;">
</div>
<div id="blue" style="width:500;height:500;background-color:blue;">
<iframe src="your_url" id="frame"/>
</div>
</body>
But each time, there is a still a refresh being made on re-insertion.
Any ideas?
This is a bit late, but since I've come across the same issue, I did some research and it seems the feature has been removed from Webkit: https://bugs.webkit.org/show_bug.cgi?id=81590.
Facebook's mobile examples use the script: http://connect.facebook.net/en_US/all.js. This script adds to the div fb-root. My mobile site is 320px wide and I use the viewport meta setting. Including Facebook's script causes a big extra space on the right side of the actual content because it's settings it's contents to 575px wide. I tried including code to replace the 575px with 320px ("#fb-root").val().replace("575px","320px"); but that hasn't helped -- maybe I'm doing it wrong (using jQuery).
Anyone know how to restrict this to 320px?
Update:
Found a bug a report on this with two work-arounds:
Set status to false in the FB.init. I can verify that this does fix the problem for me, but breaks the ability for users to login.
Move <div id="fb-root"></div> directly under <body>. This didn't work for me.
Source:
http://bugs.developers.facebook.net/show_bug.cgi?id=18528
I used the following css style rule to beat this 575px #fb-root width problem:
#fb-root > div { left:-575px !important; }
That works because, if you locate the #fb-root node in, say, Firebug's HTML tree-viewer, you'll find that it contains a child div that is styled as follows:
position: absolute; top: -10000px; height: 0pt; width: 0pt;
i just set this in the css by default
#fb-root{display:none}
and when i need to use the FB dialogs(when calling FB.ui), i do this:
$('#fb-root').show();
and in the callback of the FB.ui, i do this
$('#fb-root').hide();
so here is an example:
var inviteFriend = function (msg) {
$('#fb-root').show();
FB.ui({
method: 'apprequests',
message: msg
}, function (response) {
$('#fb-root').hide();
console.log('sendRequest response: ', response);
});
},
this works for me, and i have tested on some devices.
The code you've provided seems to only replace the value in the code, which has, by that point, already fired. You might try to setting the width with jquery's .css() method on fb-root. Make sure this is fired after the fb js sdk is included, or put into the callback method if loading asynchronously.
Or just wrap it in another div, set its height and width, and the put overflow:hidden;
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.
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.