Размещение виджетов ВКонтакте (на примере кнопки «Мне нравится») #1377
1. Расширенные права доступа к системе управления. Их можно получить самостоятельно, следуя инструкции по ссылке.
2. Свой аккаунт в социальной сети (ВКонтакте сформирует рабочий код виджета, только если Вы авторизованы в соцсети)
3. Редактируемый блок (например, под главным меню) — это существенно облегчит размещение кода через систему управления.
Шаг 1. Генерация кода для виджета
С полным перечнем виджетов ВКонтакте соцсети можно ознакомиться по ссылке — https://vk.com/dev/sites.
Нас интересует раздел “Виджеты для сайтов”. Рассмотрим пример с виджетом “Мне нравится”.
1. Нажмите на ссылку в перечне виджетов.
2. Заполните форму.
3. Разместите код.
Обратите внимание!
- Если Вы не планируете размещать виджет самостоятельно, то можете прислать на адрес support@megagroup.ru полученный код. Убедитесь, что в Вашем код apiId соответствует числу (в данном примере это 3307568)
- Обязательно укажите подробно, в каком месте сайта должен находиться виджет (оптимально сделать скриншот страницы и отметить)
Шаг 2. Размещение кода внутри тега head
1. Откройте систему управления.
2. Перейдите к разделу «Настройки» — «Шаблоны».
3. В списке шаблонов выберите «_Главная. Верх».
4. Вставьте код, начинающийся комментарием of your page —>.
Код установите перед закрывающим тегом .
- (!) Обязательно обрамите код тегами
код виджета . - (!) Если на Вашем сайте установлен счётчик Google Analytics, удостоверьтесь, что код GA — последний блок кода перед закрывающим тегом Если Вы поставите код виджета ВКонтакте ниже кода счетчика Google Analytics — могут начаться проблемы со сбором статистики.
Этот код нужен для подключения ряда виджетов. Он подключается ОДИН РАЗ (даже когда, к примеру, для виджета опроса на том же сайте (!) Вас попросят снова вставить код в тег — игнорируйте).
5. Сохраните изменения.
Обратите внимание!
- Показанные в инструкции результаты могут отличаться от реальных по причине специфики шаблонов конкретного сайта или иных технических нюансов.
Обратите внимание!
- Для получения правильного кода виджета нужно заходить под своей учетной записью ВКонтакте
- apiId в форме должен быть цифровым, а не просто API_ID (в примере выше apiId: 3549021)
Шаг 3. Размещение кода в теле сайта
2. У многих наших клиентов есть готовые редактируемые блоки под главным меню (как правило, у новых сайтов) — можно просто разместить код через HTML-редактор страницы.
3. Нажмите на любую страницу и выберите “Редактировать содержимое”. В открывшемся окне необходимый Вам блок (это может быть редактируемый блок, информационный блок, информеры — в зависимости от того, где Вы хотите разместить виджет):
4. По аналогии с обычной страницей: зайдите в HTML-редактор.
5. Разместите код виджета:
6. Нажмите «Обновить» в окне HTML-редактора, а затем «Сохранить и закрыть» в окне редактирования содержимого информационного блока.
- Также поставить кнопку “Мне нравится” (как и другие виджеты) можно только для конкретных страниц. Размещение кода происходит по схеме, аналогичной пункту 3.2. Только необходимо работать не с общими данными, а с содержанием нужной страницы (обычный режим редактирования).
Справочный центр
Как добавить код от Facebook, Вконтакте, рекламных систем и т.д.?
Другие сайты могут давать вам код, который вы можете вставить себе на сайт для отображения комментариев от вконтакте, баннеров от Google Ads и так далее. Здесь мы рассказываем как это сделать.
1. Перейдите в раздел Страницы панели администрирования Redham.
2. Нажмите на название страницы, на которую хотите добавить HTML код, и выберите пункт Редактировать.
3. В области редактирования страницы щелкните мышкой в место, куда хотите вставить HTML код.
4. Нажмите на кнопку Вставить HTML (Insert HTML) в панели инструментов редактора.
5. Вставьте HTML код из буфера обмена в поле Вставить HTML, нажав Ctrl+V или выбрав соответствующий пункт в контекстном меню редактора.
6. Нажмите на кнопку OK.
7. Нажмите на кнопку Сохранить.
Похожие статьи:
- Как ввести для страницы Заголовок и Описание для поисковых систем (SEO)
- Как добавить комментирование статей и страниц от Вконтакте?
- Как создать форму и добавить ее на страницу?
- Как добавить видео?
- Как включить регистрацию на сайте?
- Как избежать неряшливого форматирования текстов на сайте?
- Как разместить на странице документ Word, Excel, PowerPoint и т.п.?
- Как настроить комментирование новостей, статей или заметок в блоге?
- Как создать выпадающее меню?
- Как вставить на страницу изображение?
- Как вставить ссылку?
- Как показать на любой странице товары из Интернет-магазина?
- Как изменить имя страницы?
- Как скрыть страницу из меню?
- Как поменять порядок кнопок в меню?
- Как добавить или удалить страницу?
- Обзор продукта
- Цены
- Новости
- Контакты
- Видео-уроки
- База знаний
- Веб-сайты для чайников
- Вход | Регистрация
- Партнерская программа
- Закажите индивидуальный сайт
- Поисковое продвижение сайтов
- Строительная биржа
Как вставлять код в своей группе в Вконтакте, чтобы TAB-ы не пропадали и была подсветка кода?
Я веду свою группу по программированию. И когда нужно вставить код, то он конечно же вставляется как есть. Без табов. И порой туда еще смайлики ехидные вставляются.
- Вопрос задан более трёх лет назад
- 2857 просмотров
Комментировать
Решения вопроса 1
А Вы где-то встречали в группах подобное? На мой взгляд такое возможно только при создании страниц с помощью вики-разметки, подробнее здесь: https://vk.com/wiki
Ответ написан более трёх лет назад
Святослав Хусамов @khusamov Автор вопроса
Там нет разметки для кода, чтобы сохранились табуляции хотя бы.
Святослав Хусамов @khusamov Автор вопроса
Хотя нет, ошибся. Нашел тег PRE
Святослав Хусамов @khusamov Автор вопроса
табуляцию правда он не любит. Заменяет на один пробел. Отступы в принципе видны, но не так хорошо выраженно, как если бы не один пробел а 3-4 .
Ответы на вопрос 4
vk и код несовместимы 😉
wiki-разметка и т.п.
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
вставляйте скриншоты, пусть не занимаются копипастом кода
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Creative frontend developer
Как вариант можно использовать инстакод. Из минусов — нельзя делать Ctrl+C-Ctrl+V, из плюсов — красиво выглядит (для группы в самый раз). Там можно генерировать картинки из кода, вроде таких
HTML код
HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.
А теперь обьясняю всё на русском )))
Заходите на свою страничку Вконтакте, вы видите что то типо такого.
После нажития сочетания клавишь Ctrl+U ( В Opera, в других браузерах другой способ увидеть исходный код страницы ) Вы увидите исходный код страницы то есть HTML код. Выглядит он так.
А теперь расмотрим по подробней. Допустим вы хотите изменить шапку сайта. Для этого
- Заходим на главную стрницу
- Нажимаем Ctrl+U
- Ищем HTML код шапки и изменяем, вот чт ополучиться ( рисунок ниже )
Затем нажимаем на кнопку с верху «Применить изменения»
И вот конечный результат