Оживляем вашу соцсеть: Полное руководство по добавлению виджетов в Sngine
Войти
Статья

Оживляем вашу соцсеть: Полное руководство по добавлению виджетов в Sngine

Оглавление

Привет, друг. Начнём разбирать в азах виджетологии? Ваш сайт — это уютная кофейня, где собираются люди. А виджеты — это крутые постеры на стенах, доска объявлений у входа и даже автомат с классным мерчем. Они делают пространство живым, полезным и своим.

В этой статье мы не просто добавим какие-то скучные блоки. Мы научимся ставить на ваш сайт настоящий портал во внешний мир — например, виджет группы ВКонтакте. Чтобы ваши пользователи могли следить за новостями сообщества, не выходя из вашей соцсети. Удобно? Ещё бы! Весело? Сейчас узнаем.

Настройка виджетов — это как игра в конструктор. Никакой магии, только вы, код и немного вдохновения.

1. Виджеты бывают разные: Встроенные и ручной работы

В Sngine всё продумано до нас. Разработчики уже положили в коробку два типа волшебных блоков:

  • Стандартные («Умные») виджеты — например, «Рекомендуемые друзья» или «Пользователи ПРО». Они появляются сами, когда в соцсети накопится достаточно данных. Система думает: «Ага, у этого парня мало друзей, покажу-ка я ему пару новых лиц!». Вам даже шевелить пальцем не надо.

  • Пользовательские виджеты — вот где начинается самое интересное! Это абсолютно свободный блок, в который можно вставить любой HTML и JavaScript код. Хотите добавить трансляцию с ютуба? Погоду на неделю? Игровое мини-приложение? Или наш любимый виджет ВК? Пожалуйста!

2. Магия HTML: Создаём свой первый виджет

Процесс проще, чем приготовить утренний бутерброд. Вы просто копируете готовый код с любого сервиса (например, с Rutube для вставки видео) и… вставляете его в поле для пользовательского виджета в админке Sngine.

Всё! Сервис даёт вам кусочек кода, Sngine его проглатывает и показывает на экране. Ничего переписывать не нужно. Раз — и готово.

Теперь перейдём к самому вкусному — добавляем виджет сообщества ВКонтакте. Приготовьтесь, будет немного кода, но мы пройдём этот путь вместе, как настоящая команда!

3. Виджет ВКонтакте: Селим любимое сообщество на ваш сайт

Допустим, у вас есть классная группа ВК (или вы хотите прикрутить чужую, популярную, чтобы поднять активность). Сейчас мы поселим её на ваш сайт.

Шаг 1: Готовим техническую базу (OpenAPI)

Прежде чем строить дом, нужно залить фундамент. Этот фундамент — библиотека OpenAPI от VK. Её нужно подключить один раз в «голове» вашего сайта (в файле /content/themes/default/templates/_js_files.tpl):

<script src="https://vk.ru/js/api/openapi.js?169" type="text/javascript"></script>

А после этого добавляем код для инициализации Open API на страницу сайта. Это как сказать ВКонтакте: «Привет, я свой, давай дружить виджетами».

<script type="text/javascript">
      VK.init({
        apiId: ВАШ_API_ID, // Пока оставим как есть, это не обязательно для виджета группы
        onlyWidgets: true
      });
</script>

Важно: apiId можно получить, создав приложение ВК. Но для виджета группы он не обязателен! Если лень — просто уберите строчку с apiId. onlyWidgets: true скажет системе, что вы хотите только виджеты, и она не будет ругаться.

Шаг 2: Выбираем комнату для виджета

В админке Sngine при создании пользовательского виджета вы попадёте в редактор кода Админпанель → Настройки → Виджеты. Вот туда мы и будем писать.

vidjets.png

Сначала создаём «пустое место» — контейнер для виджета. Это обычный <div> с уникальным id. Пусть будет vk_groups.

<div id="vk_groups"></div>

vidjets-2.png

Шаг 3: Колдуем над настройками

А теперь самый сладкий момент — вызываем виджет с помощью JavaScript. Вот базовая команда:

<script type="text/javascript">
    VK.Widgets.Group("vk_groups", {mode: 4, width: "400", height: "400"}, 1);
</script>

Разберём, что здесь происходит (это проще, чем заклинания из «Гарри Поттера»):

  • "vk_groups" — это тот самый id нашего контейнера.
  • {mode: 4, width: "400", height: "400"} — настройки. А именно: * mode: 4 — ПОКАЗЫВАЕМ СТЕНУ СООБЩЕСТВА! Самый сочный режим. * А есть и другие: * mode: 0 — показывает фотки участников (круто для паблика с красивыми людьми). * mode: 1 — только название (скучновато, но минималистично). * mode: 3 — список участников (если хотите похвастаться толпой). * wide: 1 — расширенный режим с большой кнопкой «Мне нравится» (включайте, не пожалеете!). * color1, color2, color3 — цвета фона, текста и кнопок в формате RRGGBB (например, "FFFFFF" для белого). Сделайте виджет в стиле вашего сайта!
  • Последняя цифра (у нас 1) — это ID сообщества. ВАЖНО! Указывается БЕЗ МИНУСА. Если у вас группа https://vk.com/durov, то ID обычно можно узнать в настройках сообщества, либо он часто совпадает с адресом. Для теста используйте ID 1 — это группа Дурова 😉

Шаг 4: Забираем готовый код и вставляем

Самый простой способ для ленивых (а мы все иногда ленимся, признайтесь):

Зайдите на страницу документации виджетов VK, там есть крутой конструктор. Выбираете внешний вид, ширину, цвет — и сайт сам генерирует для вас готовый код вставки!

Просто копируете его целиком и вставляете в поле пользовательского виджета в Sngine.

4. Примеры бесстрашных виджетов: Что ещё можно добавить?

Не ограничивайтесь одним ВК! Ваш Sngine может всё (почти всё). Вот несколько идей:

  • RuTube или VK видео — любой видос или плейлист. Нажимаете «Поделиться» → «Встроить» → копируете <iframe>.
  • Погода — встроенный информер от Яндекса или AccuWeather.
  • Своя реклама — просто картинка с ссылкой. Делается парой тегов <a href="..."><img src="..."></a>.

5. Заключение: Поздравляю, вы — волшебник!

Вот и всё! Теперь ваша соцсеть на Sngine стала ещё на один шаг ближе к совершенству. Виджеты — это мостик между вашим сайтом и огромным миром внешнего контента.

Не бойтесь экспериментировать. Вставляйте, удаляйте, меняйте настройки, пока не добьётесь идеала. И помните: если что-то пошло не так, вы всегда можете отредактировать или удалить виджет — он не кусается (в отличие от багов, но с ними мы боремся юмором и чашкой кофе).

Удачи в создании вашей уникальной соцсети! Пусть виджеты будут стабильными, а пользователи — активными. 🎉

Руководство Sngine
1
20
+ Читать
Закрыт