Профессиональное обучение
блоггингу от А до Я

Как установить виджет Вконтакте на сайт или блог?

viget-vkontakte

Не каждый пользователь социальной сеть ВКонтакте знает, что это не только средство общения с друзьями, но и мощный инструмент для веб-мастеров. Даже имея мало-мальские знания в сайтостроении вы сможете интегрировать ваш веб-ресурс с ВКонтакте, получив не только полнофункциональные средства интерфейса, но и дополнительный трафик посещаемости.

Как же это сделать?

1. Заходим на сайт ВКонтакте.

2. Авторизовываемся.

3. Переходим на страницу «Мои Настройки».

 my-nastroiki

4. Прокручиваем страницу вниз и в подвале сайта находим меню с ссылкой «разработчикам». Переходим по данной ссылке.

 vid-vneshnii

5. Нам понадобится раздел «Авторизация и виджеты для сайтов».

 prilozheniya

6. Перейдём в этот раздел, где будет перечислен список виджетов для сайта.

vidzhet

Начнём по порядку.

Виджет «Комментарии» позволяет настроить блок комментариев к статьям вашего сайта.

Переходим на страницу этого виджета.

comment

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

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

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

chto-delat

В поле «Ширина» необходимо указать ширину блока «Комментари». Чтобы блок комментариев эстетично отображался на вашем сайте, целесообразно указать ширину, равную ширине области, отведённой под контент.

razmer

Например, если ширина области под контент равна 600 пикселей, то и ширину блока «Коммертарии» указываем аналогичную. Не беда, если вы не угадаете с шириной изначально, потом её можно будет исправить в коде вручную.

cod

После всех настроек нажимаем кнопку «Сохранить» и копируем «Код для вставки». Далее размещаем его в той области ваших веб-страниц, где должны быть комментарии.

Теперь вы можете получать комментарии к своим статьям, имея гарантию, что это будут реальные люди. Так же данный виджет имеет возможность модерации (удаления сообщений, добавление отдельных пользователей в чёрный список, назначение модераторов).

Виджет «Запись на стене» — для чего он нужен? Попробую объяснить на примере.

Допустим, вы на своём блоге размещаете новость об увольнении Павла Дурова из ВКонтакте, и хотели бы процитировать его мнение по этому поводу. Вам всего-навсего необходимо найти нужную запись в социальной сети. Скопировать её URL.

primer

Перейти на страницу виджета «Запись на стене».

zapis-stena

В поле «Ссылка на запись» вставить только что скопированный URL, указать ширину блока и код для вставки готов!

Спросите зачем такие сложности, если в HTML для этого есть специальный тег «Цитата»? Отвечаю: функция данного виджета — это достоверность информации. Ваши читатели будут уверены, что информация, так сказать. из первых уст и в ней нет «отсебятины».

 Виджет «Сообщества» — если вы для своего сайта завели одноимённую группу или публичную страницу Вконтакте, то можно на своём сайте для привлечения подписчиков на своём сайте установить данный виджет.

 soobthestva

 В поле «Ссылка на страницу» указываем URL вашего сообщества.

 zavershenie

 В пункте «Вид» выбираем, что будет отображаться в виджите.

 vibor

 - Участники: фотографии подписчиков и их количество.

 vid

 - Новости: последние опубликованные новости в сообществе.

 vidget-vkontakte

 - Только название: в виджете будет отображаться логотип вашего сообщества и его название.

 mini-vidget-vkontakte

В отличие от «Комментарии» виджет «Сообщества» позволяет настроить дизайн блока под цветовую гамму вашего сайта, а так же указать не только ширину, но и высоту элемента.

 dizain

Пример-шутка: внешний вид виджета от социальной сети ВКонтакте настроен под дизайн сайта «Одноклассники» :)

tsvet

После всех настроек, вы так же копируете «Код для вставки» и добавляете его в отведённую область на сайте.

С помощью виджета «Мне нравится» пользователи смогут те только ставить лайки вашим статьям, но и публиковать ссылку на них на своей стене, что тоже будет способствовать привлечению на ваш сайт дополнительного трафика.

Здесь также как и для комментариев указываем название сайта, его адрес, основной домен и тематику. Далее жмём кнопку «Сохранить».

parametri-vk

Теперь необходимо настроить внешний вид кнопки. Здесь на ваше усмотрение. Далее выбираем высоту кнопки — для всех вариантов кнопок предложенные значения одинаковые: 18, 20, 22 или 24 пикселя. Так же если вы выбрали вариант кнопки «Кнопка с миниатюрным счётчиком» или «Кнопка с текстовым счётчиком», то можно в пункте «Название кнопки» выбрать текст, который будет отображаться на кнопке. Вариантов всего два: «Мне нравится» или «Это интересно».

knopka

Всё! Копируем код и добавляем на страницы сайта.

Следующий виджет «Рекомендации» без установки предыдущего («Мне нравится») работать не будет, так как отображает наиболее популярные статьи вашего веб-ресурса по мнению читателей. С помощью этого виджета вы сможете упростить пользователю поиск наиболее интересных постов на вашем блоге.

С первыми пунктами настройки данного виджета думаю вам о так уже всё ясно, поэтому начну с «Количества записей». Здесь вы выбираете количество отображаемых популярных страниц. Их может быть 3, 5 или 10.

 chislo-zapisei

В выпадающем списке «Период выборки» выбираем наиболее оптимальный интервал времени. Думаю здесь нужно учитывать частоту публикации новых постов на вашем блоге и количество посетителей вашего блога. Чем выше первый и второй показатель, тем меньше должен быть период.

 period

В пункте «Формулировка» выбираем наиболее приемлемую фразу («Понравилось» или «Интересно») и вновь копируем «Код для вставки».

formulirovka

Виджет «Опросы». Это, пожалуй самый интересный виджет. С его помощью вы можете на своём сайте организовать опрос по любой тематике и с любым количеством вариантов ответов.

Например, вы сменили дизайн своего блога и хотите узнать мнение своих читателей. Идём в раздел виджета «Опросы». Заполняем форму (вы конечно для своего сайта описание добавляете):

propishem

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

Теперь формулируем опрос. В поле «Тема опроса» пишем волнующий вас вопрос. Далее заполняем «Варианты ответа». По умолчанию их два. Чтобы добавить большее количество вариантов необходимо нажать на ссылку «добавить», после чего появится ещё одно поле для ввода текста.

dobavit

Когда анкета опроса сформулирована, указываем ширину блока с опросом и нажимаем кнопку «Получить код».

podluchit-kod

Появится всплывающее окошко, из которого вы сможете скопировать Код для вставки.

kopirovat

После вставки кода на сайт, ваши читатели увидят вот такую форму опроса:

opros

Виджет «Авторизация» я пока пропущу, так как это отдельная большая тема.

Хотите чтобы ссылки на ваши статьи стали бессмертными? Тогда на помощь вам придёт виджет «Публикация ссылок», позволяющий пользователям ВК публикацию ссылок на статью прямо на стену. А как известно — вся информация опубликованная на стене обязательно транслируется в новостную ленту.

Настройки данного виджета элементарные: вы выбираете стиль кнопки (с прямыми или закруглёнными краями, просто иконка или кнопка с текстом, со счётчиком публикаций или без), можете изменить текст на ней (например, заменить слово по умолчанию «Сохранить» на «Рассказать друзьям») и вариант логотипа.

ssilki-publikatsiya

Последний в этом списке виджет «Подписаться на пользователя». Позволит вашим читателям одним кликом стать подписчиком вашего сообщества или лично вас. Вам необходимо указать ссылку на страницу сообщества и выбрать вид кнопки. А скопированный код вставить на свой сайт.

Думаю этот виджет можно ещё использовать в том случае, если, например, вам на блог пишут статьи другие люди (как у Александра Борисова), где в конце статьи вы указываете ссылку-имя автора на его сайт. А если сайта нет? Вот тогда можно воспользоваться этим виджетом и отправлять всех желающих познакомиться с автором на его страничку в соцсети.

ssilki-kod

На этом всё! Удачных вам экспериментов!

Автор статьи: Анна Вечеркина


Как заработать продавая баннеры

5 000 000 за 2 года в интернете...

150 000 рублей в месяц с БЛОГа
Этот блог читают уже более 6000 человек
- читай и ТЫ!
комментария 2
  1. Диана

    Спасибо за обзор! Для новичка самое то, полезно очень.) Соц.сетью Вконтакте чаще всего ведь интересуются.)

    Я пока что такой виджет не ставлю, либо поставлю, но с ссылкой на свой профиль, или просто кнопочку оставлю, скорее всего.)

    в 15:17 | Ответить
  2. Елена Усанова

    Большое спасибо за статью. У меня этого виджета пока на блоге нет. Но сегодня займусь и сделаю! Тем более что тут так все подробно и доходчиво написано. ))

    в 11:49 | Ответить
Оставить комментарий: (ПРОЧТИ ЭТО!!!)
:) :-D ;-) :-| [star] [good] [present] [flower] [:-))] [:))] [:--_)] [:-|]