Включаємо авторизацію через соціальні мережі за допомогою безкоштовного WP-плагіну AddThis

Вам хотілося б, щоб ваші відвідувачі авторизувалися на вашому WordPress сайті за допомогою облікових записів Facebook або Twitter? Було б круто, чи не так? Сьогодні чудовий день для того, щоб зробити це. Я покажу, як створити індивідуальні програми для Twitter, Facebook и Google, щоб увімкнути авторизацію через ці канали. Повинен попередити, що процес займе трохи часу, але результат вартий того.

плагін AddThis Social Sign In

Для початку вам потрібно встановити та активувати плагін:

Ви можете скачати плагін з офіційного каталогу розширень WordPress по цим посиланням

Якщо ви не знаєте, що таке плагіни і як їх встановлювати, перегляньте цей урок.

Далі ми навчимося створювати веб-додатки для 3-х основних соціальних мереж. І, нарешті, вам потрібно буде скопіювати та вставити коди ID додатків на сторінці налаштувань плагіна AddThis, щоб змусити все працювати. Ви можете пропустити частину встановлення плагіна і почати з більш складних кроків. У будь-якому випадку, кінцевий результат буде тим самим. Давайте почнемо.

Як створити Twitter-додаток для авторизації?

Щоб створити Twitter-додаток, потрібно зробити таке:

• Увійдіть у вашу обліковий запис Twitter розробника
• Створіть нову програму та введіть такі дані:
  • ІМ'Я: Ім'я вашої програми може бути яким завгодно Для простоти ви можете ввести назву вашого сайту, наприклад MySite.com
  • Опис: Кілька слів. Якщо вам нічого не спадає на думку, можете використовувати це: "Авторизація через соц. мережі за допомогою AddThis"
  • веб-сайт: Адреса вашого сайту, наприклад http://www.mysite.com
  • URL -адреса зворотного дзвінка: https://www.addthis.com
• Як тільки ви закінчили з даними, поставте галочку в чекбоксі, заповніть капчу та натисніть "Create your Twitter Application"
• Ви створили ваше Twitter додаток!

Далі, клацніть на створеному Twitter-додатку, перейдіть на сторінку налаштувань. Прокрутіть вниз до 'Тип програми' і виберіть останній блок, "Allow this application to be used to Sign in with TwitterПотім збережіть зроблені вами зміни.

Далі скопіюйте "Ключ споживача"І"Таємниця споживача" і вставте їх у поле для Twitter на сторінці налаштувань плагіна AddThis. Збережіть зміни. Готово, ви додали підтримку Twitter на ваш сайт!

Як створити Facebook-додаток для авторизації?

Створення Facebook-програми - досить простий процес. Ось що треба зробити.

Установки для нової програми Facebook:

• Увійдіть у вашу обліковий запис Facebook розробника і клацніть по 'Створити новий додаток"
• Введіть дані, як показано на зображенні вище.
• Переконайтеся, що 'App Namespace' ви використовували малі літери, і виберіть правильну категорію.
• Клацніть на 'продовжувати', введіть капчу на наступному кроці і готово, ваш додаток створено!
• Коли ваша програма буде створена, ви автоматично буде перенаправлено на сторінку його налаштувань, де вам потрібно змінити наступне:

Установки Facebook програми:

1. У блоці 'Основна інформація' знайдіть 'Режим пісочниці' і виберіть опцію 'інвалід'. Це для того, щоб ваша програма була видна і доступна всім користувачам.
2. Знайдіть чекліст "Веб-сайт із логіном у Facebookі розгорніть його.
3. Ви повинні побачити поле 'адреса веб-сайту', введіть туди https://www.addthis.com/secure/ssi_callback
4. Клацніть по 'зберегти зміни"

Ці дії включають авторизацію через Facebook за допомогою створеної нами програми. Тепер вам потрібно скопіювати значення 'Ідентифікатор додатка' (не символьне значення 'Секрет програми') і вставити його на сторінці плагіна в полі 'Ідентифікатор програми Facebook.

Як створити Google-програму для авторизації?

Деяким подобається приховувати свої профілі у соціальних мережах від усіх, тому вам на сайті не завадить опція авторизації через Google. Наступні кроки покажуть вам, як створити програму Google для авторизації на вашому сайті через Google.

• Увійдіть у вашу обліковий запис Google розробника та клацніть по пункту Створити проект. Якщо у вас вже є проект, я все одно рекомендую створити новий, то буде зручніше.
• Тепер натисніть пункт 'Доступ до API' лівого меню.
• Далі постарайтеся заповнити дані в полях відповідно до картинок нижче:

Використання AddThis Social Sign-In

Як тільки ви створили всі програми та вставили відповідні ID, оновіть зміни на сторінці налаштувань плагіна AddThis Social Sign-In. Тепер опції авторизації через Google, Twitter та Facebook повинні відображатись на вашій сторінці авторизації WordPress. Для нашого керівництва я включив Google та Twitter.

Якщо ви хочете додати кнопки авторизації в віджет або в якийсь блок на сайті, просто скопіюйте та вставте у відповідне місце вашого шаблону наступний код:

<?php addthis_ssi();?>

AddThis Social Sign-In всередині віджетів

Якщо ви хочете використовувати кнопки входу у віджеті, вам потрібна можливість виконувати код PHP усередині віджету. WordPress не дозволяє виконувати PHP код усередині віджетів зі зрозумілих причин безпеки. Але, на щастя, плагін PHP Code Widget може допомогти вам у цьому.

Просто скачайте та встановіть плагін, а потім перейдіть на Зовнішній вигляд → Віджети. Ви побачите там новий віджет під назвою 'PHP-код'. Перетягніть його в потрібну область, вставте всередину код, представлений вище.

Тепер на місці, куди додали віджет, ви повинні побачити кнопки авторизації.

Висновок

Один із мінусів використання кнопок авторизації через соціальні мережі всередині теми – збільшення часу завантаження вашої сторінки. Крім того, процедура встановлення складніша, ніж для більшості інших плагінів.

З іншого боку, використання плагіна додає професійного вигляду вашому сайту. До того ж можливість авторизуватися на сайті за допомогою натискання всього на одну кнопку з лишком перекриває всі недоліки та труднощі при налаштуванні.

Джерело: WPLift.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/