Сегодня хочу рассказать про установку форм комментариев от Контакта и Facebook на сайт, чтобы они смотрелись компактно и не отображались одна под одной.
Для этого надо установить сами формы комментариев и оформить их вывод с помощью простого скрипта на jQuery.
Содержание:
- Установка комментариев от Vkontakte
- Установка комментариев от Facebook
- Оформление форм комментариев во вкладки
- Примеры и итог
1. Устанавливаем комментарии Контакта
Заходим на страницу Виджет для комментариев и заполняем все поля:
Выставляете желаемую ширину и нажимаете сохранить, после этого в окне появиться код для вставки на сайт. Часть кода, которая подключается к контакту и отображает ваш apiId, надо вставить в header.php, а другую часть вставить в то место, куда вы будете выводить вашу форму комментариев.
Будет выводиться вот такая форма:
2. Устанавливаем комментарии от Facebook
Тут не много сложнее, так как стандартная форма не привязывается к каждой странице, то есть оставленные комментарии будут отображаться на всех страницах сайта. Но об этом позже, сейчас надо получить код для вставки на сайт. Заходим в раздел для разработчиков Фейсбука, в Комментарии, заполняем поля и в итоге получим вот такой код:
Верхнюю часть кода, вставьте после открывающегося тега body в header.php, а нижнюю часть вставляем в то место, где будут выводиться комментарии.
Теперь форма будет выводиться и работать, но не правильно. Чтобы комментарии привязывались к определённой странице, надо в коде вывода добавить <?php the_permalink(); ?>, вот так:
Эта функция отдаёт url страницы в WP, для других движков надо искать подобные функции.
3. Оформляем формы комментариев во вкладки
Для начала, надо подключить jquery. Вставьте этот код в header.php:
После этого надо подключить скрипт, который будет выводить табы, и выполнять плавное переключение между закладками. Скачайте его тут, разместите файл в корне вашей темы и подключите его в хедере, вот таким способом:
Затем single.php вставьте код:
<li><a href="#vk">Контакт</a></li>
<li><a href="#fb"> Facebook </a></li>
</ul>
<div class="tab_container">
<div id="vk" class="tab_content">
<div id="vk_comments"></div>
<script type="text/javascript">VK.Widgets.Comments("vk_comments", {limit: 10, width: "450", attach: "*"});</script>
</div>
<div id="fb" class="tab_content">
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-num-posts="5" data-width="450"></div>
</div>
</div>
Так же добавте в style.css оформление этого бокса:
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border: 1px solid #999;
width: 500px;}
ul.tabs li {
float: left;
width:249px;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #e0e0e0;}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding-left: 50px;
border: 1px solid #fff;
outline: none;}
ul.tabs li a:hover {
background: #ccc;}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #fff;
border-bottom: 1px solid #fff;}
.tab_container {
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 500px; height: 500px;
background: #fff;}
.tab_content {
padding: 20px; }
Всё, теперь формы комментариве должны у вас работать.
Пример
Посмотреть вживую можно на странице Демо. И комментарии там оставляются, можно что-нибудь написать 
.
С помощью jQuery получилось сделать компактные комментарии, которые не занимают много места и смогут быть полезны для большинства пользователей, которые зарегистрированы в этих двух социальных сетях или в какой-нибудь одной.
Почитайте на блоге anti-seo.ru интерестный пост про поведенческие факторы. И для совсем новичков, пост про gmail почту.
Не забудьте подписаться
через rss
и
следовать в twitter-e
— для получения обновлений.
Подписаться на обновление по почте:
0 
92 
5
Да он ж скок жрать ресурсов будет? Лучше уж Disqus!
А дискус не жрёт как-будто?
вот это действительно ПОЛЕЗНЫЙ пост) видел подобный вывод комментов на сайте Террикон, хотел и у себя на одном из блогов сделать подобный вывод комментов)
Вот будет повод изменить
Жрёт не жрёт, главное есть выбор!
Там нету Контакта и это большой минус, поэтому я им и не пользуюсь. Потому что в России самая популярные соц. сеть не Твиттер и Фейсбук, а Вконтакте. А контактовские коментарии ещё один способ увеличить трафик с этой соц. сети. Тут ещё конечно от тематики сайта, зависит, какие коментарии ставить.
Отдельное спасибо за описание оформления формы комментариев во вкладки. Давно искал как это сделать, но никто не мог помочь. Сегодня попробую сделать по вашему примеру.
Пожалуйста
а где и как модерировать комменты вконтактовские?
ну поставлю я этот блок на 1000 статей и как смотреть где что отписали?
В левом верхнем углу формы комментраиев будет ссылка на все сообщения.
все – нашел. надо нажимать на ссылку «администрирование» и вылезят все комменты с этого сайта.
пост удалите мой предыдущий
Спасибо, хорошо и подробно сказано.
Хотя я приверженец классических блоков комментариев. Но вот jQuery попробую подключить для других нужд.
Жду поста о увеличении трафа с вк после установки данной формы комментирования. Интересен твой опыт в данном направлении. спс.
В будущем будет, пока мало статистики чтобы наглядно показать это.
Подскажите, пожалуйста, куда надо вставлять вторую часть кода? А то у меня виджеты комментариев накладываются один на один.
Какую именно вторую часть? Опишите подробно.
«а другую часть вставить в то место, куда вы будете выводить вашу форму комментариев». Я вторую часть кода вставила в single.php., в блоге комментарии наложились один на один
Это код комментариев VK, вставляете туда, куда хочете выводить их. Какая ваша цель, комментарии во вкладках как описано у меня в посте или просто вывод комментриев с контакта? Если первое, то просто сделайте один в один как в уроке. Всё подробно описано.
Для движка Ucoz строку data-href=»" меняем на data-href=»$ENTRY_URL$»
Спасибо за дополнение.
Делаю точно все, как у вас описано. Первую часть кода вставлю в хедер, вторую в index.php перед . Но, почему то формы комментариев налазят одна на другую, то есть комментарии Вконтакте закрываются комментариями Вордпресс. Подскажите, что я делаю не так.
Вы пункт 3 сделали – Оформляем формы комментариев во вкладки ? В этом у вас проблемы, смотрите не точности. Попробуйте сделать сначало в простом html файлике, чтобы разобраться, а потом уже переносити на сайт.
Надо будет попробовать для эксперимента.
Помогите разобраться, все сделал по уроку и в стили дописал и в хедер и в сингл. Вообщем везде куда надо – все нужное вставил, а получается вот так http://housemeddoc.ru/gyazo/e96f2a2a4e7b0545b15357628a3c.png.
Скину готовый исходник на почту.
моя почта – housemeddoc@yandex.ru
Плииииииз
у меня комментарии в контакте не отображаются на обоих сайтах вордпресс _http://otlicno.ru и _http://pravilazdorovya.ru
Делала все по инструкции, в чем может быть причина?
Ответить сложно, потому что я не знаю что вы делали. Я вам исходник скину на почту. По нему должны разобраться.
Автор молодец, все хорошо разжевал. Только вот у самого стандартная форма комментариев осталась. Лично я тоже пробовал, но в итоге отказался от такой системы. Дело в том, как не крути, а не у всех есть аккаунты в соц сетях. Фэйсбук вообще мало у кого есть. Ну а вконтакте если проанализировать аудиторию, сидят в основном школьники. Если сайт подходит под тематику их интересов – пожалуйста. Пишите посты в стили Тро-ло-ло и будет вам много срача в комментах. Ну а так, хорошим решением считаю систему disqus, для серьезных людей
Народ подскажите. Если я оставлю комент на странице_1 он будет виден на странице_2 или нет?
Нет, не будет.
Спасибо за быстрый ответ, попробую поставить
Сразу видно, что человек пишет для себя. Не совсем понятно, в какое именно место и после чего, вставлять коды когда открываешь, например в single.php или в style.css, после каких тегов???
В single.php вставляете там, куда хотите выводить комментарии, обычно это после вывода контента. В style.css вставляете в абсолютно любое место.
Сделал примерно так, только на 3 вкладки (стандартная форма коммента , фэйсбук, вконтакте). Почему-то перестала работать стандартная форма. При добавлении комментария пишет иероглифы: РћРЁР�БКА: введите защитный РєРѕРґ (для защиты РѕС‚ автоспама)
Чтобы на одной вкладке были комментарии вконтакте,а на другой обычные.если да то не поможете скрипом обычных?заранее спасибо:)
Добрый вечер) возможно ли сделать чтобы на одной вкладке были комментарии вконтакте,а на другой обычные.если да то не поможете скрипом обычных?заранее спасибо:)
Валя, Александр Возможно, напишу пост по этому поводу, а то очень много людей спрашивает. Подпишитесь на RSS, чтобы получать обновления сайта и не пропустить.
спасибо вам большое))а когда примерно напишете не скажете?
Здравствуйте!
Хотела попросить вас сделать мне три вкладки комментариев на сайте: фейсбук, вконтакте и стандартную. Как у вас написано, я не поняла, к сожалению. Все окна поставила, а как сделать вкладки, не понимаю… И окно фейсбука у меня почему-то с большим отступом получается от следующего окна, тоже надо поправить. Помогите, пожалуйста!
А можно сразу несколько полей с комментариями, например от контакта, фейсбука и стандартный от ВП?
Написал пост о том как сделать на три вкладки и добавить комментарии WordPress + исходники, кому интерестно, читаем – http://cospi.ru/kompaktnye-formy-kommentariev-chast-2/
спасибо за новую статью иду читать)