Facebook login Javascript SDK only running in first page | XM Community
Skip to main content
Hi there, I have included Facebook login Javascript SDK to create a social login button and display participants' Facebook user picture in Qualtrics. One problem I am facing is that displaying the user picture works fine the very first time I want to show it, but not anymore on follow up pages (i.e. after clicking the next button). The same applies to the social login button, but I only need that to show that once anyway, so that's not really a problem. I've tried simply copying the Javascript code to the question where I also want to show the user picture, as well as adding it to the header in the look&feel, but I cannot get it to work. It works fine for the first question I use it in (regardless of where in the survey it is), but not for any follow-up questions. Any help would be very much appreciated! Thanks! Here's the code I used: Qualtrics.SurveyEngine.addOnload(function() { // This is called with the results from from FB.getLoginStatus(). function statusChangeCallback(response) { console.log('statusChangeCallback'); console.log(response); // The response object is returned with a status field that lets the // app know the current login status of the person. // Full docs on the response object can be found in the documentation // for FB.getLoginStatus(). if (response.status === 'connected') { // Logged into your app and Facebook. getInfo(); } else { // The person is not logged into your app or we are unable to tell. document.getElementById('status').innerHTML = "<span style='color: #333333; font-size: 16px;'>Facebook account (please connect your account)</span>"; } } // This function is called when someone finishes with the Login // Button. See the onlogin handler attached to it in the sample // code below. function checkLoginState() { FB.getLoginStatus(function(response) { statusChangeCallback(response); }); } window.fbAsyncInit = function() { FB.init({ appId : '875253029346318', cookie : true, // enable cookies to allow the server to access // the session xfbml : true, // parse social plugins on this page version : 'v3.1' // use graph api version 2.8 }); // Now that we've initialized the JavaScript SDK, we call // FB.getLoginStatus(). This function gets the state of the // person visiting this page and can return one of three states to // the callback you provide. They can be: // // 1. Logged into your app ('connected') // 2. Logged into Facebook, but not your app ('not_authorized') // 3. Not logged into Facebook and can't tell if they are logged into // your app or not. // // These three cases are handled in the callback function. FB.getLoginStatus(function(response) { statusChangeCallback(response); }); }; // Load the SDK asynchronously (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 = "https://connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); // Here we run a very simple test of the Graph API after login is // successful. See statusChangeCallback() for when this call is made. function getInfo() { console.log('Welcome! Fetching your information.... '); FB.api('/me', 'GET', {fields: 'first_name,last_name,name,id,picture.width(100).height(100)'}, function(response) { document.getElementById('status').innerHTML = "<img src='" + response.picture.data.url + "'>"; }); } });
Any help is much appreciated! Thanks!
Hello @Joris_Demmers , Step 1: Paste the following code to the header in the look and feel <script> var gid; function statusChangeCallback(response) { console.log('statusChangeCallback'); console.log(response); if (response.status === 'connected') { getFBData(); } else { document.getElementById('status').innerHTML = 'Please log ' + 'into this app.'; } } function checkLoginState() { FB.getLoginStatus(function(response) { statusChangeCallback(response); }); } window.fbAsyncInit = function() { FB.init({ appId : '875253029346318', cookie : true, // enable cookies to allow the server to access // the session xfbml : true, // parse social plugins on this page version : 'v2.8' // use graph api version 2.8 }); FB.getLoginStatus(function(response) { statusChangeCallback(response); }); }; (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 = "https://connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); function getFBData() { FB.api('/me', function(response) { fbinfo = new Array(); fbinfo[0] = response.id; fbinfo[1] = response.first_name; fbinfo[2] = response.last_name; fbinfo[3] = response.email; gid=response.id; var im = document.getElementById("pic").setAttribute("src", "http://graph.facebook.com/" + response.id + "/picture?type=normal"); }); } </script> Step 2: Now if you look at the last line of the code we are addding src attribute to the img tag with id "pic". Hence you must assign id="pic" to your img tag where you are displaying the image(profile picture) in the page. Step 3: For next pages also you need to have a img tag with id="pic" and paste following code in the js(onReady) option of the question on that page `var im = document.getElementById("pic").setAttribute("src", "http://graph.facebook.com/" + gid + "/picture?type=normal");` @Joris_Demmers Let me know if you got the implementation and got that working, because its working for me.
@Sona that works perfectly! Thank you very much!
So thanks to @Sona displaying the user profile picture anywhere in the survey works absolutely perfect (thanks again for that!). What I was now wondering in addition is if there would be any way to get the FB first_name, last_name and email (@Sona's code already takes care of that) and then use that as the default choice text for a text question, so basically autofill the text box with it. Qualtrics' Default Choice boxes do not seem to accept html... Any advice here would be great and very much appreciated!