Facebook login Javascript SDK only running in first page | XM Community
Solved

Facebook login Javascript SDK only running in first page

  • 10 September 2018
  • 4 replies
  • 253 views

Badge
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 + "'>";
});
}

});
icon

Best answer by Sona 12 September 2018, 10:00

View original

4 replies

Badge
Any help is much appreciated! Thanks!
Userlevel 2
Badge +1
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.
Badge
@Sona that works perfectly! Thank you very much!
Badge
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!

Leave a Reply