Login using Facebook Button

When I go the www.wix.com and I click sign in, then I click the ‘continue with facebook’ button, I am taken to a page that says " Wix will receive: your public profile and email address"

However, when I create a members page on my website built with Wix, and setup the login bar on my website to have a Facebook button, when a user logs into facebook using the same procedure as above they see this:

“User Login will receive: your public profile and email address”

My questions is how do I edit my website so that it shows my business name instead of ‘User Login’, much in the same way that wix.com can! It looks un-pro to have ‘User Login’ and not the name of my business

See attached picture - I have circled in red what I would like to change but just cant find out how. Cheers

I am having this same issue. Any update on this?

Hi,
This forum specialises with wix code product, at the moment, it isn’t possible to change the social login’s lightbox with wix code , therefore, I suggest you to contact support@wix.com as they can help you best.

@ johnpreed

This can be achieved using wix code. You need to create a custom login/register page in order to have your website name displayed when a user authenticates using google or facebook. To summarize what you would need to do:

  1. Place a HMTL iFrame on your page an enter the relevant HTML code into it to allow user authentication.

  2. Register your website on Google or Facebook to receive a client ID and Secret.
    (once registered you can set the website address the user will see in the message during authentication)

  3. Add your client ID to the HTML iFrame code.

4 Add Javascript code to your page to receive the Google/Facebook user info from the HMTL iFrame.

5 Add Javascript code to your page to register the user on your website.

there is a useful link here to get you started https://www.wix.com/code/home/forum/community-discussion/solution-google-facebook-user-information-on-login

Mike, We must make this functioanlity for a client’s web,
Are you interested on making it?
If yes, please reply to enriquep36@hotmail,com

@Andres Pena

Register your site with facebook and obtain your appId for use in the iFrame then code something like this:

iFrame HTML code:

<meta charset="utf-8"> 

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

<title></title> 

<link rel="stylesheet" href=""> 
<script> 

		// 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_GB/sdk.js#xfbml=1&version=v3.2’;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));

	// initialize and setup facebook js sdk 

	window.fbAsyncInit = function() { 

	    FB.init({ 

	      appId      : 'XXXXXXXXXXXXXXXX', 

	      xfbml      : true, 

	      version    : 'v3.2' 

	    }); 





	    FB.getLoginStatus(function(response) { 

			//console.log(response); 

	    	if (response.status === 'connected') {					 

				console.log("connected with facebook for status"); 

	    				    		
	    	} else if (response.status === 'not_authorized') { 

	    		console.log("facebook connection not authorized for status"); 

	    	} else { 

	    		console.log("you are not logged into facebook for status"); 

	    	} 

	    }); 

	}; 

	
// login with facebook with extra permissions 


	function login() { 

		FB.login(function(response) { 

		//console.log(response); 

							
		if (response.status === 'connected') {		 

	    			    		
				//get user info and post to page code 


			FB.api('/me', 'GET', {fields: 'first_name,last_name,name,id,email'}, function(response) { 

				
				//console.log(response);				 


				let userId = response.id; 

				let fullName = response.name; 

				let firstName = response.first_name; 

				let lastName = response.last_name; 

				let userEmail = response.email; 


				


				window.parent.postMessage({userId: (userId),fullName: (fullName), firstName: (firstName), lastName: (lastName),userEmail: (userEmail)}, "*"); 


				//now we log the user back out of facebook on our site only as we have already posted the user info to the page code 
				
				FB.logout(function(response) { 
				// user is now logged out 
				}); 

			    });							 

	    		}  
				else if (response.status === 'not_authorized') { 

	    		console.log("facebook connection not authorized for login"); 

				
	    		}  
				else { 

	    		console.log("you are not logged into facebook for login"); 

						   } 

		}, {scope: 'email'}); 

	} 


	</script> 

Sign in with Facebook

Javascript code for front end:

import wixUsers from ‘wix-users’;

$w.onReady( function () {

$w(“#facebookAuthHTML”).onMessage((results) => {

let facebookAccoutInfo = results.data;

//console.log(facebookAccoutInfo);

//string values for each item

let fUserId = results.data.userId;
let firstName = results.data.firstName;
let lastName = results.data.lastName;
let fullName = results.data.fullName;
let unformattedUserEmail = results.data.userEmail

console.log(fUserId);
console.log(firstName);
console.log(lastName);
console.log(fullName);
console.log(unformattedUserEmail);

//proceed to register or log in user as appropriate

})
})

1 Like

can you help me implement this?

Hi,

I’m creating my own Corvid form for login/register.
I want to include the Facebook iFrame. (done).
What I don’t understand is:
" //proceed to register or log in user as appropriate"

Wixusers login function requires a password as an argument to perform the actual login. Once you finish running the code above, how do you actually login into your site?

Best Regards,

Hi Jose,
This thread is nearly two years old, so please create a new post with all the necessary information to get the help you need. Refer to the guidelines if you have any questions about what to include in your post. Thanks.