Стена сообщества/юзера от Vk.com [Все движки]

Всем приветик. girl_yes

Написала новый туториал, который содержит в себе инструкцию по установке на отдельную страничку Htlm, новостей из группы/профиля вконтакте. В общем туториал маленький, но всё же содержит полезную информацию. Первый вариант это создание стены сообщества, на которой будут все новости и старые материалы группы вконтакте. Чем это полезно ? Ну например на стене можно будет разметить пачку аудио треков, и юзеры зайдя на отдельную страничку где находиться эта самая стена ,смогут послушать эти треки. Также с видео роликами, новостями, картинками и т.д. Второй вариант это размещение на такой же отдельной Htlm - странице, новостей определённого пользователя. К примеру вы Администратор форума, и несколько дней не можете зайти на свой форум, ну всякое бывает : "Глюки с интернетом", "трафик кушает сильно", и т.д. Но при этом продолжаете сидеть VK и чтобы юзеры лишний раз не "волновались", вы можете написать на своей стене объявление которое увидят все юзеры зайдя на страничку с новостями от вас. В общем целей использования данного улучшения много, нужно просто немного поработать и тогда всё получиться. Ниже приведена инструкция по установке на свой форум подобного виджета с новостями и прочими штуками:

Стена сообщества/юзера от Vk.com [Все движки] 3390665m

Стена сообщества/юзера от Vk.com [Все движки] 3253396

Этап первый - Создание виджета.

Для создания виджеты новостей от Вконтакте, идём сюда:

http://vk.com/developers.php?oid=-1&p=Groups

Далее начинаем настройку виджета:

№1 - Вбиваете ссылку на вашу группу вконтакте или профиль в соответствующее поле.

№2 - Настраиваете вид: Новости - Расширенный режим.

№3 - Настраиваете Высоту и Ширину блока, желательно использовать 900 ширины и 1000 высоты.

Стена сообщества/юзера от Vk.com [Все движки] 3402927m

После настройки получаем код для вставки на свой форум. На этом завершается первый этап, можно переходить ко второму этапу. Exclamation

Этап второй - Создание Htlm страницы.

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

Панель Администратора - Модули - HTML & JAVASCRIPT - Управление страницами HTML.

Создаём новую страницу с такими параметрами:

Название * : К примеру Стена сообщества.
Вы хотите использовать верх и низ вашего форума? : Нет.
Использовать эту страницу в качестве Главной? : Нет.

В содержимое страницы, вставляем этот код:

Код:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru" xml:lang="ru"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="/38-ltr.css" type="text/css"> </head> <body><div class="regulations"> <br/> Здесь должен быть ваш код виджета сообщества! <style> body { background: url(http://www.snapsnap.ru/i/ibackground.png); /*основной фон*/ background-attachment: fixed; /*Фиксация фона*/ } </style> </body> </html>

Вместо слов в коде "Здесь должен быть ваш код виджета сообщества!", вы должны поставить свой код виджета сообщества. Но ставить в обычном виде будет неправильно, поэтому перейдём сначала к третьему шагу, а затем вернёмся ко второму.

Внимание: Фоновое изображение вы можете изменить на своё, просто заменив ссылку на своё изображение в нижней части кода.

Этап третий - Настройка кода для вставки.

В этом шаге, я подробно объясню как правильно нужно оформить код, чтобы можно было настроить его положение и внешний стиль. Берём такой "контейнер:

Код:: <div style="position:fixed; left:550px; bottom: 20%;"> </div>

И встраиваем внутрь него, дополнительный "контейнер", который позволит вам позже настроить рамку и внутренний фон вокруг виджета:

Код:: <div class="phoenix"> </div>

Далее в готовый код вставляем код виджета сообщества. В моём готовом виде это будет выглядеть так:

<div style="position:fixed; left:550px; bottom: 20%;">
<div class="phoenix"><script type="text/javascript" src="//vk.com/js/api/openapi.js?88"></script>


<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 2, wide: 1, width: "800", height: "1000"}, -184108189);
</script></div>
</div>

Красным выделен код виджета сообщества, который вам нужно будет обязательно заменить на свой. biggrin

Теперь когда у вас есть готовый код, можно вернуться ко второму шагу и встроить код в середину страницы, тем самым вы добьётесь отображения виджета на странице. Но это ещё не всё, так как теперь предстоит красиво и во вкусом оформить виджет. Переходим в четвёртому этапу настройки данного туториала.

Этап четвёртый - Настройка через коды CCS.

Теперь вам нужно красиво украсить виджет, что собственно говоря дело простое. Благодаря второму контейнеру, мы может настроить рамку, фон, размер блока и т.д. чтобы красиво оформить виджет, топайте сюда:

Панель Администратора - Оформление - Картинки и цвета - Цвета - Каскадная таблице стилей CCS.
В CCS ставим ниже приведённые коды:

Код:: .phoenix { background-image: url(http://i70.servimg.com/u/f70/17/66/77/30/66180312.gif)!important; -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border-radius:7px; border: 6px double #FFFF00; padding: 4px ; margin: 4px 0px 4px 0px; width: auto; !important; height:auto; !important; }

Которые можно дополнить и другими настройками. Но так как вам понадобиться гибкая настройка этих самых кодов, я прилагаю инструкцию по их изменению:

background-image: url(https://i.servimg.com/u/f70/17/66/77/30/66180312.gif)!important; - Внутренний фон рамки, т.е подложка под виджет. Мою ссылку изображения можете заменить на своё изображение.
-moz-border-radius: 10px;
-khtml-border-radius: 10px; - Эти три строки отвечают за закругления углов рамки.
-webkit-border-radius: 10px;
border-radius:7px;
border: 6px double #FFFF00; - Этот параметр отвечает за толщину и цвет рамки.
padding: 4px ;
margin: 4px 0px 4px 0px;
width: auto; !important; - Отвечает за ширину блока. Если хотите, можете указать в цифрах, к примеру так 900px вместо auto.
height:auto; !important; - Отвечает за высоту блока. Если хотите, можете указать в цифрах, к примеру так 1000px вместо auto.

Стена сообщества/юзера от Vk.com [Все движки] 3253396

Дополнения.

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

№1 - Отгибающийся уголок на странице:

Ставим данный код над виджетом "сообщества":

Код:: <script type="text/javascript"> esel_small = 'http://i12.servimg.com/u/f12/17/66/77/30/snap_270.jpg'; esel_big = 'http://i12.servimg.com/u/f12/17/66/77/30/snap_270.jpg'; esel_url = 'Ссылка на нужную вам страницу'; esel_s = 'http://szenprogs.ru/flash/esel_s.swf'; esel_b = 'http://szenprogs.ru/flash/esel_b.swf'; </script> <script type="text/javascript" src="http://szenprogs.ru/scripts/esel.js"></script>

Изображения и ссылку замените на свои.

№2 - Проявление под курсором:

Для начала, оберните готовый и полный код для вставки с контейнерами, в такие дивы:

Код:: <div class="kontra"> </div>

В готовим виде должно выглядеть так:

<div class="kontra"><div style="position:fixed; left:1300px; bottom: 20%;"><div class="phoenix"><script type="text/javascript" src="//vk.com/js/api/openapi.js?88"></script>

<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 2, wide: 1, width: "500", height: "1000"}, -184108189);
</script></div>
</div></div>

Красным выделены дивы, для нужной функции. Т.е как вы видите код для вставки, лежит внутри этого контейнера. Idea

Теперь в Каскадную таблицу стилей ставим этот код:

Код:: /*прозрачность на кнопках*/ .kontra { opacity: 0.5; transition: opacity 0.15s ease-out 0.3s; -moz-transition: opacity 0.15s ease-out 0.3s; -webkit-transition: opacity 0.15s ease-out 0.3s; } .kontra:hover{ opacity: 1.0; filter:alpha(opacity=100); }

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

Советы.

№1 - Также хочу посоветовать использовать в качестве улучшения странички парочку улучшений: Иконки png, фоновый звук, дождь/снег/листья/ветер, и другие улучшения и скрипты, которые могут красиво украсить страницу.

№2 - Ссылку на подобную страницу лучше давать в видном месте, например в меню навигации или в боковой картинки на главной.

Желаю всем удачи в улучшении и продвижении ваших форумов. До встречи в новых туториалах. drinks

С уважением автор данного туториала Мишель Картер aka Сказочница Зазеркалья. Стена сообщества/юзера от Vk.com [Все движки] 3224725