21 февраля 2015

Как вставить в блог комментарии ВКонтакте?

Всё мне в Блоггере нравится, но только не комментарии. Картинку не добавить, ссылки красиво вставить надо извращаться со страшной силой, чёрного списка нет, удалённые авторами аватарки в итоге становятся ужасными на вид восклицательными знаками в траурных рамках. Подключать комментарии Google+ тоже затея какая-то мутная на мой взгляд. В общем 3 года жду каких-то изменений и ни фига. Зато ВКонтакте просто красота - тут нечего и говорить! Поэтому было принято решение вставлять в блог форму для комментариев ВКонтакте. Даже не знаю, почему я этого раньше не сделала!

Как вставить в блог форму комментариев ВКонтакте? Blogger

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

Заходим ВКонтакт и в самом низу станицы жмём на слово "РАЗРАБОТЧИКАМ". Выбираем там "Виджеты для сайтов" и далее "Комментарии" (смотрим скины с моего экрана).

Как вставить в блог комментарии ВКонтакте?

Как установить в блог комментарии ВКонтакте?

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

Как вставить в блог виджет для комментариев ВКонтакте?

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

Заходим в "Blogger" - "Шаблон". Выполняем на всякий случай резервное копирование и жмём "Изменить HTML". Клацаем мышкой на поле с кодом и вызываем строку поиска сочетанием клавиш CTRL+F. Находим с помощью поиска тег <head> (подсветится жёлтым) и вставляем под ним два первых абзаца кода из Контакта (выделены цветом на скрине).

Как вставить в блог комментарии ВКонтакте?

Затем находим строку <b:includable id='comment_picker' var='post'> и после неё вставляем оставшуюся часть кода. Причём обратите внимание - я вставила между ними тег <br/> (это по сути просто отступ между абзацами в тексте), чтобы форма комментариев отлипилась от строки с ярлыками после сообщения, иначе она находится прямо под ними без малейшего расстояния.

Как вставить в блог комментарии ВКонтакте?

На скрине хорошо видно, что я оставила количество отображаемых комментариев 10, но изменила ширину формы на 720. Вы можете ввести свои цифры.

При таком раскладе форма комментариев Вконтакте оказывается над блоггеровскими родными коментами. Переместить её в другое место лично у меня не получилось.

Зато можно добавить перед формой комментариев фразу "Комментировать ВКонтакте" (как впрочем и любую другую), вставив теги <br/><h4>Комментировать ВКонтакте</h4><br/> перед второй частью кода (вместо просто <br/>, про который я писала выше).

Знаю, что могут возникнуть вопросы, но убедительная просьба - перепроверьте всё три раза прежде, чем заваливать ими меня. На самом деле всё просто и понятно. Если виджет не работает, это может значить только одно - Вы допустили ошибку.

Один из таких вопросов: "Почему у меня комментарий опубликовался на стене?" Потому что надо перед отправкой нажать на синий квадратик с буквой "В" рядом с кнопкой "Отправить".

И хотя виджет работает исправно, я пока его уберу по той простой причине, что он очень уж сильно выбивается из тёмного дизайна моего блога, а вариантов цветовых тем разработчики не предложили. Эх, опять идеала не вышло! И должна предупредить, что под мобильную версию блога виджет не подстравивается. То есть он или вообще не отображается (что в принципе небольшая потеря), или сильно выбивается по ширине из узенькой мобильной версии и мешает нормальной прокрутке страницы сообщения. Вот.

Ну и наверно стоит добавить, что для Facebook существуют аналогичный виджет и устанавливается он практически также.

Всем удачи!
Ваша Katrin Black

21 комментарий:

  1. Katrin, спасибо - это классно! Действительно, классно! :)

    ОтветитьУдалить
  2. Спасибо, Katrin! И у меня со второй попытки получилось!

    ОтветитьУдалить
  3. Оно, может, и классно, но в дизайн твоего блога эта фигня не вписывается, имхо) Требую вернуть все взад)))

    ОтветитьУдалить
    Ответы
    1. Ир, согласна, что совсем не вписывается, но вещь нужная. Во всяком случае посмотрю насколько и от этого потом буду плясать. Блоггеровские коменты как ни крути капец убогие по функционалу.

      Удалить
  4. Когда ты пишешь такие вещи, я чувствую себя... глупенькой)) Спасибо!

    ОтветитьУдалить
    Ответы
    1. Ну насмешила :)))))))))))))))))) Ага, специально для этого пишу! :)

      Удалить
    2. Черт! Я так и знала!!!!!!!!!!!

      Удалить
  5. Слушай, не, надо вернуть все назад. Ну скажи: зачем комментарий контактовский встал на мою страницу вконтакте? Не успела я опубликовать его, так мне друзья там уже лайков понаставили, к моему удивлению. Наверное, им понравилось дерево на голубом фоне.))))) Веселуха, однако. Короче, мне понравилось все кроме дублирования на мою страничку вконтакте моей развеселой болтовни, которая предназначалась для твоего блога.

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

      Удалить
    2. Лен, специально, чтобы не публиковался комментарий на стене, рядом с кнопкой "Отправить" есть маленькая кнопочка "В" для отключения этой функции.

      А пропадает поле ВК комментариев, когда в адресной строке браузера написана ссылка на блоггеровский комментарий, а не на сам пост. Обрати внимание. После написания комментария ссылка на пост удлиняется ссылкой на конкретный комментарий.

      Удалить
    3. Спасибо! В следующем твоем посте попробую сделать ВК комментарий без публикации у себя на стене.

      Удалить
  6. Спасибо! Только с Вашего туториала всё наконец-то получилось.

    ОтветитьУдалить
    Ответы
    1. Рада помочь! Только не забывайте нажимать на маленькую буковку "В" в квадрате, чтобы коменты не отображались на стене ВКонтакте!

      Удалить
  7. Здравствуйте! У меня все получилось! Но когда я начала на главную страницу писать сообщения, все формы комментариев "съехали" в одну кучу, посмотрите пожалуйста почему это могло произойти? блог, на котором сделала комментарии вк http://semya-moya.blogspot.ru/
    И главный вопрос, как это исправить? (Я подумала, может это из-за размера сообщений, и нельзя при использовании виджета использовать в сообщении возможность строки "Далее"??) В общем жду ответа! Заранее спасибо!

    ОтветитьУдалить
    Ответы
    1. Люба, я у вас не заметила каких-то проблем. А что касается тонких настроек, то это вопрос не ко мне. Это стандартный виджет и все нюансы определяются самим Контактом. Я например хотела изменить цвет, так как белый слишком выбивался из моего дизайна. Но увы...

      Удалить
  8. все расплывается я не могу здесь оставить фото как вам в вк написать это моя страница напишите будет время я вам фото покажу как у меня получилось вот моя страница https://vk.com/vasilii025

    ОтветитьУдалить
  9. А вот как сделать отдельно все последние комменты

    ОтветитьУдалить
  10. Спасибо большое,сколько видео пересмотрел,не получалось,так же читал на других блогах,но не чего не вышло,у вас прочитал и установил с первого раза,еще раз спасибо!!!))

    ОтветитьУдалить