Главная » CMS » Делаем удобные комментарии на вашем блоге

Делаем удобные комментарии на вашем блоге

Я заметил, что в блогосфере многие начали ставить виджеты комментариев себе на блоги и в твиттере многие отписывались, что комментариев действительно стало больше. Но тут возникает дилемма — чей виджет комментариев поставить фейсбука или вконтакте, а что если поставить оба виджета и еще и оставить комментарии на самом блоге, теперь осталось все внедрить и красиво оформить.

Комментарии Вконтакте берем на . Указываем нужные нам параметры и сохраняем.

Комментарии Фейсбука берем на , также подбираем шаблон и остальные параметры, нажимаем Get Code и видим появившееся окно:

комментарии фейсбука

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

А теперь давайте все сделаем красиво. Я не буду расписывать как все делалось, а просто дам код.

Это надо вставить в место где у вас будут выводиться комментарии:

[html]

<dl class="tabs">
<dt class="selected">Facebook</dt>
<dd class="selected">
<div class="tab-content">
<!— Код комментариев Facebook —>
</div>
</dd>

<dt>Vkontakte</dt>
<dd>
<div class="tab-content">

<!— Код комментариев Vkontakte —>

</div>
</dd>

<dt>Ваш сайт</dt>
<dd>
<div class="tab-content">

<!— Код комментариев Вашего сайта —>

</div>
</dd>
</dl>

[/html]

В места где комментарии надо будет вставить те кода комментариев, которые мы сохраняли. А в место где надо вставить комментарии самого вордпресс, то вам надо будет найти строчку похожую на эту [php][/php][php][/php], просмотреть как она выводится, у меня она выглядит так:
[html]

<div id="comments" class="box222">
<?php comments_template(», true); ?>
</div>

[/html]

Просто копируете эти строки и вставляете вместо комментариев.

Еще вам надо будет вставить в хедер следующий код:

[code lang="js"]

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('dl.tabs dt').click(function(){
$(this)
.siblings().removeClass('selected').end()
.next('dd').andSelf().addClass('selected');
});
});
</script>

[/code]

Ну и CSS:

[css]

.tabs {
width:579px;
overflow:hidden;
font-size:0.9em;
margin:2em 0;
zoom:1;
padding:1px;
position:relative;
}

.tabs dt {
float:left;
line-height:2;
height:2em;
background:#e8f0f5;
border:1px solid #e8f0f5;
border-bottom:0;
padding:0 1em;
position:relative;
left:35px;
margin-right:1px;
cursor:pointer;

-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}

.tabs dt:hover {
background-color:#bfdff4;
}

.tabs dt.selected {
border-color:#b0d0e9;
background:#fff;
z-index:3;
cursor:auto;
}

.tabs dd {
background:#fff;
display:none;
float:right;
width:100%;
margin:2em 0 0 -100%;
position:relative;
z-index:2;
}

.tabs dd.selected {
display:block;
}

.tabs .tab-content {
border:1px solid #b0d0e9;
padding:0px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}

[/css]

Результат вы можете наблюдать на этом блоге. Получилось очень удобно и практично.

Запись опубликована в рубрике CMS с метками , . Добавьте в закладки постоянную ссылку.

5 комментариев: Делаем удобные комментарии на вашем блоге

  1. говорит:

    По-моему, это бред. Но вообще, имхо, если делать комментарии социалок, комментарии блога должны быть приоритетней. Они должны бы открыты быть первыми.

    • Neutron говорит:

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

  2. говорит:

    Вот ну ничуть неудобно. И не очень-то красиво. Вот тут внизу я даже вижу белый фон у закруглённых уголков.

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

    В ЖЖшечке в этом плане стало лучше и удобнее. Хотя форма добавления комментария там всё равно странная — надо ещё умудряться выбирать профиль и отдельно всё заполнять.

  3. говорит:

    А по мне хороший совет. Всем, кто хочет чтоб на его блоге комментировали через социальные сети.

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

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

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>