Facebook login Javascript SDK only running in first page

Question

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 = "Facebook account (please connect your account)"; } } // 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 = "

"; }); } });

Sona · Accepted Answer

Hello @Joris_Demmers ,Step 1: Paste the following code to the header in the look and feel 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.

Joris_Demmers · Answer

@Sona that works perfectly! Thank you very much!

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded