Как оформить 3 вида комментариев на сайте?

оформление-комментариев

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

На самом деле, я увидел такое на одном из сайтов. Честно, не знаю как владелец организовал это, но я решил сделать следующим образом :)

оформление комментарий вконтакте фейсбук стандартные

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

Предварительно установите комментарии Вконтакте и Facebook.

Установка плагина Универсального jQuery-скрипт для блоков с вкладками

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

Мне понравился данный плагин по нескольким причинам:

  • он позволяет создавать неограниченное количество вкладок в пределах одного блока, при этом нет необходимости нумеровать вкладки с помощью CSS-классов
  • можно создать сколько угодно таких блоков с вкладками опять же без необходимости нумеровать эти блоки через CSS-классы;
  • содержимое jQuery-скрипта, реализующего вкладки, остается неизменным (всего 0,4 килобайта), т.е. не разрастается в зависимость от количества блоков или вкладок
  • запоминается активная вкладка после перезагрузки страницы
  • установка плагина происходит ручками :)

Скачиваем плагин и разархивируем. Нам необходим файл tabs.js Можете посмотреть пример через файл index.html . Если у Вам wordpress открываем для редактирования файл header.php и вставляем между тегами <header>..</header> следующий код:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/tabs.js"/>
</script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

В первой строчке мы подключили сам файл tabs.js (закачайте его предварительно в папку js вашей текущей темы), во второй строке подключен сам фреймворк Jquery взятый у google в пользование.

Теперь необходимо открыть single.php файл – одиночная запись. В выбранное Вами место перед выводом комментариев вставляем html код:

<div>
   <ul>
     <li>Комментарии</li>
     <li>Комментарии Вконтакте</li>
     <li>Комментарии Facebook</li>
  </ul>
<div>

</div>
<div>

</div>
</div>

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

<div>
<ul>
<li>Комментарии</li>
<li>Комментарии Вконтакте</li>
<li>Комментарии Facebook</li>
</ul>
<div>
<!— стандартные комментариев -->
<?php comments_template(); ?>
<!—конец стандартных комментариев -->
</div><div>
<!—код  комментариев Вконтакте -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "636", attach: "*"});
<!—конец комментариев Вконтакте --></script>
</div> <div>
<!—код  комментариев facebook -->
<div id="fb-root"></div><fb:comments href="<?php echo get_permalink($post->ID); ?>" num_posts="10" width="640"></fb:comments><!—конец комментариев facebook --></div>
</div>

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

Для наведения красоты,а также чтоб скрыть ненужные блоки вставим в css файл следующий стиль:

.box {
   display: none; /* по умолчанию прячем все блоки */
 }
 .box.visible {
   display: block; /* по умолчанию показываем нужный блок */
 }

Здесь уже включается Ваша фантазия на оформление, а лучше следуйте цветам Вашего дизайна. Вот мой код:

.section {/* весь блок */
background: #fff;
margin: 10px;
width:639px;
}

ul.tabs { /* список табов */
height: 28px;
line-height: 25px;
list-style: none;
border-bottom: 1px solid #DDD;
background: #FFF;
}

.tabs li {/* таб в списке*/
float: left;
display: inline;
margin: 0 1px -1px 0;
padding: 0 13px 1px;
color: #777;
cursor: pointer;
background: #F9F9F9;
border: 1px solid #E4E4E4;
border-bottom: 1px solid #F9F9F9;
position: relative;
font-size:14px;
}

.tabs li:hover { /* таб при наведении */
color: #008000;
padding: 0 13px;
background: #dae2e8;
border: 1px solid #008000;
}

.tabs li.current {/* текущий таб */
color: #444;
background: #dae2e8;
padding: 0 13px 2px;
border: 1px solid #D4D4D4;
border-bottom: 1px solid #dae2e8;
}

.box { /* по умолчанию прячем все блоки */
display: none;
border: 1px solid #D4D4D4;
border-width: 0 1px 1px;
background: #fff;
padding: 0px;
}

.box.visible {/* по умолчанию показываем нужный блок */
display: block;
}

Все закомментировано, экспериментируйте, пробуйте! Удачи!

Заходим на свой сайт и любуемся. И да, не забудьте поделится статьей со своими друзьями ;)

универсальный плагин Jquery (269)

с/у УтБ

Постовой: Ищите dofollow блоги ? Тогда эта подборка для Вас.



Комментарии к статье

  • #

    А почему у себя на сайте вы это не реализуете?

    • #

      В одной из первых версий было, и loginza была, пришел к теперь к такому виду, как сейчас. :)

  • #

    Спасибо)Поставлю отпишусь)

  • #

    У меня вот такой вопрос.По какой то причине перестали публиковаться комментарии на сайте.Как это исправить.Выдается текст -введите пароль.

    • #

      я конечно, не ясновидец, но Вы бы хотя бы оставили ссылочку, или напишите мне на почту

  • #

    Спасибо все отл. работает! Было бы неплохо выложить скрипт добавления просто комментов с сайта, без facebook и вконтакте

  • #

    Если бы автор научился нормально описывать код, а не ипать мозг фразами “это просто сами разберетесь” было бы круто. А так пришлось дополнительно искать у какого же дива какой класс, что совсем не айс.

    • #

      Данный пост не об обучении по css стилям. Но я добавил комментарии, по типу
      .tabs li.current {/* текущий таб */
      Что значит стиль для Текущиего таба/вкладки

  • #

    а зачем много вариантов комментирования?

    • #

      Чтобы было больше комментарий/обсуждений. К.О. ;-)

  • #

    пока еще слишком мало коментов, чтобы проводить такой эксперимент, но все равно плагин возьму, не сегодня так завтра понадобится

  • #

    Большое спасибо! Как раз искал подобный плагин. Обязательно протестирую.

    • #

      не за что. Пробуйте, экспериментируйте.
      @ Баргу Так и комментариев станет больше;)

  • #

    полезно уже поставил)

    • #

      А не напишите куда?

  • #

    Очень полезная статья! =) Правда у меня комментариев на блоге и так мало, не выгодно это всё устанавливать, может потом добавлю… ссылки на скрипт в конце что-то не видно, как обещали, только с вашего сайта копию взял)

    • #

      Иван, конечно не за что))
      Akkad, спасибо, исправил

  • #

    спасибо! за статью! обязательно использую ее в следующей разработке!