Авторизация на блоге с помощью социальных сетей

Блог Владимира Шишкова

Как создать, раскрутить и зарабатывать на своем блоге

Работа с блогом

Авторизация на блоге с помощью социальных сетей

Авторизация на блоге с помощью социальных сетей
5 (100%) 57 голос[ов]

Авторизация на блоге с помощью социальных сетей

При работе с блогом, рано и поздно возникает вопрос о сборе e-mail адресов со своих читателей. При этом оставляя их, в виде подписчиков. Благодаря чему, всегда по e-mail можно будет связаться с ними, отправить полезную информацию или что-либо прорекламировать. Для этого и служит форма авторизации. При чем если авторизоваться можно будет с помощью кнопок социальных сетей, то это многократно увеличит объем подписчиков, благодаря своему удобству.

Авторизация через соцсети

Авторизация на блоге, является одним из ключевых способов сбора подписчиков, при этом, если авторизация проходит через кнопки социальных сетей, то сбор увеличивается в разы. Поэтому  это очень важная задача, которую нужно реализовать на блоге.

В данной статье, я хотел Вам рассказать, как устанавливать авторизацию с помощью плагина Super Socializer, который использовал ранее в предыдущей статье: “Комментирование на блоге через социальные сети“. 

Плагин uLogin

Но недавно столкнулся с замечательным плагином авторизации через соцсети uLogin. И что удивительно плагин uLogin очень прост в установке. При этом с ним не нужно долго возиться, заходить в различные соцсети, создавать свои аккаунты, заходить в режим разработчика и устанавливать свои приложения, где затем переносить свои ID и секретные ключи.

Внимание !

Читайте статьи:
 Автоматическое сжатие картинок в Jpeg и Png на блоге
 Вывод популярных статей плагином WP Popular Posts 
 Транслитерация ссылок статей плагином WP Translitera

 

Согласитесь это большая морока. Те, кто этим уже занимался меня поймут. А для тех, кто этого еще не делал это вообще станет ужасным процессом.

Плагин uLogin, после установки сам устанавливает кнопки по умолчанию и все. Теперь читатели блога могут смело авторизовываться через кнопки соцсетей, где появляется окошко для разрешения доступа и готово. Теперь читатель может смело писать свой комментарий, не вводя имя и адрес своей почты. Конечно, если у него есть аккаунт в данной соцсети.

При этом у плагина uLogin, в отличии от плагина Super Socializer очень много кнопок социальных сетей, которые можно установить. И он очень легкий в отличии от громоздкого Super Socializer.

Внимание ! Нужно всегда помнить, что большое количество плагинов, особенно громоздких, очень плохо сказывается на скорости работы блога. А значит и на количестве посещаемости Вашего блога читателями. Долго загружающийся блог, может оттолкнуть до 30% потенциальных читателей.

Теперь давайте перейдем, к его непосредственному рассмотрению. Дело в том, что плагин Ulogin имеет свой сайт сервиса и непосредственно сам плагин. На страницах сайта мы будем придавать ему внешний вид, а в настройках проводить небольшие изменения.

Теперь понимаете почему, данный плагин очень легкий. Да, правильно. Потому что, все громоздкие настройки из плагина перенесены непосредственно в сервисный сайт. Тем самым, плагин не перегружает работу блога.

Сначала переходим непосредственно на сам сайт плагина Ulogin и попадаем в конструктор.

Конструктор сервиса uLogin

Конструктор плагина Ulogin

Рис. 1

Здесь Вы можете выбрать “Любой сайт” и реализовать авторизацию путем вставки кода в нужный файл. Либо выбрать CMS на которой Ваш блог создан (Рис.1). 

Я в данном случае выбираю WordPress. Так как мой блог находиться именно на данной платформе.

Ссылка на страницу плагина Ulogin

Рис. 2

Ниже находиться ссылка на страницу плагина (Рис.2). Переходим по ней.

Инструкция по установке плагина

Инструкция по установке плагина

Рис. 3

Появляется страница-инструкция по установке плагина Ulogin. Благодаря данной инструкции Вы сможете быстро и правильно установить плагин.

Установленный плагин Ulogin

Рис. 4

Переходим в боковое меню консоли WordPress, “Плагины” > “Настройки” (Рис.4-п.2).

Настройка плагина

Настойка плагина Ulogin

Рис. 5

В настройках плагина нам нужны поля “Ulogin ID форма входа”, “Ulogin ID форма для комментариев” и “Ulogin ID форма для профиля пользователя” (Рис.5).

В данные поля мы будет вставлять наш Ulogin ID, который сформируем на сайте сервиса Ulogin. 

Настройка конфиденциальности

Согласие пользователя с политикой конфиденциальности

Рис. 6

Ниже на странице мы можем настроить страницу конфиденциальности (Рис.6), где нужно заменить в тексте “/policy” на ссылку своей страницы конфиденциальности (п.2).

Другие параметры

Другие параметры плагина Ulogin

Рис. 7

Далее вводим текст, который будет выводиться перед кнопками социальных сетей (Рис.7-п.1), ставим соответствующие галочки (п.2) и адрес страницы после авторизации, куда затем будет перенаправлен пользователь. По умолчанию стоит главная страница блога.

Продвинутые настройки

Продвинутые настройки плагина Ulogin

Рис. 8

Также можно поработать с продвинутыми настройками плагина (Рис.8):

  1. Принудительное использование SSL (устанавливается, если у домена есть сертификат – https:// ) (п.1)
  2. Игнорировать значение полей от соцсети (имена полей, которые принудительно будут запрашиваться у пользователя) (п.2)
  3. Настроить внешний вид окна для ввода данных (ссылка на внешний вид окна, запрашиваемых данных пользователя) (п.3)

После установки настроек, жмем кнопку “Применить” (п.4)

Личный кабинет сервиса uLogin

Вход в личный кабинет

Рис. 9

Затем возвращаемся на сайт сервиса Ulogin и входим в свой личный кабинет, через любую соцсеть, где у Вас есть аккаунт. 

Кстати приблизительно подобным образом будет функционировать и Ваша авторизация на блоге.

Добавить новый сайт

Рис. 10

Нажимаем на кнопку “Добавить новый сайт” (Рис.10).

Настройки

Настройки

Рис. 11

На открывшейся странице во вкладке “Настройки” (Рис.11-п.1), в поле “Название сайта” (п.2) вписываем название своего блога. Затем доменное имя (п.3) и нажимаем кнопку “Сохранить настройки” (п.4).

Виджеты

Виджеты

Рис. 12

Далее, переходим на вкладку “Виджеты” (Рис.12-п.1). Здесь мы уже видим готовый uLogin ID (п.2) и код для вставки на блог (п.3).

В принципе мы уже можем взять наш код uLogin ID и вставить в нужные поля нашего плагина (Рис.5). И уже кнопки социальных сетей установленные по умолчанию уже появятся в блоке для комментариев.

Для того же, чтобы настройки свои кнопки перейдем в пункт “Редактировать” (п.4).

Внешний вид виджета

Настройка внешнего вида виджета

Рис. 13

На открывшейся странице мы видим настройки внешнего вида нашего виджета. Они довольно просты. Сначала выбираем “Вид виджета” (Рис.13-п.1). Как они будут выглядеть на блоге можно увидеть в “Превью” (п.2). 

Выбираем “Стиль кнопок видежета” (п.2). Например мне больше понравился классический вид.

Далее, очень интересная функция, где можно выбрать какие кнопки будут видны на блоге, а какие срыты за шторкой, при нажатии на которой они появятся и их можно будет тоже выбрать и авторизироваться (п.3-п.4).

Делается это довольно просто. Из пункта “Сервисы, выводимые при наведении” (п.4) переносим левой кнопкой мыши в пункт “Сервисы выводимые сразу” (п.3). Соответственно, контролировать это можно через превью, где можно будет видеть изменение внешнего вида виджета (п.2)

После всех этих манипуляций в левом верхнем углу, находиться “Исходный код виджета”, который Вы также можете взять и вставить в то место блога, которое захотите.

Если же нет желания копаться в кодах, то достаточно будет одного uLogin ID (Рис.12), который мы уже вставили в нужные поля виджета. При этом, вставить его достаточно один раз, а потом вносить изменения в конструкторе сколько угодно. Согласитесь, очень удобно.

Для того, чтобы сохранить изменения достаточно нажать на крестик в правом верхнем углу (п.6) и виджет сохраниться автоматически.

Опубликованный виджет

Виджет в комментариях на блоге

Рис. 14

Как мы видим, наш виджет социальных сетей стоит в блоке комментариев (Рис.14-п.1). При нажатии на стрелку (п.2), появляется шторка с другими кнопками социальных сетей.

Посмотрите как много кнопок соцсетей, на любой вкус (п.3). Чего не скажешь о плагине Super Socializer.

Внимание ! Если Ваш блог адаптирован под мобильные устройства, то обязательно посмотрите как они будут выглядеть на мобильном телефоне. И при необходимости внесите нужные изменения.

Теперь давайте авторизуемся на блоге с помощью одной из кнопок соцсетей и проверим их работу.

Авторизация через Mail.ru

Авторизация на блоге через Mail.ru

Рис. 15

Выбираем кнопку Mail.ru из шторки, нажимаем на нее и у нас появляется окно на разрешения доступа к соцсети “Мой мир”. После нажатия на кнопку “Я согласен, разрешить”, читатель авторизуется на блоге. Тем самым вы получаете его данные: имя и e-mail.

Замечательно. И главное как просто. И при этом не нужно создавать свои приложения для каждой социальной сети. Это за нас сделал сервис uLogin. 

Конечно, если Вы хотите, чтобы авторизация в соцсетях проходила под Вашим личным брендом, то пожалуйста. Заходите в режим разработчика, каждой отдельной соцсети и создавайте свои приложения. uLogin предоставляет и такую возможность.

Комментирование

Пройденная авторизация

Рис. 16

На (Рис.16), что авторизация через Mail.ru прошла успешно. Давайте проверим. Пишем свой комментарий (п.1). Также можем поставить галочку “Следить за комментариями к статье” (п.2), очень полезная функция, которая дает возможность следить за ответами на свой комментарий, которые будут приходить по электронной почте и читатель ничего не пропустит и получит ответ на свой вопрос.

Жмем на кнопку “Отправить комментарий” (п.3).

Отправленный комментарий

Рис. 17

Как мы видим, на (Рис.17), комментарий прекрасно опубликовался через социальную сеть “Мой мир”. Это я легко определяю тем, что фотографии в профиле WordPress и  Mail.ru у меня стоят разные. В данном случае фотография в комментарии находится в аккаунте Mail.ru, значит все правильно. Я сделал комментарий через соц сеть “Мой мир”.

Таким же образом будут поступать и Ваши подписчики. Для них это будет очень удобно, если они захотят прокомментировать статью. А для Вас большая польза, так как Вы будете собирать их контакты для дальнейшего продвижения своего блога.

Если Вы хотите, чтобы кнопки авторизации через социальные сети находились не только в блоке комментариев, но и в панели регистрации пользователя. То для этого нам понадобиться другой плагин, который называется Login Widget.

Данный плагин очень простой. Давайте сначала установим плагин.

Плагин Login Widget

Установленный плагин Login Widget

Рис. 18

Как видите плагин Login Widget даже не требует настроек.

Меню "Виджеты"

Рис. 19

Теперь идем в боковую панель консоли WordPress, “Внешний вид” > “Виджеты” (Рис.19).

Настройка виджета

Публикация виджета

Рис. 20

Теперь нам нужно опубликовать наш виджет. И опубликуем мы его в SideBar (Боковой панели нашего блога).

Делается это довольно просто. Берем левой кнопкой мыши наш Login Widget с левой стороны (п.1) переносим в правую (п.2) и все он опубликован.

Опубликованный виджет

Рис. 21

Вписываем заголовок “Вход в личный кабинет” (Рис.21-п.1) и жмем на кнопку сохранить (п.2).

Панель авторизации на блоге

Панель авторизации на блоге

Рис. 22

Прекрасно! Наша панель входа в личный кабинет готова. Где, мы видим (Рис.22):

  1. Заголовок (п.1)
  2. Поля для ввода имени и пароля (стандартная авторизация)
  3. Кнопки социальных сетей (авторизация через социальные сети)
  4. Login (кнопка авторизоваться)

Как видите наши кнопки авторизации через соцсети, самостоятельно подключились внизу данного плагина. Что и требовалось доказать.

Проверяем и входим через кнопку соцсетей.

Личный кабинет

Панель авторизация на блоге через соцсети

Рис. 23

Как видим, мы вошли в свой личный кабинет пользователя.

Профиль пользователя

Рис. 24

Теперь мы находимся в профиле пользователя, в который вошли через соцсеть Facebook.

И видим на (Рис.24):

  1. Аватар пользователя (п.1)
  2. Личный кабинет (п.2)
  3. Профиль (п.3)

Конечно для обычного пользователя кабинет будет довольно усеченным. Но возможности увеличиваются в зависимости от роли пользователя.

Роли пользователей

Роль пользователя

Рис. 25

Как раз на (Рис.25) мы видим роли пользователей, которые имеют разные возможности. Передавая данные роли своим подписчикам нужно быть крайне осторожным. Так как каждая роль имеет свои возможности доступа к блогу и соответствующим образом влиять на него.

Давайте разберем каждую роль в отдельности:

  1. SEO Editor (доступ к модулю для оптимизации)
  2. SEO Manager (доступ к модулю системных ссылок)
  3. Подписчик (могут смотреть контент и комментировать, также можно дать доступ к приватному контенту)
  4. Участник (имеет доступ к определенной части консоли, добавлению записи, но не может ее опубликовать)
  5. Автор (может добавлять записи, изменять и публиковать записи, но не может создавать страницы)
  6. Редактор (может создавать контент и публиковать, редактировать, удалять записи авторов, модерировать и отвечать на комментарии, управлять категориями и ссылками)
  7. Администратор (может совершать все функции, которые перечислены выше, а также управлять пользователями, устанавливать плагины, редактировать или удалять статьи и категории, управлять консолью, экспортировать и импортировать контент и т.д.)

Как мы видим, чем выше роль пользователя, тем больше его возможности. Поэтому передавая подобные роли подписчикам, нужно располагать к ним особым доверием.

База подписчиков через социальные сети

Рис. 26

И конечно же самый важный момент, который мы рассмотрим это данные подписчиков. Собственно ради чего, мы все это обсуждали в данной статье.

В боковом меню консоли WordPress, меню “Пользователи” > “Все пользователи”, находятся данные наших пользователей (Рис.26).

Как видите в первом случае (п.1) я авторизовался через Google, а во втором через Mail.ru

Таким образом дорогие читатели Вы можете организовать авторизацию на своем блоге и собирать в едино своих благодарных подписчиков. А подписчики – это наше ЗОЛОТО и для них мы пишем наши статьи и ведем блоги.

Буду рад Вашим вопросам и комментариям

Успехов Вам
С уважением Владимир Шишков

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Авторизация на блоге с помощью социальных сетей
5 (100%) 57 голос[ов]

Работа с блогом

Рекомендую статьи

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован.



Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: