Сегодня хочу рассказать про установку форм комментариев от Контакта и Facebook на сайт, чтобы они смотрелись компактно и не отображались одна под одной.
Для этого надо установить сами формы комментариев и оформить их вывод с помощью простого скрипта на jQuery. Сделать это желательно заранее на этапе разработки сайта.
1. Устанавливаем комментарии Контакта
Заходим на страницу Виджет для комментариев и заполняем все поля:
Выставляете желаемую ширину и нажимаете сохранить, после этого в окне появиться код для вставки на сайт. Часть кода, которая подключается к контакту и отображает ваш apiId, надо вставить в header.php, а другую часть вставить в то место, куда вы будете выводить вашу форму комментариев.
Будет выводиться вот такая форма:
2. Устанавливаем комментарии от Facebook
Тут не много сложнее, так как стандартная форма не привязывается к каждой странице, то есть оставленные комментарии будут отображаться на всех страницах сайта. Но об этом позже, сейчас надо получить код для вставки на сайт. Заходим в раздел для разработчиков Фейсбука, в Комментарии, заполняем поля и в итоге получим вот такой код:
Верхнюю часть кода, вставьте после открывающегося тега body в header.php, а нижнюю часть вставляем в то место, где будут выводиться комментарии.
Теперь форма будет выводиться и работать, но не правильно. Чтобы комментарии привязывались к определённой странице, надо в коде вывода добавить, вот так:
Эта функция отдаёт 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="" 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 получилось сделать компактные комментарии, которые не занимают много места и смогут быть полезны для большинства пользователей, которые зарегистрированы в этих двух социальных сетях или в какой-нибудь одной.