Авторизация через социальные сети в два клика!

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

Сегодня Вы узнаете, как сделать авторизацию на сайте через такие популярные сервисы как Вконтакте, Facebook и Tweeter. Добавлять авторизацию через эти соц. сети мы будем с помощью специальных сервисов: Loginza и его аналога uLogin. Показывать буду на примере сайта wordpress, посмотреть как это выглядит Вы можете на моем тестовом блоге.

Авторизация через социальные сети с помощью uLogin

Сервис доступен и понятен даже рядовому пользователю интернета. Поддерживает все известные системы управления контентом и многие социальные сети (в том числе одноклассники, mail и Google +). Для установки авторизации переходим на сервис, выбираем нужную платформу (в данном случае wordpress) и кликаем по “ссылка на страницу плагина”:

Нам предложат скачать плагин на компьютер, выбираем папку, куда хотим сохранить архив и скачиваем. Затем распаковываем архив в любую папку на диске и с помощью любого файлового менеджера (я, например, пользуюсь Total Commander’ом) загружаем папку на сайт в директорию wp-content/plugins.

Теперь остается активировать плагин в админке. Переходим в админку, раздел плагины, напротив “uLogin” жмем «активировать». Все! Теперь на нашем вордпресс сайте появилась возможность авторизации и комментирования через самые известные социальные сети:

Если в админке зайти в раздел “плагины”, то там можно увидеть подпункт uLogin, который отвечает за настройку формы:

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

Я здесь ничего не трогал, но как я понял все изменения нужно вносить на английском. В принципе можно поиграться с данными параметрами, однако плагин и без того прекрасно функционирует. Если Вы захотите прикрутить авторизацию к сайтам на других платформах, то в каждом архиве есть файлик Readme, в котором пошагово расписана установка плагина для конкретных CMS.

Как видим, сложного ничего нет, и вся установка займет у Вас всего пару минут.

p.s. Если форма не добавилась автоматически, то вставьте этот код в любой участок Вашего шаблона:

<?php echo ulogin_panel(); ?>

Установка авторизации через социальные сети с помощью сервиса Loginza

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

Переходим в раздел “мой виджет Loginza” и добавляем нужный сайт:

Для работы с сайтом необходимо подтвердить права на него. Кликаем по кнопке “Подтвердить права”, нас попросят вставить на главную страницу специальный тег:

После подтверждения прав мы можем спокойно настраивать окно по своему желанию:

На странице “Настройки” размещены Ваш персональный ID и Секретный ключ, они нужны для настройки виджета после установки его на сайт:

На странице “Оформление” можно настроить внешний вид окна с помощью файла style.css. Если Вы разбираетесь в данном файле, то можете поэкспериментировать, если не разбираетесь, то лучше оставьте все без изменений. На вкладке “Просмотр” можно увидеть результат своей работы:

Раздел “Статистика” показывает количество авторизованных пользователей с помощью данного виджета:

На вкладке “HTML код” размещен соответственно html код данной формы.

Теперь о том, как установить авторизацию на сайт wordpress. В самом низу сервиса расположен блок “плагины Loginza”:

Выбираем “Плагин WordPress” и скачиваем его к себе на компьютер. С помощью любого файлового менеджера закидываем плагин в директорию wp-content/plugins.  Активируем плагин, и в админке у нас появится раздел “Loginza”, заходим в него:

Здесь мы можем выбрать соц. сети, через которые может авторизоваться пользователь, язык и цветовую схему формы. Чтобы все работало, в соответствующие поля необходимо ввести ID и секретный ключ сайта (о них я писал выше). После всех настроек жмем “Сохранить” и вуаля, все работает:

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

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

Ваш комментарий

  1. Я вообще не понимаю смысла на блогах делать регистрацию, даже со входом через социалки.

  2. Спасибо подробно и понятно

  3. Хорошая штука. Отвечаю Никите — пользователи зарегистрированные больше привязаны к сайту и скорей всего станут вернушимися еще не раз.

  4. Мне оба плагина не понравились. А почему у Вас на блоге не стоит такая авторизация?

    • Кирилл Тараненко:

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

  5. Последний комментарий мне объяснил больше, чем сама статья. Я тоже считал, что регистрация отталкивает часть посетителей, сам не люблю. Но для некоторых разделов сайта это может быть полезно. Мне часто приходят обновления с сайтов, где я регистрировался и забыл об этом. Бывают полезные материалы.

  6. На блог думаю то же можно поставить, только на те материалы, которые будут доступны после авторизации. Например, какие-то обучающие видеоуроки.

  7. Столкнулся с реальной проблемой в этом плагине. Не работала авторизация.
    Решение тут нашел, почитайте: http://kodabra.com/avtorizaciya-na-sajte-wordpress-cherez-ulogin-ubiraem-standartnye-knopki-i-delaem-svoi-s-pereadresaciej-na-stranicu-stati/

  8. Как вы добавляете аватары в своих комментариях?