Сравнение версий

Ключ

  • Эта строка добавлена.
  • Эта строка удалена.
  • Изменено форматирование.

Оглавление

...

Раздел для настройки виджетов социальных сетей. Можно настроить виджеты как для главной страницыНастройка виджетов соцсетей, как для страниц сайта, так и для карточки товара.аутентификации (войти или зарегистрироваться с помощью доступной соцсети).

Информация

Виджет — иконка социальной сети, кликнув по которой покупатель может авторизоваться у вас на сайте, поделиться информацией с друзьями или перейти на вашу страницу в соцсетях

Расположение в админке: Продвижение Социальные сети

Главная страница

Виджеты

Включить блок соц. сетей

Чтобы на главной странице были видны виджеты социальных сетей, необходимо включить их отображение.

Выбираем пункт «Блок соц. сетей» и кликаем по синей надписи рядом:

Image Removed

Кликаем по треугольничку справа, чтобы открыть выпадающий список выбора:

Image Removed

В выпадающем списке выбираем кликом мышки скрыть или показать блок:

Image Removed

Для сохранения выбора нажимаем кнопку с галочкой:

Image Removed

После сохранения, изменения сразу появятся на сайте:

Image Removed

Лайк ВКонтакте

Работа на сайте ВКонтакте

На сайте ВКонтакте заходим в раздел «Помощь»:

Image Removed

Внизу страницы нажимаем на ссылку «Разработчикам»:

Image Removed

Переходим в раздел «Авторизация и виджеты для сайтов»:

Image Removed

В разделе « Виджеты для сайтов» выбираем вариант «Мне нравится»:

Image Removed

Выбираем в поле «Сайт/Приложение» пункт «Подключить новый сайт» (поле может отсутствовать):

Image Removed

Заполняем поля «Название сайта» и «Адрес сайта»:

Image Removed

Поле «Основной домен сайта» заполнится автоматически, после указания адреса сайта:

Image Removed

Выбирать тематику сайта не обязательно:

Image Removed

Нажимаем кнопку «Сохранить»:

Image Removed

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

Image Removed

Мы для примера выбрали последний вариант кнопки, размер 20 и название без изменения:

Image Removed

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

Image Removed

Правой кнопкой мышки кликаем по выделенному синему полю и в появившемся меню нажимаем «Копировать» (или используем сочетание клавиш на клавиатуре «Ctrl+C»:

Image Removed

Готово. Код получен. Открываем админку сайта.

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

В админке сайта выбираем пункт «Лайк ВКонтакте» и кликаем по надписи с пунктиром:

Image Removed

В открывшееся окошко вставляем код из социальной сети (который мы получили по инструкции выше):

Image Removed

И сохраняем изменения, нажав кнопку с галочкой:

Image Removed

 

Лайк Фейсбук

Чтобы создать кнопку «Лайк Фейсбук» воспользуйтесь подробной инструкцией и формой создания кнопки на сайте фейсбук: https://developers.facebook.com/docs/plugins/like-button

После того, как код будет получен, необходимо:

Кликнуть по серой надписи «Не заполнено»:

Image Removed

В появившееся окошко вставляем полученный код:

Image Removed

Сохраняем изменения, нажав кнопку с галочкой:

Image Removed

Лайк Твиттер

Чтобы добавить кнопку «Лайк Твиттер», заходим на страницу https://about.twitter.com/resources/buttons. Здесь выбираем кнопки и заполняем открывшуюся форму.

После настройки в правой колонке появится код для сайта. Копируем его.

В админке кликаем по серой надписи «Не заполнено»:

Image Removed

В появившемся окошке вставляем код, который скопировали при создании кнопки:

Image Removed

Сохраняем изменения, нажав на кнопку с галочкой:

Image Removed

Лайк Одноклассники

На сайте Одноклассники заходим в раздел Помощь (в верхнем правом углу, рядом с вашей фамилией).

Внизу страницы нажимаем на ссылку «Разработчикам»:

Image Removed

Выбираем раздел «ОК на внешних ресурсах» — «Кнопка Класс»:

Image Removed

  1. В поле URL вашего ресурса вводим адрес сайта.
  2. Выбираем необходимый размер по высоте, вид, положение счетчика, и вариант текста.
  3. Текст и Счетчик можно скрыть, сняв галочки.
  4. При переключении вариантов, внизу страницы будет отображаться образец.

Image Removed

После настройки, копируем код кнопки:

Image Removed

 

В админке кликаем по серой надписи «Не заполнено»:

Image Removed

В появившемся окошке вставляем код, который скопировали при создании кнопки:

Image Removed

Сохраняем изменения, нажав на кнопку с галочкой:

Image Removed

Виджет вместо баннера в колонке

...

Где в дизайне сайта иконки соцсетей?

Информация

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

На примере дизайна Elastic 

Image Added

Как выбрать дизайн сайта рассказано в статье «Общие» (Конфигурация → Система → Общие)

Как редактировать дизайн рассказано в статье «Тема дизайна» (Конфигурация → Конструкция → Глобальный шаблон → Тема дизайна)

На всех страницах сайта в подвале (в самом низу)

Покупатель кликнет по иконке и в новом окне откроется ваша страница/группа в соцсети

Image Added

Во время регистрации и авторизации

Покупатель может кликнуть по соцсети «Войти с помощью» и не заполнять поля для авторизации и регистрации

Image Added   Image Added

На странице с товаром

Покупатель может сделать репост страницы с товаром (иконки находятся после кнопки «Добавить в корзину»)

Image Added

Для «Быстрого просмотра» это тоже работает

Image Added

Языковая версия: разные виджеты для выбранных языков

Для каждой языковой версии сайта можно настроить свои виджеты.

Настройка языковых версий в разделе «Мультиязычность» (Конфигурация → Языки → Мультиязычность)

Image Added

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

Image Added

Справа будет кнопка со списком доступных языковых версий

Image Added

Выбираем из списка нужную языковую версию кликом мышки и настраиваем по инструкциям ниже

Image Added

Настройка по типам приложения: если нужна кастомизация

Чтобы добавить соцсети в кастомизированный сайт, открываем «Социальные сети» в разделе продвижение

Image Added

В блоке «Настройки по типам приложений кликаем по надписи «Стандартный»

Image Added

Выбираем в списке «Кастомный»

Image Added

Нажимаем кнопку «Сохранить»

Image Added

Окошко для написания кода стало активным и теперь можно использовать свой код для виджетов соцсетей

Image Added

Настройка виджетов для всех страниц сайта

Чтобы настроить виджеты, открываем «Социальные сети» в разделе продвижение

Image Added

В каждой соцсети есть несколько вариантов взаимодействия:

  • Перейти
  • Нравится
  • Поделиться
  • Подписаться

 

Информация

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

На вкладке каждой доступной соцсети есть 4 блока для заполнения

Image Added

Все виджеты можно получить на сайтах соцсетей или по запросу в Google или Яндекс: «виджет ВК», «виджет одноклассники» и тп

Для удобства можно кликать по ссылкам из таблицы:

ИконкаСоцсетьСсылка на настройку виджетов
Image AddedОдноклассникиhttps://apiok.ru/ext/group (все виджеты в меню слева)
Image AddedВКонтактеhttps://vk.com/dev/

...

Чтобы настроить конкретную соцсеть, выбираем слева кликом мышки по названию

Image Added

Под надписью «Ссылка» вставляем ссылку на вашу группу или страницу

Image Added

Нажимаем «Сохранить»

Image Added

Далее, в каждое окошко виджета вставляем соответствующий код (все окошки подписаны)

Image Added

Когда код будет вставлен, нажимаем кнопку «Сохранить»

Image Added

Таким образом настраиваются все соцсети, которые вам необходимы

Система аутентификации: выбираем соцсети для пользователей

Чтобы сделать авторизацию и регистрацию с помощью виджетов, открываем «Социальные сети» в разделе продвижение

Image Added

Прокручиваем мышкой страницу в самый низ к блоку «Внешняя система аутентификации»

Image Added

Из списка справа кликом мышки выбираем нужные соцсети

Image Added

Нажимаем кнопку Добавить

Image Added

Выбранные соцсети перейдут в список слева

Image Added

Можно менять местами порядок соц сетей

Image Added

Рядом с соцсетью слева зажимаем иконку перемещения (крест со стрелками)

Image Added

Создаем нужный нам порядок

Image Added

Сохраняем все изменения

Image Added

  1. Меняем дефолтную ссылку на ссылку на свою группу.
  2. Выбираем вид отображения сообщества.
  3. Настраиваем ширину блока и цвета.

Внизу доступен предпросмотр для всех вносимых изменений.

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

Далее копируем сформированный код:

Виджет ВконтактеImage Removed

 

В админке кликаем по серой надписи «Не заполнено»:

Image Removed

В появившемся окошке вставляем код, который скопировали при создании кнопки:

Image Removed

Сохраняем изменения, нажав на кнопку с галочкой:

Image Removed

Ссылки

Группа ВКонтакте

Открываем вашу страницу (группу) на сайте и копируем ссылку в адресной строке:

Image Removed

В админке кликаем по серой надписи «Не заполнено»:

Image Removed

В появившемся окошке вставляем ссылку, которую скопировали из адресной строки:

Image Removed

Сохраняем изменения, нажав на кнопку с галочкой:

Image Removed

Фейсбук

Открываем вашу страницу (группу) на сайте и копируем ссылку в адресной строке:

Image Removed

В админке кликаем по серой надписи «Не заполнено»:

Image Removed

В появившемся окошке вставляем ссылку, которую скопировали из адресной строки:

 Image Removed

Сохраняем изменения, нажав на кнопку с галочкой:

Image Removed

Твиттер

Открываем вашу страницу на сайте и копируем ссылку в адресной строке:

Image Removed

В админке кликаем по серой надписи «Не заполнено»:

Image Removed

В появившемся окошке вставляем ссылку, которую скопировали из адресной строки:

 Image Removed

Сохраняем изменения, нажав на кнопку с галочкой:

Image Removed

Страница о товаре

Чтобы вставить кнопку «Поделиться» в карточку товара, заходим на сайт ВКонтакте.

  1. На сайте ВКонтакте заходим в раздел «Помощь».
  2. Внизу страницы нажимаем на ссылку «Разработчикам».
  3. Переходим в раздел «Авторизация и виджеты для сайтов».
  4. Выбираем вариант «Публикация ссылок».

Image Removed

 

  1. Выбераем Стиль кнопки.
  2. В поле «Текст» можно ввести любое слово или словосочетание.
  3. Поля «Ссылка» и «Вариант лого», можно не трогать.
  4. Копируем полученный код.

Image Removed

 

В админке кликаем по серой надписи «Не заполнено»:

Image Removed

В появившемся окошке вставляем код, который скопировали при создании кнопки:

Image Removed

Сохраняем изменения, нажав на кнопку с галочкой:

Image Removed

После сохранения, в карточке товара появится кнопка:

Image Removed