Техническая поддержка 8 800 555 6342
Положение об оказании услуг технической поддержки

Размещение виджетов ВКонтакте (на примере кнопки "Мне нравится") #1377

Что необходимо для размещения социальных виджетов?

1. Расширенные права доступа к системе управления. Их можно получить самостоятельно, следуя инструкции по ссылке.

2. Свой аккаунт в социальной сети (ВКонтакте сформирует рабочий код виджета, только если Вы авторизованы в соцсети)

3. Редактируемый блок (например, под главным меню) - это существенно облегчит размещение кода через систему управления.

Шаг 1. Генерация кода для виджета

С полным перечнем виджетов ВКонтакте соцсети можно ознакомиться по ссылке - https://vk.com/dev/sites.

Нас интересует раздел “Виджеты для сайтов”. Рассмотрим пример с виджетом “Мне нравится”.

1. Нажмите на ссылку в перечне виджетов.

2. Заполните форму.

VKlike

3. Разместите код.

Обратите внимание!

  • Если Вы не планируете размещать виджет самостоятельно, то можете прислать на адрес support@megagroup.ru полученный код. Убедитесь, что в Вашем код apiId соответствует числу (в данном примере это 3307568)
  • Обязательно укажите подробно, в каком месте сайта должен находиться виджет (оптимально сделать скриншот страницы и отметить)

Шаг 2. Размещение кода внутри тега head

1. Откройте систему управления.
2. Перейдите к разделу "Настройки" - "Шаблоны".

phpAWxBZr

3. В списке шаблонов выберите "_Главная. Верх".

phpiqQSKF

 

4. Вставьте код, начинающийся комментарием <!-- Put this script tag to the <head> of your page -->.

Код установите  перед закрывающим тегом </head>.

  • (!) Обязательно обрамите код тегами {literal}код виджета{/literal}.
  • (!) Если на Вашем сайте установлен счётчик Google Analytics, удостоверьтесь, что код GA - последний блок кода перед закрывающим тегом </head> Если Вы поставите код виджета ВКонтакте ниже кода счетчика Google Analytics - могут начаться проблемы со сбором статистики.

VKlokehead

Этот код нужен для подключения ряда виджетов. Он подключается ОДИН РАЗ (даже когда, к примеру, для виджета опроса на том же сайте (!) Вас попросят снова вставить код в тег <head> - игнорируйте).

5. Сохраните изменения.

Обратите внимание!

  • Показанные в инструкции результаты могут отличаться от реальных по причине специфики шаблонов конкретного сайта или иных технических нюансов.

Обратите внимание!

  • Для получения правильного кода виджета нужно заходить под своей учетной записью ВКонтакте
  • apiId в форме должен быть цифровым, а не просто API_ID (в примере выше apiId: 3549021)

Шаг 3. Размещение кода в теле сайта

1. Код самого блока “Мне нравится” начинается с комментария <!-- Put this div tag to the place, where the Like block will be -->.

2. У многих наших клиентов есть готовые редактируемые блоки под главным меню (как правило, у новых сайтов) - можно просто разместить код через HTML-редактор страницы.

3. Нажмите на любую страницу и выберите “Редактировать содержимое”. В открывшемся окне необходимый Вам блок (это может быть редактируемый блок, информационный блок, информеры - в зависимости от того, где Вы хотите разместить виджет):

phpJ1EDKu

4. По аналогии с обычной страницей: зайдите в HTML-редактор.

  • Для TinyMce v3

phpi1IGef

  • Для CK Editor

php24ISJH

5. Разместите код виджета:

likebody

6. Нажмите "Обновить" в окне HTML-редактора, а затем "Сохранить и закрыть" в окне редактирования содержимого информационного блока.

Готово!

  • Также поставить кнопку “Мне нравится” (как и другие виджеты) можно только для конкретных страниц. Размещение кода происходит по схеме, аналогичной пункту 3.2. Только необходимо работать не с общими данными, а с содержанием нужной страницы (обычный режим редактирования).