# How to Set Up Social Login (Google, Facebook, LinkedIn...) on the Civi Theme

{% hint style="info" %}
Starting from version 2.1.6.3, Civi has updated the way it integrates with the social login feature.
{% endhint %}

## 1. Install the Plugin

Go to **Admin Dashboard → Plugins → Add New**

* Search for: `Social Login, Social Sharing by miniOrange`
* Click **Install Now** → then **Activate**

<figure><img src="https://947744334-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjG66evEIMBXknuFytIuq%2Fuploads%2Fti3HD6zt8KILIWaMxVwy%2FScreenshot_1.png?alt=media&#x26;token=87533338-0bcc-4149-baca-9826e7ec707e" alt=""><figcaption></figcaption></figure>

## 2. Register a miniOrange Account

* After activation, the plugin will ask you to register or log in to a miniOrange account.
* Enter your email, password, and confirm registration.
* Once registered, you’ll be redirected to the configuration page.

<figure><img src="https://947744334-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjG66evEIMBXknuFytIuq%2Fuploads%2FPdS5Oi7kYCY3NCq6SbAd%2FScreenshot_4.png?alt=media&#x26;token=b4ae1a48-3f0e-4748-8bdc-67ef5eca5443" alt=""><figcaption><p>Mini Orange on your admin menu.</p></figcaption></figure>

3. **Configure Social Login Providers**

Click on "**Configure Apps**". You will see a list of supported providers: **Google, Facebook, LinkedIn, Twitter, etc.**  Switch to the right which social as you want. Example: Google.

<figure><img src="https://947744334-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjG66evEIMBXknuFytIuq%2Fuploads%2FhJ9rVcS9ByWlXp3aUgup%2FScreenshot_2.png?alt=media&#x26;token=0a49aff3-f49b-4892-bdb8-32412ca589d9" alt=""><figcaption><p>Select the social which you prefer.</p></figcaption></figure>

Enter your **App Id** and **App Secret,** corresponding to the selected social. On the right side you can see a short intruction to get the App Id and App secret key also.&#x20;

<figure><img src="https://947744334-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjG66evEIMBXknuFytIuq%2Fuploads%2Fdhvexes3QFFTCjci7glB%2FScreenshot_3.png?alt=media&#x26;token=e14c79b6-74c6-42ec-aaa7-008767411aab" alt=""><figcaption><p>Fill in your App Id and App Secret Key.</p></figcaption></figure>

{% embed url="<https://www.youtube.com/watch?ab_channel=miniOrange&v=q7nK1lp7yqc>" %}
How to Setup Google App in miniOrange Social Login plugin. created by MniniOrange.
{% endembed %}

4. **Display on the Frontend**

Copy the shortcode from **miniOrange** and paste it into Login field of Civi.

<figure><img src="https://947744334-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjG66evEIMBXknuFytIuq%2Fuploads%2FqtWwrj42OLh1oEutTzEo%2FScreenshot_5.png?alt=media&#x26;token=ec474959-2bf0-4de5-a921-0f4ff025823a" alt=""><figcaption><p>Copy the shortcode of miniOrange.</p></figcaption></figure>

Go to **Theme Options** ⇒ **Login/Register** ⇒ **Social Option**. Then paste the shortcode of MiniOrange into the input field. Then "**Save**" it.&#x20;

<figure><img src="https://947744334-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjG66evEIMBXknuFytIuq%2Fuploads%2FFHT3wLVVaAdu4H6YmTee%2FScreenshot_6.png?alt=media&#x26;token=e04d5394-f7b3-4ac5-b439-49758fbf4f9a" alt=""><figcaption><p>Paste the shortcode into Theme Options.</p></figcaption></figure>

Checkout the result.

<figure><img src="https://947744334-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjG66evEIMBXknuFytIuq%2Fuploads%2Fjn3y6quqp24BsqzK1Qxt%2FScreenshot_7.png?alt=media&#x26;token=67cbdc54-8d16-4523-ad1c-ce966b25e642" alt=""><figcaption><p>Social login in the Login pupup.</p></figcaption></figure>

{% hint style="info" %}
Please make sure that you have entered the correct **App ID** and **Secret Key** provided by the corresponding social platform (e.g., Google, Facebook, LinkedIn). Incorrect credentials may cause the login to fail.

Hint: Click this button to quick check your Configuration.

<img src="https://947744334-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjG66evEIMBXknuFytIuq%2Fuploads%2F7WzWulQj0oFzz52SDTQx%2FScreenshot_8.png?alt=media&#x26;token=6dacfa9a-01b3-4ca7-a65d-fb462b08e3a6" alt="" data-size="original">
{% endhint %}
