6 августа 2013 г.

Установить виджет комментариев от вконтакте в блог на блоггер

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

Для начала переходим по этой ссылке, где нам откроется страница с настройкой виджета комментариев вконтакте:

Скриншот виджета комментариев вконтакте

Первое, что нам надо сделать, это подключить новый сайт, далее пишем название сайта, адрес, и основной домен сайта: например, если адрес сайта: http://www.d-bomzh.ru/, то основной домен будет: d-bomzh.ru. После, отмечаем какое количество комментариев вы готовы видеть в вашем блоге, настраиваем ширину самой формы комментариев вконтакте под свой блог, и получаем в окне кода вставки, готовый код виджета комментариев. Пример кода ниже (вы получите свой код):

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?98"></script>

<script type="text/javascript">
  VK.init({apiId: 3805330, onlyWidgets: true});
</script>

<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "496", attach: "*"});
</script>

Теперь переходим к одной из самых ответственных задач установки комментариев вконтакте в ваш блог. Заходим в настройки своего блога: Шаблон / Изменить HTML, клавишами CTRL - F откраваем окно поиска в шаблоне, куда вставляем тег </head>. Теперь, когда тег </head> найден, вставляем первую часть кода, которая выделенная красным цветом, прямо перед ним, как показано ниже:

<script src='//vk.com/js/api/openapi.js?98' type='text/javascript'/>

<script type='text/javascript'>
  VK.init({apiId: 3805330, onlyWidgets: true});
</script>
  
</head>

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

<b:includable id='comment_picker' var='post'>

Так-же клавишами CTRL - F открываем окно поиска, и вставляем этод код, если же по каким либо обстоятельствам в поиске вам не удастся найти этот код, в таком случае его надо будет найти "ручками". Объясняю как: В шаблоне слева есть цифры, которые указывают на содержание кодов страницы вашего шаблона, так вот, код: <b:includable id='comment_picker' var='post'>, должен находиться примерно между цифрами 1100 и 1150, по крайней мере у меня он находится под номером 1113. Как только вы находите выше упомянутый код, вторую часть нашего виджета комментариев вконтакте, которая выделенная синим цветом, вставляем сразу же под найденным нами кодом, смотрим ниже:

<b:includable id='comment_picker' var='post'>
<div id='vk_comments'/>
<script type='text/javascript'>
VK.Widgets.Comments(&quot;vk_comments&quot;, {limit: 10, width: &quot;720&quot;, attach: &quot;*&quot;});
</script> 

После чего сохраняем шаблон, и виджет комментариев вконтакте будет красоваться в вашем блоге!

Related Posts Plugin for WordPress, Blogger...
Понравился пост, поделись с друзьями!
Нравится

26 комментариев:

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

    ОтветитьУдалить
    Ответы
    1. Согласен насчет выбора, он обязательно должен быть)

      Удалить
  2. Спасибо, получилось!
    А вы не знаете как еще добавить гаджет "последние комментарии" . Что-то у меня не получается((

    ОтветитьУдалить
    Ответы
    1. Рад за Вас!
      Насчет гаджета комментариев, такой как у меня в блоге стоит?

      Удалить
    2. Да, такой, у меня что-то не работает. Уже 4 штучки ставила(

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

      Удалить
    4. Скиньте в обратную связь ссылку на блог, куда желаете установить гаджет.

      Удалить
    5. Перелопатил гаджет, вдоль и поперек, но так и не смог понять в чем причина.... Вставляя любое другое доменное имя, гаджет работает, но при установке вашего, "Дневники лакоманьяка", комментарии не появляются. Я попробую разобраться с вашей проблемой чуть позже, после чего сообщу о результате.

      Удалить
    6. Спасибо большое!
      Ссылку отправила.

      Удалить
    7. Я уже разобралась :) Стоило отключить гугл комментарии и все заработало :)

      Удалить
    8. Ну вот и чудненько, рад за вас:)

      Удалить
  3. С контактом все довольно просто получилось у меня сделать 2 или 3 раза, т.к. из-за экспериментов с шаблоном все слетало (чего не скажешь про фейсбук).

    ОтветитьУдалить
    Ответы
    1. С установкой комментариев от фейсбука были трудности?

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

    ОтветитьУдалить
    Ответы
    1. Да я вот как-то не думал об установке еще какого либо блока комментариев.... А насчет всевозможных "примочек" вы абсолютно правы, чем больше виджетов да скриптов, тем работа блога естественно замедляется, что ни есть хорошо.

      Удалить
  5. Помогите! Все сделала по инструкции, но комментарии так и не появляются http://luera-toy.blogspot.com/
    В чем может быть причина?

    ОтветитьУдалить
  6. Еще момент, когда нажимаю"Сохранить шаблон" он вроде как сохраняется, а когда я пытаюсь закрыть эту страницу, мне пишут: У вас есть несохраненные изменения, которые будут потеряны.
    Что делать?

    ОтветитьУдалить
    Ответы
    1. Ой, все, вопрос снимается. Методом тЫка нашла причину: виджет вконтакте мне номер apiId не дал, а сейчас дал, когда телефон свой прикрепила. уффф...

      Удалить
    2. Порой, методом тыка узнаешь больше чем из книжек, или еще каких учебников, рад что все получилось:-)

      Удалить
  7. У меня тут вопросик созрел. Ответите?
    Я установила комментарии, но обнаружила, что на блогспоте с доменом оканчивающемся на КОМ комментарии появляются, а на РУ нет, посмотрите например один из постов: http://luera-toy.blogspot.ru/2014/02/snud.html
    Как сделать так, чтоб комментарии на всех сайтах отображались, независимо от страны.
    При настройке виджета адрес сайта писала http://luera-toy.blogspot.ru/
    а основной домен: luera-toy.blogspot.com
    С нетерпением жду ответ!!! Пжлт!!

    ОтветитьУдалить
    Ответы
    1. Почему же не отвечу, очень даже отвечу). Сейчас у вашего блога как я понял окончание на RU, значит этот адрес и надо регистрировать вконтакте, ежели вы намереваетесь поставить редирект, который будет перенаправлять на адрес с окончанием COM, тогда регистрации подлежит адрес отличительный от первого, другого не дано.

      P.S. При смене последних символов сайта - блога, в вашем случае с RU на COM или наоборот, любая другая система, поисковики, сервисы, воспринимают это уже как другой сайт.

      Удалить
    2. Спасибо.
      Дело в том, что мне больше нравится КОМ и поисковики меня так находят. Просто люди из России ссылаются на мой блог с окончанием РУ и блог так и отображается, какое окончание поставишь в адресной строке, так и будет((. Я не знаю как поставить редирект, который будет перенаправлять на адрес с окончанием КOM. Это же все новинки блоггера, я ничего не меняла с тех пор как зарегистрировалась. Не подскажете?

      Удалить
    3. Так как блоггер не дает нам возможности в форме комментариев писать различные теги и скрипты, поэтому прошу вас прокрутить страницу до виджета комментариев от вконтакте, где я и объясню как сделать редирект.

      Удалить