I hava a Facebook Canvas Application and I need to use FQL in it.
I try to use FQL by using the following code (Facebook JavaScript SDK)
Output-<span id='temp'></span>
<script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
document.getElementById('temp').setTextValue('First');
FB.init({ apiKey: 'my api key' });
document.getElementById('temp').setTextValue('Second');
FB.api(
{
method: 'fql.query',
query: 'SELECT name FROM profile WHERE id=me()'
},
function (response) {
document.getElementById('temp').setTextValue(response[0]);
}
);
</script>
But it doesn't work! It makes an error after document.getElementById('temp').setTextValue('First');
What's wrong with this code?
I have solved this one. You can't use Facebook JavaScript SDK inside of FBML Canvas pages, it is possible only for iFrame Canvas pages.
Related
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 have the following js from facebook which simply loads either a feed or send dialog depending on method setting.
It loads it on page load. Can it be instead loaded on click? Meaning when a user wants it rather than when the page loads?
Example js
<script src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script>
// assume we are already logged in
FB.init({appId: '123456', xfbml: true, cookie: true});
FB.ui({
method: 'feed',
name: 'People Argue Just to Win',
link: 'http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html',
});
</script>
Sure, why not! Serve the API inside a function and execute the function on click of an anchor tag.
Here's the demo: http://jsfiddle.net/kayen/N9jhL/
Can anyone please tell me whats the exact difference between App id and api key? I am basically trying to post the score of a game on facebook with the click of a button (game works offline on browsers) . This is the basic code meant for posting as mentioned in http://developers.facebook.com/docs/guides/web/
<html>
<head>
<title>My Great Website</title>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js">
</script>
<script>
FB.init({
appId:'XXXXXXXXXXXXXXX', cookie:true,
status:true, xfbml:true
});
FB.ui({ method: 'feed',
message: 'Facebook for Websites is super-cool'});
</script>
</body>
(note: i replaced 'XXX..' with a 15 digit code what I have). This particular code throws an error something like this 'An error occurred with TestAndroid. Please try again later.' Can anyone help me to debugg this. Thanks.
Exactly. Theres no difference beetween this variable. As You may know (or not) APP ID name was used before Facebook made OAuth-authentication. Now they're trying to use API Key name, because since OAuth is using, APP ID name is obsolete :)
I got a Facebook canvas apps that already works for authentification on server side and client side. I can post on the wall of my user, and run my app in the canvas fine.
I wanted to add a 'invite your friends' page, and followed the doc by creating a xFBML form:
[...]
<div id='invite-friends-form'>
<fb:serverfbml style="width: 650px;">
<script type="text/fbml">
<fb:fbml>
<fb:request-form
action="http://www.myapp.com:8080//invite/"
method="POST"
invite="true"
type="Name of my app"
content="My app description
<fb:req-choice url='http://apps.facebook.com/myapp/'
label='Accept'
/>
" >
<fb:multi-friend-selector
showborder="false"
actiontext="Invite your friends to my app"
rows="4"
> <fb:multi-friend-selector />
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
</div>
<div id='fb-root'></div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://connect.facebook.net/fr_FR/all.js"></script>
<!-- This does nothing so I commented it out. Can't find a way to debug
<script src="http://static.ak.fbcdn.net/connect/en_US/core.debug.js"></script> -->
<script src="http://myapp.com:8080/js/my_app_js.js"></script>
</html>
This xFBML renders fine when tested in their test page.
Now, in my iframe, I got nothing but the facebook loading animation displaying forever.
Here is my Javascript. I use jQuery to run the code once DOM is ready:
$(function(){
FB.init({
appId : 'my_app_id',
status : true,
cookie : true,
xfbml : true,
level : "debug"
});
FB.getLoginStatus(function(response) {
if (response.session) {
// logged in and connected user, someone you know
alert('logged in'); // this always show up
FB.XFBML.parse(document.getElementById('invite-friends-form'),
function(e) {alert(e)}
);
alert('after xfmbl parsing'); // this sometime show up
}
});
[...]
I got no error showing up, and can't find anyway to debug this. I feel stuck.
Help warmly welcome :-)
Found it:
You need to fill "url" and "domain name" in the internet site section of your app settings with url being the full web url (not the canvas one) and domain should be something like "mysite.com".
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();
}