Персональный ответ и цитирование в комментариях

QuoteМногие, кто прочесывал специализированные ресурсы, в поисках интересных фишек для платформы Blogger (Blogspot), встречали скрипт, позволяющий давать ответ на конкретный комментарий. Но он выглядел так убого, что большинство прошло мимо него, не заинтересовавшись.

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

Хотите вот так?

Для sunctorus: Очень неплохо получилось!

Или вот так?

sunctorus писал(а)
Сегодня я хочу предложить вам свой собственный скрипт.
Чем он примечателен?


А, может, вот так?

sunctorus писал(а)
Цитата
Ну-ка, ну-ка... Интересно...
Этот скрипт позволяет цитировать нужный отрывок комментария.
Хмм... Неплохо!


Или так?

Цитата
Сегодня я хочу предложить вам свой собственный скрипт.
Чем он интересен?
Цитата
Скрипт, позволяющий цитировать нужный отрывок комментария.
Ждем с нетерпением!


Или, вообще, вот так?

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


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

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

Можно задать цитату и вручную. Хотите оформить простую цитату? Скопируйте цитируемый текст в форму добавления комментария и окружите его псевдотэгам по этой схеме: [q]цитируемый текст[/q]. Хотите лицезреть более сложный вариант, с указанием имени человека, которого вы цитируете? Тогда так: [q="имя"]цитируемый текст[/q]..

Ну что ж, если вас увлекла идея подобного расширения функционала публикуемых в линейном формате комментариев, приступим к правке кода. Для начала подключим скрипты. Откройте редактор шаблона (Дизайн->Изменить HTML), поставьте галочку напротив "Расширить шаблоны виджета" и добавьте перед закрывающим тэгом </head> следующую строку:
<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'/>
</head>
* Если перед тэгом </head> уже имеется ссылка на скрипт jquery.min.js, то дублировать ее не стоит. Достаточно одного указания на библиотеку jQuery.

Теперь подключим основной скрипт. Перед закрывающим тэгом </body> добавляем следующую строку:
<script src='https://drive.google.com/uc?export=download&amp;id=0B3_dGXEjBVdPR3dYZGtpc1I2cG8' type='text/javascript'/>
</body>
Задействуем таблицу стилей. Под строкой "/* Comments" и вставляем следующий код:
/* Comments
----------------------------------------------- */
.comment-header {
  padding-bottom: 10px;
  position: relative;
}

.comment-button {
  background-color: #eee;
  border: 1px solid #000;
  color: #2E5B82 !important;
  font-size: 90%;
  text-decoration: none !important;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  padding: 1px 6px 1px 5px;
  position: relative;
}

.quote-div {
  position: absolute;
  bottom: 8px;
  left: 8px;
}

.comment-quote {
  margin-top: -10px;
  margin-bottom: 5px;
  padding: 7px;
  border: 1px solid #C3DEF4;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  text-align:justify;
  width: 100%;
}

.comment-quote-name {
  margin-left: 10px;
  padding: 0 3px;
  background-color: #fff;
  font-weight: bold;
  position: relative;
}

.name-color {
  color: #138FD8;
}
И, наконец, для того, чтобы у нас для каждого комментария появились кнопки персонального ответа и ответа с цитированием, ищем следующий кусок кода и видоизменяем/добавляем выделенные строки:
<div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
  <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
      <div class='comment-header'><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
        <b:if cond='data:comment.favicon'>
          <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
        </b:if>
        <a expr:name='data:comment.anchorName'/>
        <b:if cond='data:blog.enabledCommentProfileImages'>
          <data:comment.authorAvatarImage/>
        </b:if>
        <b:if cond='data:comment.authorUrl'>
          <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
        <b:else/>
          <data:comment.author/>
        </b:if>
        <data:commentPostedByMsg/>
      </dt>
      <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
        <b:if cond='data:comment.isDeleted'>
          <span class='deleted-comment'><data:comment.body/></span>
        <b:else/>
          <p>
            <data:comment.body/>
          </p>
        </b:if>
      </dd>
      <dd class='comment-footer'>
        <span class='comment-timestamp'>
          <a expr:href='data:comment.url' title='comment permalink'>
            <data:comment.timestamp/>
          </a>
          <b:include data='comment' name='commentDeleteIcon'/>
        </span>
        <div class='quote-div'><a class='comment-button' expr:href='&quot;http://www.blogger.com/comment.g?blogID=XXXXXXXXXXXXXXXXXXX&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%3Cb%3EДля%20%3Ca%20href=%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C/a%3E%3A%20%3C/b%3E&quot;' onclick='replyto(this.href); return false;'>Ответить</a>
        <a class='comment-button' expr:name='&quot;http://www.blogger.com/comment.g?blogID=XXXXXXXXXXXXXXXXXXX&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=[url]%3Ca%20href=%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C/a%3E[/url]&quot; + data:comment.body + &quot;[/q]&quot;' href='#' onclick='quotefrom(this.name); return false;'>Ответить с цитатой</a></div>
      </dd></div>
    </b:loop>
  </dl>
</div>
В строках 35 и 36 имеется параметр blogID. У меня, как вы видите, его значение "забито" иксами. Это потому, что для каждого блога оно индивидуально. Чтобы узнать свой blogID, откройте любую свою статью на редактирование или просто зайдите в настройки вашего блога. Значение blogID вы увидите в адресной строке браузера в ссылке на открывшуюся страницу. Им и замените исы.

Если у вас все получилось - пользуйтесь! Если же возникли вопросы - буду рад помочь.

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

Комментариев: 43

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

    ОтветитьУдалить
    Ответы
    1. Ну, если у Вас не так много там комментариев, то особо не страшно, если вернуться с DISQUS обратно к блоггеровским комментам. К тому же их всегда можно восстановить вручную. Просто пересоздать их с использованием Имя/URL в подписи.

      Удалить
  2. Да, это действительно идея, почему я не догадалась.
    Про блоги, где уже есть Дискус, я еще подумаю, а вот с учетом Ваших наработок на новые уже устанавливать не буду :)
    Вы проделали замечательную работу, Тимофей!

    ОтветитьУдалить
    Ответы
    1. Приятно слышать, что я трудился не зря :thanks:

      Удалить
  3. Помогите. Пыталась несколько раз внести изменения, а мне при просмотре все пишет "Не удалось проанализировать ваш шаблон, так как он неправильно сформирован...".
    Я конечно чайник в этом деле, но ранее кое что поменять у меня получалось, а тут тупик. Что я делаю не так?

    ОтветитьУдалить
    Ответы
    1. Давайте по порядку. Для запуска фишки, что описана в статье, нужно внести четыре блока изменений в код. При вводе какого из блоков, редактор шаблона выдает ошибку?

      Удалить
  4. Для sunctorus:

    После того как я заменяю эту строчку [div class='comment-header'><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName']

    ОтветитьУдалить
    Ответы
    1. Понимаете в чем дело... это парный тэг. То есть должна быть пара из открывающего и закрывающего тэга div. Если вы задействуете только первую половину, то редактор откажется принимать такой код.

      А закрывающая пара для приведенного Вами кода, у меня статье находится в строке 37. Если вы ее тоже добавите, совместно с тем куском кода, что указали, то редактор такой код примет. Только учтите, что тэг </dd> из 37 строки в шаблоне есть. Вам нужно присовокупить к нему </div>

      Удалить
  5. Для sunctorus:

    Всё сделала до конца. последние строчки выглядят так:
    [/dd></div]
    [/b:loop]
    [/dl]
    [/div]

    И ни чего не выходит

    ОтветитьУдалить
    Ответы
    1. Попробуйте выкинуть строки, обозначенные у меня как 35 и 36. Редактор принял код?

      Удалить
  6. Для sunctorus:

    Да, принял. В 35, 36 строчке я вместо ваших цифр 8239331118801703825 я вставила свои 4617911617233673834 и больше ни чего не меняла

    ОтветитьУдалить
    Ответы
    1. Немного переработал код. Система подсветки его по своему модифицировала, так что он становился непригодным. Попробуйте теперь!

      Удалить
  7. Для sunctorus:


    Урааааа!!!! Спасибочки!!!!!! Все заработало!!!!

    ОтветитьУдалить
  8. Только кнопка "Закрыть это окно" почему-то не работает

    ОтветитьУдалить
    Ответы
    1. Вы имеете в виду ссылку "Закрыть это окно" во всплывающем окне?

      Удалить
  9. Для sunctorus:

    Ну, во-первых, но у меня открывается в этом же окне, а во-вторых, да

    ОтветитьУдалить
    Ответы
    1. Светлана, три совета:
      1. У вас есть блог "Проба". Экспериментировать лучше было изначально на нем. А потом уже готовое решение переносить в свой основной блог.
      2. Когда страница у Вас в блоге ПОЛНОСТЬЮ догружена, то все открывается штатно - в новом окне. И ссылка закрытия окна тоже работает. Просто дождитесь полной загрузки.
      3. Зря вы так перегрузили блог внешними наворотами. Какой-то из них, а то и несколько, очень тормозят загрузку страниц!

      Удалить
  10. Для sunctorus:

    Спасибо за советы. Значит буду чистить блог. У меня как у настоящего чайника, хочется всего и много

    ОтветитьУдалить
    Ответы
    1. Рад был помочь!
      Советую прочитать мою первую статью в данном блоге. Думаю, она Вам немного поможет разобраться, какие навороты нужны блогу, а от каких можно смело отказаться.

      И, заходите еще. Сейчас немного разгребу дела и продолжу дальше писать об интересных фишках ;-)

      Удалить
  11. Для sunctorus:
    Спасибо еще раз. Буду читать и ждать чего-нибудь новенького и интересного

    ОтветитьУдалить
  12. У меня тоже после введения строчки [div class='comment-header'><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName']

    Пишет: Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
    Сообщение об ошибке в XML: The element type "dt" must be terminated by the matching end-tag "".

    Пробовала убрать 35 и 36 строчки, все равно не принимает.
    Подскажите, пожалуйста, что делать?

    ОтветитьУдалить
    Ответы
    1. Редактор шаблона Вас информирует о том, что тэг dt парный. То есть, полагаю, у вас нет для него закрывающего тэга. А это значит, что Вы неправильно поняли инструкции. Вы, похоже, строку за номером 04 добавляете в код целиком. А на самом деле, ее надо просто дописать (видоизменить) было. По сути, к уже имеющейся строке всего лишь приплюсовывается [div class='comment-header']. Отсюда у Вас два открывающих тэга dt и лишь один закрывающий.

      Удалить
  13. Спасибо, попробую не всю строку копировать, а только ее видоизменить...

    ОтветитьУдалить
  14. Снова ничего не получилось... :~(
    04 дописывать не пришлось, она у меня оказалась целиком такая же. А вот с строками 35, 36, 37 вообще темный лес. Их тоже нужно найти и видоизменить?
    Пожалуйста, помогите, мне так нужны такие комментарии...

    ОтветитьУдалить
    Ответы
    1. 35 и 36 - новые строки. Их у Вас в коде изначально не было. А вот 37-я дописана. К исходному </dd> прибавилось </div>.

      Удалить
  15. 35 и 36 добавила. А вот 37-ой строке к исходному [/dd] прибавила [/div]и выдавала ту же ошибку. Я тогда этот [/div] вообще не стала добавлять и, наконец-таки, шаблон сохранился! Но! Но эти кнопки наложились на последние строки комментариев и их не видно... :fool: Это можно как-то исправить?

    ОтветитьУдалить
    Ответы
    1. Где-то вы перемудрили... У вас где-то в коде есть лишний закрывающий тэг </div>...

      Попробуйте заменить весь свой оригинальный блок на мой. Целиком, все мои 40 строк.

      Только оригинал предварительно где-нибудь сохраните, чтобы если что-то не так пойдет, все легко можно было бы вернуть назад!

      Удалить
  16. Спасибо большое, все получилось! :thanks:

    ОтветитьУдалить
  17. Хорошие получились комментарии в оформлении.
    Единственное но, это кнпка "ответить":

    <b>Для <a href="#c7471537503619765878">Таня</a>: </b>

    Тег bприменён к ссылке, что не допустимо для Яндекса. Это пересечение тегов. Таким образом вес комментариев здорово занижается и влияет на страницу.

    ОтветитьУдалить
    Ответы
    1. Что значит пересечение? Пересечение, это <b><a></b></a>. А здесь я подобного не вижу - нормальная цепочка вложенных тэгов.

      Удалить
  18. Нет, это для нормального человека цепочка вложенных тегов, а для Яши всё едино: тег b поперёк ссылки, к которой вообще ничего нельзя применять.
    Я только заметил, что выделение идёт через comment-quote-link, тобишь через css, надеюсь быстробот не поумнел. Поэтому тревога напрасна. Но дуфолловерам лучше с такими вещами не шутить. За 2 дублирующихся заголовка я получил в полной мере, поэтому боюсь любого чиха.
    Сео в блоггер - это особый случай.

    ОтветитьУдалить
    Ответы
    1. Через comment-quote-link выделение идет только для цитат. Простое адресное обращение - это обычное выделение <b></b>. Предлагаете и в адресном обращении заменить b на span с CSS? Или отдельные b-шки для "Для" и для ника (внутри ссылки)?

      Удалить
  19. Здравствуйте! Почему то перестала работать кнопка "Ответить с цитатой". При нажатии переходит наверх статьи. А при нажатии на кнопку "ответить" стала открываться новая страница, а раньше было всплывающее окно.

    ОтветитьУдалить
    Ответы
    1. Алия, специально зашел в Ваш кулинарный блог всеми основными браузерами (IE, Firefox, Opera, Chrome). Описанных Вами проблем не наблюдаю!

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

      Если у Вас сейчас так же (по обоим пунктам), и Вы в последнее время с настройками и кодом шаблона не работали, значит это разработчики Blogger что-то ваяют на живую, как они это любят. Если же у Вы все еще наблюдаете все еще те ошибки, что описали выше, тогда даже и не знаю... Пишите - будем думать.

      Удалить
  20. О! Заработало!
    П.С. А у меня нет такого "глючка". Открывается страница со статьей... Правда, я вчера весь день "работала" с шаблоном и настройками... Но сейчас все ОК

    ОтветитьУдалить
    Ответы
    1. Сейчас и я никаких проблем не наблюдаю. Видать, разработчики Blogger опять шалили. Вот что им в Draft не сидится?! Обязательно надо свои кривые нововведения на всех отрабатывать!

      Рад, что в Вашем случае все хорошо закончилось ;-)

      Удалить
  21. [q] И, наконец, для того, чтобы у нас для каждого комментария появились кнопки персонального ответа и ответа с цитированием, ищем следующий кусок кода и видоизменяем/добавляем выделенные строки:[/q]

    Подскажите, пожалуйста, где хоть приблизительно искать этот код? Я его не нахожу :(

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

      Удалить
    2. "так спешила, так спешила, ну просто чуть ноги не поломала" (с)
      Это мне так хотелось добавить и себе такое :)
      Спасибо за разъяснение!

      Удалить
    3. Ну, возможность цитирования Вы можете получить и за счет другого виджета, описанного в моем блоге. Просто автозаполнения там не будет - вспомогательных кнопок не будет и BB-тэги надо будет вручную прописывать. А так, он ничем не хуже.

      Удалить
  22. Можно сделать так, чтобы цитирование открывалось не в новом окне, а в том же?

    ОтветитьУдалить
    Ответы
    1. Увы, нет.
      Если бы это было возможно, то я не заморачивался бы со всплывающими дополнительными окнами.

      Удалить

Хотите подписать свой комментарий, но у вас нет аккаунта? Выберите в выпадающем списке Имя/URL.
Вы сможете вписать свои имя или ник. Поле для указания URL можно оставить пустым.

Тэги, допустимые в комментариях