Are someone succed to use the method FB.Canvas.setUrlHandler please?
I've already read the following URL's
http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setUrlHandler
http://developers.facebook.com/blog/post/555
but it still don't work... Someone to help me please?
Thanks in advance.
Here is my source code , when I execute this, nothing gets logged in the console:
<html>
<head>
</head>
<body >
<div id='fb-root'> </div>
<script type="text/javascript" src="http://?connect.facebook.net/en_US/?all.js"> </script>
<script type="text/javascript">
FB.init({
appId : 'MY_APP_ID',
oauth : true,
status : true,
cookie : true,
oauth : true,
xfbml: true
});
function testUrlHandler(data) {
if (data.path.indexOf("test1"?) != -1)
console.log('test1');
else if (data.path.indexOf("test2"?) != -1)
console.log('test2');
else
console.log('default');
}
FB.Canvas.setUrlHandler(te?stUrlHandler);
</script>
</body>
</html>
Per the documentation, the callback is only for links on the parent iframe (Facebook UI)
Registers the callback for inline processing (i.e. without page
reload) of user actions when they click on any link to the current app
from Canvas, including:
All ticker stories
Bookmarks
Requests from the bookmarks drop-down list
Request Notifications stories.
Your links in app wont fire the event.
I've spend 3 hours trying to understand what's wrong with it. Sometimes (really rare occasions ) this thing works just fine, and sometimes FB api just ignores this callback.
Solution - set the callback with delay after init, solution: How to work with facebook setUrlHandler?
Related
What I want to do
Get a form using an external script. Prefill and disable some fields. Example:
How I do it
I retrieve a form using an external script(s) :
<!-- Lumesse js imports -->
<!--Apply-->
<script type="text/javascript"
src="https://emea3.recruitmentplatform.com/apply-app/static/apply/release/2-LATEST/apply-preloader-namespaced.js"
th:src="#{https://emea3.recruitmentplatform.com/apply-app/static/apply/release/2-LATEST/apply-preloader-namespaced.js}"
data-lumesse-apply=""
data-lumesse-apply-config-key="XXX"
data-lumesse-apply-host="https://emea3.recruitmentplatform.com"
data-lumesse-apply-description-placement="bottom"
data-lumesse-apply-menu="top"
data-lumesse-apply-menu-placement="top"
data-lumesse-apply-repeatable-style="on-demand">
</script>
<script src="https://emea3.recruitmentplatform.com/apply-
app/static/apply/release/2-LATEST/apply-application-form-namespaced.js"
th:src="#{https://emea3.recruitmentplatform.com/apply-
app/static/apply/release/2-LATEST/apply-application-form-namespaced.js}">
</script>
<!-- in comment because otherwise conflict with static/vendor/jquery.min.js -->
<!-- <script src="https://code.jquery.com/jquery-1.12.3.min.js"
th:src="#{https://code.jquery.com/jquery-1.12.3.min.js}"
th:integrity="sha"
th:crossorigin="anonymous"></script>-->
<script src="https://emea3.recruitmentplatform.com/apply-
app/static/themes/release/latest/silk/js/main.js"
th:src="#{https://emea3.recruitmentplatform.com/apply-
app/static/themes/release/latest/silk/js/main.js}"></script>
The code for prefill or disable works fine.:
<!-- custom javascript -->
<script type="text/javascript" th:inline="javascript" >
$(document).ready(function() {
// fix menu when passed
$('.masthead').visibility({
once : false,
onBottomPassed : function() {
$('.fixed.menu').transition('fade in');
$('.navbar-fixed-top').css({'top': '52px'});
},
onBottomPassedReverse : function() {
$('.fixed.menu').transition('fade out');
$('.navbar-fixed-top').css({'top': '75px'});
}
});
// create sidebar and attach to menu open
$('.ui.sidebar').sidebar('attach events', '.toc.item');
window.setTimeout(function(){
preFillForm();
},0);
});
function preFillForm(){
var gegevens = [[${gegevens}]];
for(var id in gegevens){
$("#" + id).val(gegevens[id]);
}
$("#first_name_1").attr('disabled','disabled');
$("#last_name_2").attr('disabled','disabled');
$("#e-mail_address_3").attr('disabled','disabled');
}
</script>
The problem
My fields don't get prefilled .. My guess is because they don't get reloaded or get overwritten ..
First possible solution
After many hours I added a setTimeout of 0. This seems to work. Now I discovered that this only works on a page refresh or when the user already visited the site and did a page refresh before ...
So still when a user go to the site for the first time it doesn't work ..
Any help would be much appreciated
Cheers
(PS: setTimeout of more seconds is not the way I want to go ..)
UPDATED
My application is a Spring Boot App. Working with Thymeleaf. Also use of Semantic and Jquery in FrontEnd.
Try using sessionStorage or localStorage (sessionStorage seems to be better in this situation).
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
I want post from my facebook page, can anyone please tell me the steps to do it? I see the solutions in web but can't getting what to do, can anyone help me to do this? I just have this code.
<html>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<body>
<p>Log In with the JavaScript SDK</p>
<script>
logInWithFacebook = function() {
FB.login(function(response) {
if (response.authResponse) {
alert('You are logged in & cookie set!');
// Now you can redirect the user or do an AJAX request to
// a PHP script that grabs the signed request from the cookie.
} else {
alert('User cancelled login or did not fully authorize.');
}
});
return false;
};
window.fbAsyncInit = function() {
FB.init({
appId: 'my-app-key',
cookie: true, // This is important, it's not enabled by default
version: 'v2.2'
});
};
</script>
</body>
</html>
In your application you have inserted wrong domain details. Check your settings.
Select the correct App and click in the edit button;
Check the URLs & paths are correctly entered and are pointing to the site where you have installed Ultimate Facebook plugin.
I called Facebook js methods "FB.Canvas.Prefetcher.addStaticResource",
in IE 9 and chrome, if it works ,the resources could add to the staticresources,I
can check it in the Facebook Graph API Explorer. but it never happen.
My code:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '616151165162658',
status : true,
xfbml : true,
version : "v2.5",
cookie : true
});
FB.Canvas.Prefetcher.setCollectionMode(FB.Canvas.Prefetcher.COLLECT_MANUAL);
FB.Canvas.Prefetcher.addStaticResource('https://staging.ae-mobile.com:20443/mytest/1.2.3.0/resource/en/spine/cavemen_freespin.swf');
};</script>
I can got the breakpoint of this code, so I can sure the code runed.
The staticresources Explorer
image
is there any wrong.. why its not showing... have i call that methods in correct place..?
thanks in advance!
FB.Canvas.setDoneLoading(); after addstaticroute. and collection mode to COLLECT_AUTOMATIC. Also SSL certificate of your website is not valid.
Here is my scenario. When a user opens a browser and goes to facebook.com to sign himself in, I want to be able to detect that and init my Facebook application sign-in process.
Is that possible? I'm asking because I noticed that signing into Facebook itself doesn't get my app signed in automatically, which is not good.
I'd prefer JavaScript client code.
UPDATE: Here you have a FULLY WORKING example. The only thing you will need to do is to replace the APP_ID for whatever ID you get when sign your app at: http://www.facebook.com/developers/ and the port you may use for the localhost test. This detects when the user logs in even in another browser window. It is obviously extremely basic but proves the point that is feasible with the tools from the graph API.
You can add this code to detect when the user logs in. It is the same oauth log in whether the user clicks on a <fb:login-button> or logs directly onto facebook.com:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Hello App Engine</title>
<SCRIPT type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></SCRIPT>
</head>
<body>
<h1>Hello!</h1>
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId : APP_ID,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
/*
* Authentication functions
*/
FB.Event.subscribe('auth.login', function (response) {
welcomeMsg(response);
});
FB.Event.subscribe('auth.logout', function (response) {
alert ("Good bye!");
});
if (FB.getSession() != null) {
FB.api('/me', function(response){
console.log(response.name);
welcomeMsg(response);
})
} else {
window.setTimeout(function(){window.location.href="http://localhost:8888"},5000);
}
function welcomeMsg(userData) {
console.log ("Welcome " + userData.name);
}
</script>
</body>
</html>
You can subscribe to the auth.login event.
http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
There are many Facebook images that you can see only if you're logged into Facebook. You can make the user attempt to load one of these images, and then detect if it loaded or not. It's a total trick.
Reqs:
I want to make an external page with a 'Become a Fan'-button.
I want users to login to facebook once they open the page (this is because of other features in the site)
So I call FB.Connect.requireSession once the page loads, and put a <fb:fan></fb:fan> control on the page.
Then when I open the page I see the 'Connect with Facebook to Continue' pop-up and a small 'Become a fan' button. This seems right. When I log in to Facebook using the pop-up the 'Become a fan button' disappears!!
Can anyone explain this weird behaviour or does someone know a way to reach my requirements in a different way.
Below you can see my code.
Thanks in advance!
<!-- Head -->
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/nl_NL" type="text/javascript"></script>
<script type="text/javascript">
var fbApiKey = "MY_KEY";
var fbXdReceiver = "xd_receiver.htm";
function fbLoad() {
FB.init(fbApiKey, fbXdReceiver);
FB.ensureInit(function() {
FB.Connect.requireSession(null, null, false);
});
}
</script>
<!-- Body onload="fbLoad();" -->
<fb:fan profile_id="24932281961" name="Nutella" id="fanButton" stream="0" connections="0" logobar="0" width="250"></fb:fan>
I solved this by making the page refresh after a successful login
So I call requireSession with a callback
FB.ensureInit(function() {
FB.Connect.requireSession(requireSessionSuccess, null, false);
});
And this is the code for the callback
function requireSessionSuccess() {
window.open('default.aspx?fbloggedin=true', '_self');
}