> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mylisting.club/llms.txt
> Use this file to discover all available pages before exploring further.

# Social Login

> Learn how MyListing Social Login works: enable Google or Facebook in Theme Tools, set Client ID or App ID, and manage Connected Accounts on My Account.

## **What Is Social Login?**

**Social Login** lets visitors sign in or register with a **Google** or **Facebook** account instead of typing a username and password.

On a directory site, this feature can mean fewer abandoned sign-ups when someone wants to submit a listing, claim a listing, or message a business.

MyListing’s built-in Social Login supports two networks: **Google** and **Facebook**. You can enable one, both, or neither. Both are off until you turn them on and add the credentials from each provider.

## **Where Do You Manage Social Login?**

Go to **WP Admin > Theme Tools > Social Login**.

Direct URL pattern: `https://yoursite.com/wp-admin/admin.php?page=theme-social-login-settings`

On that page you can:

* Turn **Sign-In with Google** on or off and paste your Google **Client ID**
* Turn **Sign-In with Facebook** on or off and paste your Facebook **App ID**
* Click **Save Changes**

A network only becomes active when **both** the toggle is on **and** the ID field is filled. Leaving the ID blank keeps that network off, even if the toggle looks enabled.

## **Where Visitors See Social Login**

When at least one network is active, buttons appear on the My Account authentication screen (the page with the **Sign In/Register** tabs) or they appear on custom Login and Register pages, if you're using the MyListing Pro

Under the form fields, visitors see the line **Or connect with**, followed by the enabled social network buttons.

What happens when they use a button:

1. Google or Facebook asks them to approve access.
2. MyListing receives their profile details (especially email).
3. If that social account is already linked, they are logged in.
4. If a WordPress user with the same email already exists, MyListing links the social account and logs them in.
5. Otherwise, MyListing creates a new user, links the social account, and logs them in.

New social registrations get a random password in the background. They can still set a password later under Account Details if they want to use email login.

If secondary user roles are enabled on your site, Social Login registration follows the same role rules as the normal Register form.

## **Where Logged-In Users Manage Connected Accounts**

Logged-in users go to **My Account > Account details**.

If Social Login is active, they see a **Connected Accounts** section. For each enabled network they can:

| **Action**     | **What it does**                               |
| :------------- | :--------------------------------------------- |
| **Connect**    | Link Google or Facebook to the current account |
| **Disconnect** | Remove the link for that network               |

If that Google or Facebook identity is already used by another member, Connect fails with a clear error, so two site members cannot share the same social account.

### **Profile Picture**

When avatars are enabled (theme default), Account Details can also show **Profile Picture** options for connected networks:

| **Option**                          | **What it does**                                                |
| :---------------------------------- | :-------------------------------------------------------------- |
| **Use my Google account picture**   | Shows the Google profile photo as the avatar (when available)   |
| **Use my Facebook account picture** | Shows the Facebook profile photo as the avatar (when available) |
| **Use a custom picture**            | Uses the uploaded/custom avatar instead                         |

Users who register through Social Login start with the network picture selected automatically. They can switch to a custom picture later.

## **Google Settings**

| **Setting**                    | **What it does**                                          |
| :----------------------------- | :-------------------------------------------------------- |
| **Enable Sign-In with Google** | Allows Sign-In with Google when a Client ID is also saved |
| **Client ID**                  | The OAuth Client ID from Google Cloud for your website    |

### **What You Need From Google**

You need a **Web application** OAuth Client ID from Google Cloud / Google Identity. MyListing only stores the **Client ID** (not a client secret) because sign-in runs in the browser with Google’s client library.

High-level checklist (details live in Google’s current docs):

1. Create or open a Google Cloud project.
2. Configure the OAuth consent screen for your site.
3. Create credentials: **OAuth client ID**, application type **Web application**.
4. Under **Authorized JavaScript origins**, add your site origin:`https://yoursite.com` (scheme + hostname only, no path).
5. Copy the **Client ID** into **Theme Tools > Social Login**.

Useful references:

* [**Google Identity: get a client ID**](https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid)
* Theme admin help link: [**Google Identity Platform**](https://developers.google.com/identity/sign-in/web/sign-in)

If Google’s consent screen is still in testing mode, only test users you add can complete sign-in until you publish the app for production use.

## **Facebook Settings**

| **Setting**                      | **What it does**                                          |
| :------------------------------- | :-------------------------------------------------------- |
| **Enable Sign-In with Facebook** | Allows Sign-In with Facebook when an App ID is also saved |
| **App ID**                       | The App ID from Meta / Facebook for Developers            |

### **What You Need From Facebook**

You need a Facebook App and its **App ID**. MyListing only stores the App ID in Theme Tools.

High-level checklist (details live in Meta’s current docs):

1. Register as a Meta developer if you have not already.
2. Create an app in the [**Facebook for Developers**](https://developers.facebook.com/) dashboard.
3. Add **Facebook Login** for the web and set your site domain / Valid OAuth redirect URIs according to Meta’s current requirements.
4. Copy the **App ID** into **Theme Tools > Social Login**.

Useful references:

* [**Register as a Meta Developer**](https://developers.facebook.com/docs/apps/register)
* Theme admin help link: [**Facebook for Developers: register an app**](https://developers.facebook.com/docs/apps/register)

Facebook must return an email address for the login to succeed. If the Facebook account has no email shared with the app, MyListing cannot create or match a user.

## **How the Pieces Fit Together**

A practical example:

1. You create a Google Web Client ID with `https://yoursitedirectory.com` as an authorized JavaScript origin.
2. In **Theme Tools > Social Login**, you enable Google, paste the Client ID, and save.
3. A visitor opens **My Account**, sees **Or connect with**, and chooses Google.
4. Google signs them in. MyListing creates a WordPress user (or logs into an existing email match) and stores the Google connection.
5. Later, on Account Details, they see **Connected Accounts**, can disconnect Google, or switch their avatar between Google and a custom picture.

Facebook follows the same pattern with an App ID instead of a Client ID.

## **Helpful Tips**

* **HTTPS matters.** Production sites should use HTTPS. Google’s authorized JavaScript origins generally require `https://` (localhost is a special case for local testing).
* **Match the exact domain.** Use the same host visitors use (`www` vs non-`www` are different). Add both origins in Google if you support both.
* **Start with one network.** Google is usually enough for most directories. Add Facebook only if your audience expects it.
* **Test in a private window.** Confirm a new account, an existing email login, Connect, and Disconnect before advertising Social Login.
* **Keep email login available.** Social Login is a shortcut, not a replacement. Account Details still lets users manage a normal password when they need one.
* **Treat provider setup as living docs.** When Google or Meta redesign their consoles, follow their official setup pages rather than screenshots from older tutorials.

## **Quick Reference**

| **I want to...**                      | **Go to...**                                                                                                              |
| :------------------------------------ | :------------------------------------------------------------------------------------------------------------------------ |
| Enable Google or Facebook login       | **WP Admin > Theme Tools > Social Login**                                                                                 |
| Get a Google Client ID                | [**Google Cloud / Identity client setup**](https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid) |
| Get a Facebook App ID                 | [**Facebook for Developers**](https://developers.facebook.com/)                                                           |
| See Social Login buttons as a visitor | Site front end: **My Account** (logged out)                                                                               |
| Connect or disconnect a network       | **My Account > Account details > Connected Accounts**                                                                     |
| Choose a social profile photo         | **My Account > Account details > Profile Picture**                                                                        |

## **Where to Go Next**

* [**WooCommerce 101**](vscode-file://vscode-app/woocommerce-101): My Account, registration, and store basics that Social Login depends on
* [**MyListing 101 Intro**](vscode-file://vscode-app/mylisting-101-intro): How theme tools and owner-facing pages fit together
* [**Theme Tools**](vscode-file://vscode-app/mylisting-theme-tools) (MyListing Pro): Extra Theme Tools enhancements if you use MyListing Pro

## **Common Questions**

* **Why are the Social Login buttons not visible?** WooCommerce may be inactive, both networks may be off, or a network may be enabled without a Client ID / App ID. Confirm **Theme Tools > Social Login**, then view **My Account** while logged out.
* **Why did Google login fail with an origin error?** The browser origin is missing from Google’s **Authorized JavaScript origins**, or it does not match exactly (scheme, `www`, or subdomain).
* **Why did Facebook login fail?** Confirm the App ID, app domain / Facebook Login settings, and that Facebook shared an email address with your app.
* **What if the visitor already has an account with that email?** MyListing links the social account to the existing user and logs them in. They do not get a second account for the same email.
* **Can someone connect a Google account that another member already uses?** No. Connect says that another site member is using the account.
* **Do I need a Client Secret or App Secret in Theme Tools?** No. MyListing’s Theme Tools fields are Google **Client ID** and Facebook **App ID** only.
* **Is Social Login required?** No. Many sites run successfully with email and password only. Use Social Login when reducing sign-up friction matters more than the ongoing maintenance of Google and Meta apps.