Ideell Egoist (petrucha) wrote,
Ideell Egoist
petrucha

Социальная интеграция. Часть 1. ВКонтакте

Друзья, здравствуйте!

Пора мне начать хотя бы изредка писать большие посты на профессиональные темы. Начну с подробного руководства по интеграции сайта с социальными сетями! А именно с социальной сетью "В Контакте".

Конечно, глупо переписывать готовые мануалы, особенно крайне вменяемые, да еще и на русском! Советую всем, кому будет мало моих описаний, обязательно зайти сюда.

А теперь, собственно к делу! Прежде, чем начинать какую-либо интеграцию с социальными сетями, Вам надо эти самые сети освоить. Для любого бизнеса или сайта потребуется создать группу ВКонтакте. Не хочу останавливаться на том, как и зачем это следует сделать. Однако, поясню, что пока у вас нет группы ВКонтакте, интегрировать ваш сайт будет просто не с чем. У меня есть сайт меня, как фотографа, и группа. Собственно организацией взаимной интеграцией группы и сайта, а также интеграцией социальных плагинов на сайт я и займусь сегодня.

Кстати, сайт я "написал" сам, 2 года назад на чистом и непорочном html. Что не стало помехой для встраивания в него всяческих интерактивных прелестей. Так что, не бойтесь. Абсолютно любой сайт можно интегрировать подобным образом!

WARNING Прежде, чем начинать вставлять виджеты на ваш сайт, надо провести простую операцию, которая сделает их работу возможной - подключить библиотеку функций Vkontakte JavaScript openAPI. Звучит страшно, а на деле все совсем просто. Через панель управления вашим сайтом потребуется между тегами <head> и </head> вставить следующую строчку:

<script src="http://vkontakte.ru/js/api/openapi.js" type="text/javascript"></script>

Теперь любые виджеты ВКонтакте будут работать на сайте, а интегрировать их будет совсем просто.

Виджет для сообществ

Пользователи, которые ищут товары и услуги в интернете в абсолютном большинстве случаев ищут через поисковые системы. Представьте, что однажды пользователь кликнул по вашему контекстному объявлению, медийному контекстному баннеру, пришел к вам через поисковую выдачу или как-либо еще. Конечно, если с сайтом все хорошо, а контент отвечает запросам пользователя, он как минимум изучит предложение и решит для себя "Звонить или не звонить?". Но зачастую, мы не нуждаемся в услуге здесь-и-сейчас. Кто-то перепишет контакты или даже просто телефон, кто-то занесет сайт в закладки (вот динозавр!), а кто-то посмотрит 3-5 сайтов, сделает выводы, что все одинаковы и до возникновения уже реальной потребности на ваш сайт не вернется. И может быть не вернется уже никогда, ведь в следующий раз он снова полезет в поиск, снова кликнет по контекстному объявлению и попадет уже, вероятно, не на ваш сайт. Возникает вопрос: Как помочь пользователю остановить свой выбор на вас? Как заставить его не искать больше, а прийти сразу к вам, когда настанет время? Один из вариантов ответа: Дайте пользователю максимум возможностей в один клик запомнить вас там, где он вас быстрее и легче всего найдет. А где он может это сделать? Конечно, в социальной сети.

Чтобы сообщить пользователю о том, что у вас есть группа и при этом не заставлять его совершать лишних кликов, предусмотрен Виджет для сообществ. Виджет можно настроить по двум параметрам - ширина и отображение списка пользователей. Для наглядности покажу скриншоты четырех вариантов - виджеты шириной 200 и 600 пикселей с и без отображения пользователей:

vk_community_3 vk_community_4

vk_community_1 vk_community_2

Для того, чтобы разместить виджет на сайте, достаточно добавить на сайт следующий код:

<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "200"}, 7396534);
</script>


где mode: 0 велит отображать учатсников группы, а mode: 1 - скрывать его, параметр width задает ширину в пикселах, а число далее - идентификатор группы. Для моей группы - это id7396534, соответственно, подставляем 7396534.

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

Виджет "Мне нравится"

Продолжим наблюдение за пользователем. Человек, пришедший к вам на сайт, остался доволен представленной ему информацией и/или условиями покупки. Да так сильно доволен, что захотел поделиться с друзьями. Для того, чтобы он мог сделать это быстро и просто существует виджет "Мне нравится", который полностью повторяет функционал кнопки Like в социальной сети Facebook. Как этот виджет добавить?

Сперва потребуется "зарегистрировать" ваш сайт в системе API ВКонтакте. Для этого необходимо на этой странице заполнить поля Название сайта и Адрес сайта (Основной домен заполнится автоматически). Нажимаем Сохранить.

В беспорядочном коде в окне ниже нас интересует только цифра:

<script type="text/javascript">
VK.init({apiId: 1976019, onlyWidgets: true});
</script>
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {width: "496"});
</script>
Запомните ее! После того, как наш сайт зарегистрирован в базе данных ВКонтакте, нам придется повторить нехитрую процедуру, с которой мы начали.

WARNING Через панель управления вашим сайтом потребуется между тегами <head> и </head> вставить еще один блок:

<script type="text/javascript">
VK.init({
apiId: 1976019,
onlyWidgets: true
});
</script>


Конечно, вместо моего ID 1976019 следует вставить ваш. Теперь наш сайт не просто дает информацию, но и интегрируется в профили других пользователей автоматически и в один клик!

После этого дополнения мы можем встраивать на наш сайт виджет "Мне нравится". для этого в том месте, в котором мы будем его размещать достаточно вставить следующий код:

<div id="vk_like"></div>
<script type="text/javascript">
window.onload = function () {
VK.Widgets.Like('vk_like', {width: 500, pageTitle: 'Статья номер 321', pageDescription: 'Описание статьи номер 321'}, 321);
}
</script>

В этом коде мы определяем, как ссылка на данную страницу отобразится у пользователя в ленте. С помощью параметров можно задать:

pageTitle: название страницы (для отображении в превью из статуса)
pageDescription: описание страницы (для отображении в превью из статуса)
pageUrl: адрес страницы (для отображении в превью из статуса). Указывается в том случае, если адрес статьи отличается от адреса, на котором отображается кнопка "Мне нравится".
В простом случае, когда мы позволяем ВКонтакте самому достать заголовок и описание из мета-тегов, достаточно короткого кода, который без изменений можно поставить на все страницы сайта, на которых кнопка "Мне нравится" будет востребована:

<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like('vk_like');
</script>


Выглядеть на сайте кнопка будет примерно так:

vk_like_1

Зачем это нужно? Например, у вас интернет-магазин. Ассортимент у вас большой и пользователю не интересно вступать в группу (это, кстати, повод задуматься "Почему?") и ему хочется отметить конкретный товар. С помощью кнопочек "Мне нравится" на страничках товаров с правильным заголовком и описанием пользователь не только сможет запомнить для себя, но и порекомендовать друзьям! Если пользователь поставит галочку, то в ленте "Мои новости" у всех друзей данного пользователя появится вот такое сообщение (на примере моего сайта), которое сразу же получит новую жизнь :-) :

vk_like_3

При наведении же на заголовок появится всплывающее окошко, в котором и будет то самое описание, которое можно кастомизировать явно для каждой социализируемой страницы:

vk_like_2

Пример реализации можно посмотреть на моем сайте на страницах Портфолио.

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

Виджет комментариев

Виджет комментариев - это, пожалуй, один из самых свежих и актуальных сейчас виджетов. В большей степени он ориентирован на контентовые ресурсы, на мой взгляд. Однако, он может быть полезен на сайте любого бизнеса. например в ленте новостей. В случае со своим сайтом я предоставлю пользователям возможность не просто отмечать и шарить, но и делиться своим мнением.

Код виджет комментариев очень похож на код виджета "Мне нравится". Чтобы добавить комментарии на страницу вашего сайта нужно вставить в нужное место следующие строки:

<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments('vk_comments');
</script>


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

<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 20, width: "496"});
</script>

Параметр limit задает количество комментариев в виджете (остальные по умолчанию сворачиваются), а параметр width - ширину в пикселах.

После добавления кода данного виджета на сайте появится следующий блок:

vk_comment_1

На правах администратора (которых, кстати, можно назначать!) вы можете в любом локальном виджете на своем сайте посмотреть все комментарии со всех страниц в одном месте. Достаточно нажать на Администрировать и виджет поменяется:

vk_comment_2

Ваш сайт уже умеет почти все, что угодно. А пользователи могут общаться с вашим брендом, делиться знанием о нем с друзьями и оставлять свои отзывы! Но можно еще больше. Социальная сеть ВКонтакте позволяет реализовать еще две механики: Виджет для опросов и Виджет для пожертвований. Про последний из них рассказывать не буду, так как для реализации его работы требуется, чтобы ваш сайт был зарегистрирован в базе данных социальной сети как Магазин. Делать это на своем сайте я пока не буду, хотя в будущем, наверно, такой функционал тоже добавится. А подробно расскажу про создание опросов на вашем сайте с помощью соответствующего виджета.

Виджет для опросов

На самом деле, работа с данным виджетом очень похожа на рассмотренные ранее. Отличие только в том, что опрос никаким образом не кодируется. Сам опрос (вопрос и варианты ответов) задаются в специальных полях в интерфейсе этой страницы, вы лишь выбираете нужный сайт из зарегистрированных вами, как администратором и создаете опрос. Далее следует нажать Получить код. В всплывшем окне нас интересует только загадочный набор цифр и букв, например, 83934_7189f468731fc23530.

Теперь можно вставлять опрос на сайт:

<div id="vk_poll"></div>
<script type="text/javascript">
VK.Widgets.Poll("vk_poll", {width: "200"}, "83934_7189f468731fc23530");
</script>


Мы можем поменять ширину блока с опросом и ID опроса. На сайте появится примерно такой виджет:

vk_poll_1

Поле голосования опросом можно поделиться с друзьями с помощью специальной формы:

vk_poll_2

А друзья в ленте новостей увидят ссылку на ваш сайт (на страницу, где размещен опрос), а также сам опрос и текущее распределение голосов:

vk_poll_3

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

<script type="text/javascript"><!--
document.write(VK.Share.button(false,{type: "round", text: "Сохранить"}));
--></script>


В нем параметр type задает тип кнопки. Какие бывают кнопки и какие параметры они кодируют можно посмотреть здесь.

Заключение

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

vk_share_1

Мы можем подсказать виджетам, какие у статьи название, описание и даже титульная картинка! Для этого существуют мета-теги:

<meta name="title" content="Заголовок статьи" />
<meta name="description" content="Описание статьи.

Это очень интересная статья." />
<link rel="image_src" href="http://mysite.com/mypic.jpg" />


Эти три тега должны быть расположены между тегами <head> и </head>. Тогда виджет поймет все правильно.

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

PS Друзья, Артур Вельф очень хорошо описал интеграцию сайта с Twitter в этой статье. Стоит ли остановиться на этом вопросе еще раз и дополнить этот материал? В следующей серии - вся правда про интеграцию Facebook.
Tags: smm, вконтакте, интеграция
  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

  • 21 comments