Произвольные кнопки социальных сетей

Создать собственный виджет с кнопками соцсетей достаточно легко. Ознакомьтесь с примером:

 

Кнопки соцсетей определяются при помощи атрибута x-login-button, а он включает в себя кодовое название сервиса авторизации. Атрибут x-login-button может содержаться в любом HTML объекте (div, ul, a, span и других). Кроме того, он может не являться прямым потомком элемента id=login4play.

Все прочие варианты на отличаются от тех, которые используются в стандартном виджете.

Пример инициализации виджета с редиректом:

А вот пример без редиректа:

Следует отметить, что в параметре redirect_url адрес должен быть реальном и включать в себя протокол и домен, которые пользователь использует при авторизации.

Таким образом, если сайт открывается и на домене //www.example.ru, и на // example.ru, то и код виджета, соответствуя домену, должен меняться динамически.

Точно такая же ситуация и с протоколом: в коде виджета необходимо указать именно тот, который используется пользователем в данный момент. Или же меняться динамически при использовании нескольких протоколов.

Кнопки соцсетей можно сделать неактивными. Для этого нужно к объектам с атрибутом x-login-button приписать класс disabled. В результате – наведение курсора на кнопку и клик по ней будут проигнорированы (при этом отсутствует стандартная полупрозрачность кнопки).

Поддерживаемые соцсети

Список сервисов и их кодовые названия:

  • ВКонтакте: vkontakte
  • Twitter: twitter
  • Mail.ru: mailru
  • Facebook: facebook
  • Одноклассники: odnoklassniki
  • Яндекс: yandex
  • Google: google
  • LinkedIn: linkedin