Путь к статье: Главная » WordPress

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

Для этого надо установить сами формы комментариев и оформить их вывод с помощью простого скрипта на jQuery.

1. Устанавливаем комментарии Контакта

Заходим на страницу Виджет для комментариев и заполняем все поля:

Устанавливаем комментарии Контакта

Выставляете желаемую ширину и нажимаете сохранить, после этого в окне появиться код для вставки на сайт. Часть кода, которая подключается к контакту и отображает ваш apiId, надо вставить в header.php, а другую часть вставить в то место, куда вы будете выводить вашу форму комментариев.

Будет выводиться вот такая форма:

Устанавливаем комментарии Контакта

2. Устанавливаем комментарии от Facebook

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

Устанавливаем комментарии от Facebook

Верхнюю часть кода, вставьте после открывающегося тега body в header.php, а нижнюю часть вставляем в то место, где будут выводиться комментарии.

Теперь форма будет выводиться и работать, но не правильно. Чтобы комментарии привязывались к определённой странице, надо в коде вывода добавить <?php the_permalink(); ?>, вот так:

<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-num-posts="5" data-width="500"></div>

Эта функция отдаёт url страницы в WP, для других движков надо искать подобные функции.

3. Оформляем формы комментариев во вкладки

Для начала, надо подключить jquery. Вставьте этот код в header.php:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

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

<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/tab.js"></script>

Затем single.php вставьте код:

<ul class="tabs">
 <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 оформление этого бокса:

ul.tabs {
    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 интересный пост про поведенческие факторы.


Поделитесь записью:


Комментарии
  1. Sidash

    вот это действительно ПОЛЕЗНЫЙ пост) видел подобный вывод комментов на сайте Террикон, хотел и у себя на одном из блогов сделать подобный вывод комментов)

  2. Cospi

    Там нету Контакта и это большой минус, поэтому я им и не пользуюсь. Потому что в России самая популярные соц. сеть не Твиттер и Фейсбук, а Вконтакте. А контактовские коментарии ещё один способ увеличить трафик с этой соц. сети. Тут ещё конечно от тематики сайта, зависит, какие коментарии ставить.

  3. Артем

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

  4. Бомж

    а где и как модерировать комменты вконтактовские? ну поставлю я этот блок на 1000 статей и как смотреть где что отписали?

  5. Бомж

    все — нашел. надо нажимать на ссылку «администрирование» и вылезят все комменты с этого сайта. пост удалите мой предыдущий

  6. Евгений

    Спасибо, хорошо и подробно сказано. Хотя я приверженец классических блоков комментариев. Но вот jQuery попробую подключить для других нужд. Жду поста о увеличении трафа с вк после установки данной формы комментирования. Интересен твой опыт в данном направлении. спс.

  7. Юлия

    Подскажите, пожалуйста, куда надо вставлять вторую часть кода? А то у меня виджеты комментариев накладываются один на один.

  8. Юлия

    «а другую часть вставить в то место, куда вы будете выводить вашу форму комментариев». Я вторую часть кода вставила в single.php., в блоге комментарии наложились один на один

  9. Cospi

    Это код комментариев VK, вставляете туда, куда хочете выводить их. Какая ваша цель, комментарии во вкладках как описано у меня в посте или просто вывод комментриев с контакта? Если первое, то просто сделайте один в один как в уроке. Всё подробно описано.

  10. Юлия

    Делаю точно все, как у вас описано. Первую часть кода вставлю в хедер, вторую в index.php перед . Но, почему то формы комментариев налазят одна на другую, то есть комментарии Вконтакте закрываются комментариями Вордпресс. Подскажите, что я делаю не так.

  11. Cospi

    Вы пункт 3 сделали — Оформляем формы комментариев во вкладки ? В этом у вас проблемы, смотрите не точности. Попробуйте сделать сначало в простом html файлике, чтобы разобраться, а потом уже переносити на сайт.

  12. Оксана Лебедь

    у меня комментарии в контакте не отображаются на обоих сайтах вордпресс _http://otlicno.ru и _http://pravilazdorovya.ru Делала все по инструкции, в чем может быть причина?

  13. Cospi

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

  14. Bestoloch

    Автор молодец, все хорошо разжевал. Только вот у самого стандартная форма комментариев осталась. Лично я тоже пробовал, но в итоге отказался от такой системы. Дело в том, как не крути, а не у всех есть аккаунты в соц сетях. Фэйсбук вообще мало у кого есть. Ну а вконтакте если проанализировать аудиторию, сидят в основном школьники. Если сайт подходит под тематику их интересов — пожалуйста. Пишите посты в стили Тро-ло-ло и будет вам много срача в комментах. Ну а так, хорошим решением считаю систему disqus, для серьезных людей 🙂

  15. Denis

    Народ подскажите. Если я оставлю комент на странице_1 он будет виден на странице_2 или нет?

  16. евгения

    Сразу видно, что человек пишет для себя. Не совсем понятно, в какое именно место и после чего, вставлять коды когда открываешь, например в single.php или в style.css, после каких тегов???

  17. Cospi

    В single.php вставляете там, куда хотите выводить комментарии, обычно это после вывода контента. В style.css вставляете в абсолютно любое место.

  18. Роман

    Сделал примерно так, только на 3 вкладки (стандартная форма коммента , фэйсбук, вконтакте). Почему-то перестала работать стандартная форма. При добавлении комментария пишет иероглифы: РћРЁР?БКА: введите защитный РєРѕРґ (для защиты РѕС‚ автоспама)

  19. Александр

    Чтобы на одной вкладке были комментарии вконтакте, а на другой обычные.если да то не поможете скрипом обычных?заранее спасибо:)

  20. Александр

    Добрый вечер) возможно ли сделать чтобы на одной вкладке были комментарии вконтакте, а на другой обычные.если да то не поможете скрипом обычных?заранее спасибо:)

  21. Валя

    Здравствуйте! Хотела попросить вас сделать мне три вкладки комментариев на сайте: фейсбук, вконтакте и стандартную. Как у вас написано, я не поняла, к сожалению. Все окна поставила, а как сделать вкладки, не понимаю… И окно фейсбука у меня почему-то с большим отступом получается от следующего окна, тоже надо поправить. Помогите, пожалуйста!

  22. Cospi

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

  23. Алексей

    А можно сразу несколько полей с комментариями, например от контакта, фейсбука и стандартный от ВП?

  24. Дмитрий

    Для Ucoz сменил на $ENTRY_URL$, публикуется, но на странице в facebook ссылка не рабочая, есть решение

  25. Виталий

    Вот смотрите что получилось… Переделывал 3 раза подряд, не получается…. посмотрите любой пост: igold.zz.mu

  26. Cospi

    Попробуйте сделать на простой страничке html на локале, а потом перенесите на сайт. Так вы сразу разберетёсь.

    PS: Проблема в том, что вы сначало вставили код вывода комментариев с ВК и ФБ, а потом только внизу добавили правильный блок с tab_container

    Простыми словами — много кода вставили!

  27. Крупенина Инесса

    Не скажется ли вставка плагина комментариев вконтакте на позиции сайта в поисковой выдаче?

  28. Сергей

    Комментарии в ФБ перестали работать. И у Вас на сайте тоже. Поправьте, пожалуйста.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *