I am getting an error in Chrome when using a few Facebook plugins, including LIKE button and LIKE Box. This is the error I get:
Unsafe JavaScript attempt to access frame with URL http://samplewebsite.com/ from frame with URL http://static.ak.facebook.com/connect/xd_arbiter.php?version=18#channel=f3c….com&channel_path=%2Fchannel.html%3Ffb_xd_fragment%23xd_sig%3Df105c9419%26. The frame requesting access set 'document.domain' to 'facebook.com', but the frame being accessed did not. Both must set 'document.domain' to the same value to allow access.
*I replaced the site domain for a different one
I tried different variations of the buttons, including XFBML, iframe, HTML5 but nothing seems to solves this. I also use a channel.html file.
My Javascript code initialization:
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({
appId: 'some_app_id',
status: true,
cookie: true,
channelUrl: '//samplewebsite.com/channel.html',
xfbml: true
});
};
(function (d) {
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);
}());
</script>
The fb-root div exists on the page right above the script.
My doctype is for HTML5:
<!DOCTYPE html>
<html
lang="en"
prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#"
xmlns="http://www.w3.org/1999/xhtml">
I also tried with the regular attributes without the prefix, but still get the same error.
Is there a solution for that. I can provide any information needed. Thanks!
Related
The following codes have worked before but not now. Since FB added the confirm box when liking a page, the edge.create was no more fired after confirming.
<div class="fb-page" data-href="{{ $fbPageUrl }}" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"></div>
<script>
$(document).ready(function() {
$.getScript('//connect.facebook.net/en_US/sdk.js', function(){
FB.init({
appId : 'xxxxxxxxxxxxxx',
xfbml : true,
version : 'v2.9'
});
FB.Event.subscribe('edge.create', function(response) {
alert('Fired!');
});
});
});
</script>
You can no longer subscribe to edge.create. At this time (04/2018) it is still in the documentation, but it is deprecated and to be fully removed in the near future.
By design, there is no way for a third party application to know when the Like button is clicked.
You will need to design your app in a way that does not require you to know when the Facebook Like button provided in the iframe is clicked.
Referencing this bug report:
The edge.create event is deprecated (https://developers.facebook.com/docs/plugins/faqs/), so the engineers have decided not to fix it for this case since it will be taken out completely in the future api release.
And from this one:
I understand that it's important to you, but unfortunately we did the deprecate on purpose due to policy issue.
Developers are not supposed to check the user press any more.
I suspect this is a bug from the new Facebook's update. You can search for the issue here https://developers.facebook.com/bugs, also can post a new bug if it hasn't been reported yet
These Events will no longer be accessible. As an alternative, you can use our Webhooks and be notified every time someone likes one of your Facebook Pages.
This is the webhooks endpoint
Source
Working solution until now:
<!doctype html>
<html lang="en" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<meta charset="utf-8">
<title>Facebook Like Button</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function () {
FB.init({appId: '1906177386133148', status: true, cookie: true, xfbml: true});
FB.Event.subscribe("edge.create", function (targetUrl) {
console.log('edge.create');
});
FB.Event.subscribe("edge.remove", function (targetUrl) {
console.log('edge.remove');
});
};
(function () {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/es_ES/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:like></fb:like>
</body>
</html>
This question might be somewhat open ended.
How would I go about switching from using FBML in my application to using the Javascript SDK and Social Plugins. Im dealing with a massive application so it's hard to tell how FBML was implemented and how the SDK should be implemented now. First I decided to switch this line.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:fb="http://www.facebook.com/2008/fbml">
To this:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:fb="http://ogp.me/ns/fb#">
Also, this piece of code (which looks like it loads the sdk) is there
window.fbAsyncInit = function()
{
//initialize
FB.init({
appId : myid,
status : true,
cookie : true,
xfbml : true
});
};
(
function()
{
var something = document.createElement('script');
something.async = true;
something.type = 'text/javascript';
something.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(something);
}()
);
Anything else needs to be done?
In addition you need to:
Define an HTML element: <div id="fb-root"></div> inside the <body>.
Search for elements starting with <fb: and remove those associated with FBML.
I am trying to add a Google Plus button to my site, and keep getting JavaScript safety warnings, despite the fact that I am using Google's recommended code, on Chrome.
I have reproduced the errors with code copied straight from Google Webmaster's recommended code, with no other additions:
<html itemscope itemtype="http://schema.org/">
<head>
<meta itemprop="name" content="Title">
<meta itemprop="description" content="Description">
</head>
<body>
<g:plusone annotation="inline"></g:plusone>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')\[0\]; s.parentNode.insertBefore(po, s);
})();
</script>
</body>
Load this in Chrome (15 on Mac), and the developer console warns:
Unsafe JavaScript attempt to access frame with URL http://mydomain.com/
from frame with URL https://plusone.google.com/_/+1/fastbutton?url=http%3A%2F%2Fmydomain.com%2F&size=standard&count=true&annotation=inline&hl=en-US&jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fwidget%2F__features__%2Frt%3Dj%2Fver%3Dt6mt7PFQYRQ.en_GB.%2Fsv%3D1%2Fam%3D!agWx4Vf_ACSIFA91ZQ%2Fd%3D1%2F#id=I1_1323174311773&parent=http%3A%2F%2Fmydomain.com&rpctoken=352111652&_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe.
Domains, protocols and ports must match.
Is the Google Webmaster recommended code simply unsafe? Or have I done something wrong?
This is a common warning thrown by social plugins. Twitter and Facebook plugins usually throw this warning too. You can safely ignore it.
I am not using any Flash at my application. The code that cause the issue is the simplest one that you can find at the end.
I configured my application to work in IFrame exactly as it mentioned at the facebook developer site.
The problem is that when I add the init option the page doesn't stop to do ajax call (infinite loop) to the server in IE8 and if I am playing with it for a while and moving up & down after I am clicking on the button to submit the form I see those kind of errors:
Error #2044: Unhandled
SecurityErrorEvent:. text=Error #2047:
Security sandbox violation:
LocalConnection.send: ak.fbcdn.net
cannot access
http://static.ak.fbcdn.net/rsrc.php/v1/yF/r/Y7YCBKX-HZn.swf.
or
Error #2044: Unhandled StatusEvent:.
level=error, code=
Again I am not using any Flash/Flex/SWF in my facebook application and I am using the most simple code that contain just JS without any changes.
<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<!-- stylesheets for the UI -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<form>
<button type="submit"> WOW</button>
</form>
</body>
</html>
Check your app settings in the Facebook Developer app: I've noticed similar problems if you have the Site Domain field set incorrectly. The page simply keeps refreshing over and over and over again.
I couldn't figure out what value to put there to make it stop doing that so I simply cleared that field and the problem went away.
I am using the facebook javascript sdk to embed a like button in my page.
What is fb_xd_fragment? I see it appends to the end of my url like http://www.example.com/controller/?fb_xd_fragment, and this is causing some nasty recursive reload of the page.
After many weeks of trying to find a solution it looks like what is needed is a custom channel url as mentioned here:
http://developers.facebook.com/docs/reference/javascript/FB.init
All I did was create the channel.html file containing this single line:
<script src="http://connect.facebook.net/en_US/all.js"></script>
Then I added the channelUrl : line so the final result looks like this:
<div id="fb-root"></div> <script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelUrl : 'http://www.example.com/channel.html' // custom channel
}); };
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());</script>
Make sure to add a comma after xfbml : true if it was your last line. I'm not familiar with Javascript so I don't know if I'm taking full advantage of this but I know it prevents the fb_xd_fragment issue and allows FB comments in IE. As far as I can tell, this is the ONLY solution available online. Any further tweaks are welcome.
Solved with the iframe like button.
The fix for this bug can be found here:
http://wiki.github.com/facebook/connect-js/custom-channel-url
a1anm's link is good for cleaning up the mess that this causes, but there's a way to prevent it from happening.
Set 'channelUrl' to a locally hosted channel page. See http://threebrothers.org/brendan/blog/facebook-connect-ie-fb_xd_fragment-iframe/ for details.
The bug and the fix are now documented at http://developers.facebook.com/docs/reference/javascript/fb.init/
I used the approach within script to define the channelUrl to a page on my site, but I still got multiple hits back to that page.
After watching the resulting traffic with WireShark, I noticed they (Facebook) use a channelUrl for some of their own internal calls, also passing fb_xd_fragment - I instead used that URL for the channelUrl, redirecting it away from my site.
I have multiple Like buttons on my site using fbml instead of frames, and on IE7, I no longer get a hit back from Facebook with the fb_xd_fragment parameter.
Not sure if this is best practice but it seems to work.
I set this value for the channelUrl:
'http://static.ak.fbcdn.net/connect/xd_proxy.php'
Hope this helps.
Although the answer above from github seems like an answer to another question, it does work well.
UPDATE: link is broken - try http://blog.colnect.com/2010/10/fbxdfragment-bug-workaround.html
affer few days research and expriment with all solution on internet at last i come up with combine of this
Change your head of your page:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" lang="en-US">
here the cocde put this where you want likeit button is:
<div class="yourclass" style="z-index: 10;">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js" ></script>
<script>FB.init({appId: '1234yourappidhere', status: true, cookie: true, xfbml: true});</script>
<fb:like href="http..yourencodedurlswillputhere" layout="button_count" width="150" action="recommend" colorscheme="light"></fb:like></div>
<script> document.getElementsByTagName('html')[0].style.display='block';</script>
credit wellcome : http://www.xaluan.com
The Channel hack did not work for me.
So I just added above all other content in my PHP file some code that 301 redirects to the URL without the fb_xd_fragment addition:
$url = "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
if (isset($_GET['fb_xd_fragment'])) {
$url = str_replace("?fb_xd_fragment=","",$url);
header( "HTTP/1.1 301 Moved Permanently" );
header("Location: {$url}");
exit();
}