Комментарии для Blogger в стиле Facebook

И снова здравствуйте, дорогие друзья! Все знают популярную социальную сеть Marka Zuckerberga Facebook и у каждого из вас есть  (я просто уверен) аккаунт в ней. Поэтому вы знакомы с системой комментариев в Facebook. Сегодня я покажу вам, как сделать в любимом всеми нами Blogger комментарии в стиле Facebook.

Blogger и Facebook
Комментарии Blogger - стиль Facebook

Для этого, нам понадобится всего лишь один шаг, добавить стиль CSS и будет все окей. Можете посмотреть, как будут выглядеть комментарии по новому:

kommentarii_Facebook
Комментарии для Blogger в стиле Facebook

Кому нравится такой стиль комментариев прошу вперед.

Как добавить в Blogger комментарии в стиле Facebook

Для этого, заходим в панель инструментов Blogger - Шаблон - Изменить HTML. Находим строчку ]]></b:skin> и чуть выше добавляем код CSS (подобно, как найти данную строку читаем здесь):

Сохраните шаблон. Вот и готово.

P.S. Чтобы мне не писать крохотный пост, я покажу вам как подключить комментарии Google plus в нестандартном шаблоне Blogger

Сначала подключите комментарии Google плюс в блоге. Далее, заходим в панель инструментов Blogger - Шаблон - Изменить HTML. Находим такой код:

Заменяем его на другой, вот на этот:

Готово. Всем пока. До новых встреч.

Подсмотрено у Kang Ismet

С уважением, Сергей

Комментарии

  • Сергей, спасибо огромное! Добавил такое оформление себе на блог, все просто супер! Осталось придумать как закрыть ссылку «Удалить» от индексации 🙂

  • Как сделать форму добавления комментариев на Blogger как у вас? только имя и email

  • Здравствуйте, Сергей! Скажите пожалуйста, как можно сделать такую форму ввода комментариев и их вид как на этой странице? Облазил весь интернет — не могу найти ничего подобного, а форма понравилась..

  • Сейчас попробуем

  • Подскажите, пжл, в этом варианте комментариев, тем кто комментирует будет приходить на почту оповещение о том, что я им ответила?

    • Конечно, если поставят галочку Оповещать 🙂

      • Сергей, если я установлю форму комментариев как в фейсбуке, старые комментарии к статьям пропадут?

        • Нет, не пропадут. 🙂

          • Сергей, спасибо. Все получилось.
            Выглядит симпатично, но необходимой функциональности я так и не добилась, поэтому пришлось все вернуть обратно.
            А мучаюсь я с уведомлениями о моем ответе комментаторам блога. Я решила протестировать комментарии и вышла из своего аккаунта Гугл и выбрала «имя/URL». Тут же пропала возможность поставить галку в окошке «оповещать». Дальше хуже, при подтверждении комментария система начала меня проверять не робот ли я и предложила на картинках указать бурито. Это уже перебор)). Бедные мои читатели, я бы точно не стала комментировать такой блог.
            Как думаете, можно попробовать прикрутить Livefyre без потери старых комментариев? Это очень важно. Я не хочу потерять комментарии.

          • Оксана, а вы попробуйте проделать эту же операцию в стандартных комментариях Blogger. Тоже самое будет. У Blogger система комментирования не удобная. Здесь же при помощи кода меняется стиль блоггеровских комментариев, а не сама форма комментов.
            Установите систему дискус, вам она точно подойдёт и старые комментарии можно импортировать. Или другие — SV KAMENT, HyperComments.

  • Здравствуйте! Подскажите пожалуйста почему у меня нету иконки напротив анонима? В примере иконка присутствует а у меня ее нету 🙁

  • Здравствуйте, Сергей!Почему-то код разместился над шапкой блога!?Вставил точно над строчкой в шаблоне.

    • Здравствуйте,Александр!
      Скорее всего вы не туда код вставили. 🙂

      • Да,Сергей,Вы правы.Я прозевал две скобки и попал не на ту строчку.Теперь все в порядке.Спасибо.А все таки возможно изменить именно форму ввода комментариев (избавиться от этих отпугивающих английских слов при выборе ввода подписи) не прибегая к помощи Дискус и т.п.?
        С уважением-Александр.

        • Вам только остаётся подключить систему комментариев к Blogger от какого нибудь сервиса. Посмотрите инструкции в этом блоге. 🙂

  • Всё же в блоггере комментарии ужасные… Ограниченность выбора аккаунта для комментария, нельзя вставлять картинки / смайлики… идиотизм. Странно, что они не улучшают эту категорию.

  • Сергей, приветствую! у меня нифига не получается, с этим кодом для нового вида комментов аля «фейсбук» 🙁 подскажите как быть? Во первых, у меня в шаблоне нету строчки ]]> , а есть просто : . Если вставляю этот код выше < и нажимаю сохранить шаблон, то вид комментов не меняется, но зато при просмотре блога — в его шапке вылазит куча текста, фрагменты этого кода. Что я делаю не так?

    • Привет Алекс! Строка ]]></b:skin> есть в каждом шаблоне. Вам надо просто внимательно посмотреть. Нажмите кнопку Форматировать шаблон, затем сочетание клавиш Ctrl+F откроется спецокошко (поиск по коду) вставляете в него искомый код и нажимаете Enter 🙂

      • Сергей, так у вас в статье опять не правильно описано.. Что бы строка ]]> появилась, её надо раскрыть сначала, нажать вот сюда, как показано на скриншоте — https://cloud.mail.ru/public/FrqY/cpzeynvTg . Иначе, ]]> просто не видно!
        Еле разобрался с этим нюансом, сам. И кстати, как сделать, что бы шрифты в комментах были немного больше? А это они уж совсем мелкие какие-то. Какой фрагмент кода отвечает за размер шрифта? 🙂

        • Если искать визуально, то конечно надо раскрыть стили. Что здесь не правильно?
          Шрифт в коде строка 4 или 9 — самому сейчас проверить негде. 🙂

          • Я имею ввиду, что в Вашей статье нигде не сказано что нужно раскрыть стили… а если просто в поиске на странице забить ]]> — то ничего не ищется. И кстати, уведомления о новых комментах — ответах с этого блога ко мне не приходят, хотя и указываю свой действующий е-майл. Захожу и смотрю тут вручную — появился ли ответ или нет)

          • Здесь не сказано, а так в некоторых статьях показано. Просто каждый раз писать в инструкции одно и тоже неохота. В связи с этим я сейчас сел писать отдельную статью по стилям CSS (как, куда и способы вставки стилей в шаблон Blogger), а в дальнейшем я просто буду ссылаться в инструкциях на неё. Думаю полезно будет новичкам.

            А насчёт уведомлений о новых комментах чуть позже налажу. Так как в этой теме WordPress плагин не работал. Сейчас обновлю тему (надеюсь авторы исправили), возможно будет работать. 🙂

          • Сергей, приветствую! я щас пытаюсь разобраться вот с этой статьёй и сделать нормальные кнопки для публикаций в соц.сети. Посмотрите пожалуйста, эту статью, может сможете мне помочь 😉 Короче, смысл в том, что автор там указывает что его код нужно вставлять после определённого куска кода в шаблоне. Это понятно всё, но проблема в том, что я (и не только я) не можем найти тот кусок кода после которого нужно его код вставлять 🙁 Потому что сам код шаблона в блоггере изменился (а статью он писал давно уже, с тех пор произошли изменения в коде шаблона) и многие строки теперь скрыты и видоизменены.
            И вот не понятно, куда ж именно вставлять его коды.
            Может разберётесь в ситуации? у вас же есть тестовые блоги, посмотрите?

          • Да, здесь всё просто. Я сразу нашёл в стандартном шаблоне по отрывку кода post-share-buttons goog-inline-block . Автор вас вводит в заблуждение предлагая именно после этого кода устанавливать соцкнопки. Кнопки устанавливаются сразу после статьи — чуть ниже строки <div class=’post-footer-line post-footer-line-1′> или <div class=’post-footer-line post-footer-line-2′> У меня же есть инструкции по установке соцкнопок от разных сервисов, рекомендую от яндекса или Share42. 🙂

          • Сергей, нету в стандартном шаблоне у меня post-share-buttons goog-inline-block ! Я на двух разных блогах проверял… Один из блогов вообще без каких либо скриптов и гаджетов, то есть — код шаблона там практически не видоизменялся там. Нету этого кода и всё тут.
            Нету именно когда нажимаю на изменить html в настройках шаблона. А если искать просто по исходному коду страницы, то можно найти такую строчку — post-share-buttons goog-inline-block , это да.

            А Вы уверены, что вот после этого кода можно вставлять — ?

            По поводу кнопок от яндекса — я их пробовал, как по мне — фигня. Они появляются только в новых статьях блога. А в старые их никак не вставишь.

          • Что значит уверен? Они и вставляются после этих строчек. Не забивайте себе голову, устанавливайте как я написал. 🙂

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

          • Да, у вас тут вообще с комментами беда какая то)) уведомления не приходят — это раз, да ещё и кнопка «ответить» Вам пропадает, если много комментов накапливается в цепочке нашей переписки. То есть, кнопка «ответить» есть только не на всех ваших ответах мне.
            Меняйте тут систему комментов 😉 , а то вообще не удобная.

          • Вы каким браузером пользуетесь? Жалоб не было до вас, вы первый. Это система комментариев стандартная, вордпрессовская. Хотя и от темы WordPress многое зависит. Подключать сторонний сервис я не хочу.

          • Сергей, браузер ФФ 43.0.4. Версия не самая новая, (новая — 45), но тем не менее.. от браузера это не зависит, скорее всего. Это глюк вашей системы комментов. Вот скриншот — https://cloud.mail.ru/public/5v5L/27Q4paDPQ . На скриншоте видно, что даже нету кнопки «ответить» Вам.

            По поводу div class=’post-footer-line post-footer-line-1′> или — нифига не получается! не устанавливаются кнопки 🙁 Где с вами можно быстрее пообщаться? дайте свой е-майл, если не сложно, там посоветуюсь с вами, отблагодарю потом чем смогу 😉

          • От браузера тоже зависит, просто надо чаще кэш чистить. На почту написал. 🙂

          • Сергей, ну я не нуб же. Браузер тут не причём, кэш почищен. Я же скриншот показал, там чётко видно — что кнопки «ответить» нету под вашими последними комментами! То есть — когда много комментов в одной цепочки, то кнопка ответить под последними из них пропадает! Мне приходится отвечать на комменты от Вас выше, а не на последний. Это глюк системы комментов.

            С тем кодом я разобрался вроде как, позже ещё на почту вам напишу. Там просто надо было раскрыть большую строку кода что бы найти post-share-buttons goog-inline-block .

  • Сергей, приветствую! вот хотел узнать ваше мнение по поводу подключения других систем комментов в Блоггер. «SV каментс» — она платная, от 300 руб в год и выше. Дискус система — тоже вроде платная? или нет? И вообще — какие ещё знаете системы? может ещё чего интересного посоветуете?)

    • Привет! Дискус бесплатная. Ещё из бесплатных система Livefyre. Система св камент сначала была бесплатная, а теперь к сожалению только за деньги.

      Ещё у меня стоит на политическом сайте хорошая и удобная система hypercomments (адрес сервиса), бесплатно можно установить только на один сайт, на несколько надо платить. Вот блин, про неё (hypercomments) забыл инструкцию написать.
      Из платных есть ещё Cackle. А так, есть возможность установить в Blogger комментарии FB и ВК. 🙂

  • По поводу увеличения размера шрифтов, кстати. Я разобрался, там надо подредактировать 4-ю строку в коде, вот этот параметр — font:normal 11px/14px . К примеру, увеличить до 13px/16px. Увеличивать нужно обе цифры обязательно, а не только одну.

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

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

Решите задачку: *