Зачем присоединять социальные сервисы к своему сайту? Для чего нужны комментарии именно от социальных сетей?

Знаете ли вы о том, что каждый комментарий, оставленный на вашем сайте через плагин Facebook или виджет ВКонтакте, автоматически транслируется на страницу прокомментировавшего, а также попадает в Новости у его друзей?

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

Дальше информация о материале может распространяться лавинообразно, обеспечивая резонанс, а следовательно и продвижение вашего сайта.

Ведь все знают, сколько человек сейчас на Facebook и VKontakte. Напомню, в совокупности их больше 600000000 - шестисот миллионов.

Поэтому потратим немного времени и сделаем комментарии на своем сайте. От обоих монстров общения.

Работать с социальными сетями будем по порядку, а затем соединим результаты трудов в единое целое. Ну что приступим...

ДЕЛАЕМ КОММЕНТАРИИ ОТ FACEBOOK.

Заходим на свой аккаунт по адресу

http://www.facebook.com/home.php

Переходим на вкладку разработчиков

http://developers.facebook.com/?ref=pfс

 

 

Нажимаем на кнопку "Добавить Facebook на мой сайт" и переходим на страницу http://developers.facebook.com/docs/guides/web

 

 

Тому, кто переведёт все изложенные на этой странице инструкции - видимо отдельная премия, но мы сразу проследуем по ссылке Social Plugins (подчёркнуто красным) на адрес http://developer.facebook.com/plugins

Здесь уже всё попроще и даже кое-что на русском языке:

 

 

Нас интересует вкладка Comments с пояснением:"The Comments plugin lets users comment on any piece of content on your site."

Нажимаем на ссылку Comments и переходим по адресу http://developers.facebook.com/docs/reference/plugins/comments

 

 

Самый главный параметр здесь - это ID вашего сайта. Сайт, на котором вы хотели бы разместить комментарии, у вас есть, а ID пока отсутствует. Получим его, тем более, что получение ID сайта в социальных сетях при добавлении комментариев - один самых популярных вопросов. И самых безответных.

Нажимаем на кнопку "Get code" и получаем всплывающее окошко:

 

 

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

Нажимаем на ссылку "registering your site" и сталкиваемся с откровенным недоверием системы:

 

 

Здесь Facebook - в том случае, если вы не ассоциировали со своим аккаунтом мобильный номер ранее - предлагает сделать это немедленно. Сделав правильный вывод, что с номером кредитной карты связывать аккаунт крайне небезопасно, нажимаете на ссылку "мобильный телефон".

Получаете окошко вида:

 

 

Вводите в соответствующее поле свой номер без восьмёрки, то есть в 10-значном формате и нажимаете кнопку "Подтвердить".

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

В течение примерно 1-2 секунд получаете SMS от абонента с номером типа +18133...... сообщение вида:

"Kod podtverzdenia v Facebook Mobile:eRt5fw Ili posetite http://fb.me/87FIUYH66kjhv14hgt"

 

 

Введите в соответствующей графе полученный 6-значный код. Для примера выше - это eRt5fw

Тут с первого раза пока ещё ни у кого не получалось, так что получите окошко вида:

 

о том, что произошла ошибка.

На всякий случай пробуем ещё раз через некоторое время.

Почему это происходит? По моему мнению, это свидетельствует о недостаточных вычислительных мощностях уважаемого Facebook, обслуживающего, как известно более полумиллиарда аккаунтов по состоянию на начало 2011 года.

Как правило со второй попытки (сделайте её через полчаса, не ранее, а то процедура забанится) вы всё-таки добьётесь успеха, получив окно вида:

 

 

Теперь надо вернуться к одному из предыдущих диалогов, перейдя по ссылке http://developers.facebook.com/docs/reference/plugins/comments  и снова нажав на кнопку "Get code"

 

 

Нажимаем опять на ссылку "registering your site" и наконец переходим, куда нужно:

 

 

Введите в поле "Название сайта" название своего сайта, для которого мы готовим площадку комментирования. Я ввёл "город Минеральные Воды", так как мой сайт именно про это.

В поле URL сайта введите адрес своего сайта со слешем на конце, например: http://www.smga.ru/

Место действия оставьте как есть - т.е. "русский"

Нажмите кнопку "Create app" и получите окошко вида:

 

 

Проходим проверку безопасности и нажимаем кнопку "Отправить":

 

 

На этой странице для дела нам понадобится только ID - он подчёркнут красным. СОХРАНИТЕ ЭТОТ НОМЕР КУДА-НИБУДЬ НАДЁЖНО.

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

Снова идём по ссылке http://developers.facebook.com/docs/reference/plugins/comments

 

 

В поле "Unique ID" вставляем ID, полученный только что.

Поле "Number of Comments" задаёт количество комментариев, после которых для просмотра остальных нужно будет разворачивать страницу с помощью кнопки "Смотреть больше". В общем, оставьте 10 по умолчанию.

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

Чекбокс "Publish Feed" оставляйте.

Нажимаем на кнопку "Get code" и получаем всплывающее окошко с уже правильным готовым кодом:

 

 

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

<div id="fb-root"></div>

<script src="http://connect.facebook.net/en_US/all.js#appId=168861349823347&amp;amp;xfbml=1"></script><fb:comments xid="168861349823347" numposts="10" width="425" publish_feed="true"></fb:comments>

Сделайте две вещи:

1. Проверьте ID, он должен точно соответствовать ранее полученному. Заметьте, ID в коде присутствует в двух местах.

2. Если кодировка в коде en_US несмотря на ранее указанную вами зону языка, замените на ru_RU

Должно получиться вот так:

<div id="fb-root"></div>

<script src="http://connect.facebook.net/ru_RU/all.js#appId=168861349823347&amp;amp;xfbml=1"></script><fb:comments

xid="168861349823347" numposts="10" width="425" publish_feed="true"></fb:comments>

Также обратите внимание на окно с кодом, FB прямо указывает вам в последней строчке пояснений к коду на то, что "Скрипт выше использует ID вашего приложения: город Минеральные Воды"

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

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

И, наконец, по мере вашего роста в части освоения FB в недалёком будущем вам захочется вернуться к модернизации созданного приложения.

Это всегда можно будет сделать, зайдя из своего аккаунта по ссылке http://www.facebook.com/developers/apps.php?app_id=168861349823347  заменив id на свой.

И тут по идее возникает вопрос, а как быть с пользователями, которые принципиально не пользуются FB, являясь сторонниками VKontakte?

Можно ли сделать и для них свой блок комментариев, и даже совместить эти два блока на одной странице? Конечно, сделать это крайне необходимо, так как понятно, что пользователи из VK стопроцентно русскоязычны и терять их ни в коем случае нельзя.

Приступим к интеграции, для чего безо всяких усилий

СДЕЛАЕМ КОММЕНТАРИИ ОТ VKontakte.

ПОЕХАЛИ!

Заходим в свой аккаунт на VK.

Внизу страницы нажимаем на ссылку "разработчикам"

 

 

Переходим на страницу http://vkontakte.ru/developers.php  и получаем вот такое окно:

 

 

Здесь так же, как и ранее на facebook нужно зарегистрировать свой сайт. Нажимаем на кнопку "Подключить сайт"

 

 

На этой странице заполняем строку с названием, выставляем флажок так, как указано на рисунке, и нажимаем кнопку "Перейти к загрузке приложения"

Проходим проверку безопасности:

 

 

Нажимаем "Отправить".

На следующей странице соглашаемся с правилами:

 

 

И нажимаем кнопку внизу.

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

 

 

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

 

 

В этом окне ЗАПОМИНАЕМ ID (то есть записываем его куда-нибудь тщательно), заполняем поля с URL - в первом поле с http, во втором без и нажимаем кнопку "Сохранить".

Получаем сообщение о том, что информация о приложении отредактирована.

 

Возвращаемся на страницу для разработчиков по адресу http://vkontakte.ru/developers.php

 Нас интересует раздел "Сайты" и соответствующая кнопка "Подробнее".

 

 

На этой странице перейдём на вкладку "Виджет для комментариев":

 

 

 

Как мы видим, настройки чрезвычайно просты и интуитивно понятны.

Обратимся к коду. Он состоит из двух частей:

Часть 1.

<!-- Put this script tag to the <head> of your page -->

<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?20"></script>

<script type="text/javascript">

VK.init({apiId: 2123691, onlyWidgets: true});

</script>

Обратите внимание, что в коде присутствует id, который в точности такой же, какой вы получили чуть ранее.

Вставьте этот код перед закрывающим тегом </head> на ту страницу, где у вас будут комментарии.

Более того, вы можете вставить его на ВСЕ страницы вашего сайта в указанном месте. Эта часть кода не изменится уже никогда, пока не изменится URL сайта.

Часть 2.

<!-- Put this div tag to the place, where the Comments block will be -->

<div id="vk_comments"></div>

<script type="text/javascript">

VK.Widgets.Comments("vk_comments", {limit: 10, width: "496", attach: "*"});

</script>

Этот код необходимо разместить именно в том месте, где у вас визуально должны быть комментарии.

Пропишите в присоединённом к странице css описание для div vk_comments, задайте ему положение, размеры и отступы.

Всё, можно пользоваться комментариями.

Дополнительные опции к коду:

Для реализации возможности присоединять к комменту видео, фото и пр. используйте следующую модификацию кода:

<!-- Put this div tag to the place, where the Comments block will be -->

<div id="vk_comments"></div>

<script type="text/javascript">

VK.Widgets.Comments("vk_comments", {limit: 10, width: "496", attach: "graffiti,photo,video,audio,link"});

</script>

Чтобы убрать какую-либо опцию, например ссылки (кому они нужны!) уберите ",link" в соответствующем месте и т.п.

Что же осталось сделать?

Для читателей, уверенно чувствующих себя в CSS, осталось только сделать два находящихся друг

около друга слоя и разместить в них отдельно код для комментариев FB и отдельно - для VK.

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

<!-- Social block -->

<!-- END Social block -->

 

Наслаждайтесь и удачи в покорении Интернета!

Источник: http://www.smga.ru/