1. Главная
  2. Блог
  3. Полезные статьи
  4. Компактные формы комментариев на сайт

Компактные формы комментариев на сайт

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

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

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

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

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

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

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

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

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

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

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

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

Теперь форма будет выводиться и работать, но не правильно. Чтобы комментарии привязывались к определённой странице, надо в коде вывода добавить, вот так:

<div class="fb-comments" data-href="" 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&quot;>script>

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

<script language="javascript" type="text/javascript" src="/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="" 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 получилось сделать компактные комментарии, которые не занимают много места и смогут быть полезны для большинства пользователей, которые зарегистрированы в этих двух социальных сетях или в какой-нибудь одной.

+7 495 175-40-25
Консультации по вопросам
info@cospi.ru
Электронная почта