RSS

Как добавить виджет комментариев от Вконтакте в Blogspot

09 Авг

Этот пост предназначен для тех, кто ведет блоги на Гугловской платформе Blogspot.

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

Речь идет о том, что в последнее время практически все уже имеют свои аккаунты в социальных сетях Facebook и Вконтакте. И сегодня я покажу, как сделать возможность оставлять комментарий на Blogspot от имени авторизованного пользователя Вконтакте

  + 

Итак, что надо сделать пошагово:

1. Нам потребуется специальный индификатор API ID. Получение Open API ID
В рамках подключения к Open API создается специальное приложение, которое позволяет использовать на Вашем сайте все текущие методы ВКонтакте API. Для подключения Вашего сайта к платформе Open API, необходимо выполнить следующие действия:

  • Необходимо создать новое приложение.
  • Настроить приложения заполнить необходимые поля Open API: Open API URL – адрес сайта, к которому Вы планируте подключить Open API (например http://rsolovyov.blogspot.com/) и Базовый домен – базовый домен Вашего сайта (например, rsolovyov.blogspot.com)
2. Для виджета требуется специальный API ID. Чтобы его получить, нужно:

1. Зайти на страницу разработчика
2. Нажать на кнопку «Подключить сайт»
3. Заполнить необходимые данные и пройти короткую регистрацию (вам потребуется ваш мобильный телефон для получения СМС)После прохождения регистрации у вас появится приложение, в котором вы сможете настроить необходимые данные и получить ID приложения:*******,
Ну а теперь непосредственно про установку формы комментариев для Blogger.

1 Шаг

1. Заходим в панель управления блогом.
2. Там переходим во вкладку «Дизайн» и затем — «Изменить HTML»
Перед тегом </head> на странице Вашего сайта необходимо добавить следующий код:

и 

<script type=»text/javascript»>
VK.init({
apiId: API_ID,
onlyWidgets: true
});
</script>
Важно! Не забудьте вместо символов API_ID в этом коде вставить ваш код, полученный от Вконтакте.
2 шаг. Нам нужно найти определенную часть кода. Я для работы давно использую Google Chrome, в котором можно включить поиск с помощью комбинации клавиш Ctrl+F. В окне поиска вводим comment-form и нам высвечивается нужный код, который будет выглядеть так:
<b:includable id=’comment-form’ var=’post’>
<div class=’comment-form’>
<a name=’comment-form’/>
<h4 id=’comment-post-message’><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href=’data:post.commentFormIframeSrc’ id=’comment-editor-src’/>
<iframe allowtransparency=’true’ class=’blogger-iframe-colorize blogger-comment-from-post’frameborder=’0′ height=’410′ id=’comment-editor’ name=’comment-editor’ src=» width=’100%’/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<b:if cond=’data:showCmtPopup’>
<div id=’comment-popup’ style=’width:100px;height:20px;’/>
</b:if>
<script type=’text/javascript’>
      BLOG_CMT_createIframe(‘<data:post.appRpcRelayPath/>’,'<data:post.communityId/>’);
</div>
</b:includable>
Все, что выделено красным, заменяем на такой код:
<div class='comment-form'>
<div id='vk_comments'/>
<script type='text/javascript'>
VK.Widgets.Comments(&quot;vk_comments&quot;, {limit: 10, width: &quot;auto&quot;, attach: &quot;*&quot;});
</script>
</div>
Теперь нажимаем на кнопку Сохранить изменения и все, с этого момента на вашем блоге будет доступна форма комментариев от аккаунта Вконтакте!

Выглядеть это будет так:

Реклама
 

Метки:

21 responses to “Как добавить виджет комментариев от Вконтакте в Blogspot

  1. liker777

    18.08.2011 at 4:28 дп

    не находит blogspot html код из второго шага..

     
    • Руслан Соловьев

      18.08.2011 at 12:04 пп

      Это потому, что не поставил галочку напротив «Расширить шаблоны виджета»

       
      • liker777

        24.08.2011 at 8:21 пп

        Спасибо, получилось! Теперь вот не отправляет по email уведомления о новых комментариях.. что делать ?)

         
  2. Андрей

    10.09.2011 at 2:33 пп

    Мне помогло! После 6-часовых копаний с кодами и поиском нужного места для «внедрения» это просто бальзам на душу. Все наконец получилось! Спасибо!
    Хочу добавить, что на шаге 2 конструкцию можно не заменять. Код формы комментариев вконтакта можно вставить непосредственно перед кодом стандартной формы комментариев. Тогда остается возможность комментировать без авторизации вконтакте.
    Плюс к этому Код формы комментариев вконтакта втыкается адекватно в указанное место только (как мне показалось) при наличии в настройках сообщения блога (вкладка «Дизайн») галочки, включающей подсчет комментариев (четвертая сверху).
    Всем удачи!

     
    • inspired

      07.11.2011 at 5:13 пп

      «вкладка «Дизайн») галочки, включающей подсчет комментариев (четвертая сверху)»
      простите, туплю, а это где?

       
  3. inspired

    07.11.2011 at 5:12 пп

    а у меня не получилось:(

     
  4. Светлана

    23.12.2011 at 12:41 дп

    спасибо!)

     
  5. Sulfur

    24.12.2011 at 6:15 пп

    Хороший пост, но уже устарел немного, теперь перед нужно вставлять:

    VK.init({apiId: API_ID, onlyWidgets: true});

    И как правильно запостил Андрей выше можно не заменять а просто вставить что выделено красным у Руслана Соловьева:

    VK.Widgets.Comments(«vk_comments», {limit: 10, width: «496», attach: «*»});

     
  6. Sulfur

    24.12.2011 at 6:18 пп

    немного ошибся первое вставлять вот это:

    VK.init({apiId: 2731164, onlyWidgets: true});

    а вторым это:

    VK.Widgets.Comments(«vk_comments», {limit: 10, width: «496», attach: «*»});

     
  7. Swetlana Mus

    25.12.2011 at 12:05 дп

    хотелось бы еще научиться отредактировать код так, чтобы в счетчике комментов учитывались и из данного виджета?…
    помогите!!!

     
  8. Элла

    28.01.2012 at 11:57 дп

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

    Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
    Сообщение об ошибке в XML: Open quote is expected for attribute «{1}» associated with an element type «src».

    не знаю, что делать.

     
  9. Элла

    28.01.2012 at 2:26 пп

    Ура))) у меня все получилось)) спасибо))
    я просто не заметила, что добавила лишних символов, оттуда и ошибки))

     
    • Алена

      15.05.2012 at 1:11 пп

      А что за символы были? у меня ту же ошибку выдает, не могу разобраться..(

       
  10. Светлана Мус

    01.02.2012 at 7:53 пп

    периодически пользуюсь этим постом как руководством)))

     
  11. Евгения

    14.04.2012 at 2:01 дп

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

     
  12. FagPausabob

    17.05.2012 at 8:15 пп

    Супер инфо, надо будет воспользоваться:-) Даже в закладки добавлю.

     
  13. blogolubvi

    27.05.2012 at 2:38 пп

    Спасибо, помучался, но получилось.

     
  14. Манижа

    18.06.2012 at 3:26 пп

    Спасибо огромное. У меня все получилось. Все таки комментарии с помощью блогспот друдно добавлять.

     
  15. Боб

    26.06.2012 at 7:17 пп

    не вышло что-то, всё вроде правильно сделал, а как-то не удалоось

     
  16. Олег

    15.07.2012 at 10:45 пп

    Спасибо, работает, по тому принципу как Вы написали, но буковки с самого контакта брал, у меня в блоге Ваш код не сработал.

     

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

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

 
%d такие блоггеры, как: