I'm having an issue here when trying to display data or get the data to work or at least be displayed in the console - I currently have a TypeScript React project where I want to display a Facebook page posts, which include the pictures and message/description.
By following other resources and else, I've found that Ad blocker blocks the API on loca host at least, thus I added js.src to the connect Facebook link, that has been the most noticeable change I've done to the code given by Facebook in https://developers.facebook.com/docs/javascript/quickstart and I've replaced some of the appId digits with **** just in case.
And this is line of code in the index.html:
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<script>
function init() {
FB.api(
"/me",
"GET",
{ fields: "id,name,about,posts{full_picture,message}" },
function (response) {
console.log(response.name);
}
);
}
window.fbAsyncInit = function () {
FB.init({
appId: "713461583720****",
autoLogAppEvents: true,
xfbml: true,
version: "v16.0",
});
init();
};
</script>
<script
async
defer
crossorigin="anonymous"
js.src="https://connect.facebook.net/en_US/sdk.js"
></script>
</body>
I'm open to answering any questions, I'm super thankful for any respond this thread gets, thanks!
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!
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 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();
}