Как установить виджет Комментарии Вконтакте на ваш сайт?
В этой статье я расскажу Вам о том, как установить виджет Комментарии Вконтакте на вашем сайте. Но вначале давайте разберемся, что собой представляет виджет комментарии и зачем его надо устанавливать.
Честно говоря, я сама только недавно решила устанавливать этот виджет на свой сайт, когда сделала сайт на мою бесплатную консультацию в скайпе по заработку на партнерках.
Возникла необходимость обратной связи с моими партнерами, чтобы люди делились своими впечатлениями от полученной консультации. И виджет позволит им, моим партнерам, комментировать свои отзывы, задавать мне вопросы на сайте, без дополнительной регистрации. Это очень удобно.
Кроме того, каждый комментарий, оставленный на Вашем сайте, автоматически транслируется
на страницу комментатора ВКонтакте со ссылкой на исходную статью Вашего сайта. Со страницы автора комментария и из раздела новости о статье узнают все друзья автора, которые могут присоединиться к дискуссии.
Я понимаю, что если эти комментарии будут хорошими, это пойдет мне на пользу и еще больше людей захотят сотрудничать со мною.
Время для установки виджета — всего 5 минут. Правда когда вы будете делать это первый раз, это займет немного более времени, а на все остальные сайты вы будете добавлять его легко.
И так начнем по порядку.
Как установить виджет Комментарии Вконтакте на ваш сайт?
Чтобы добавить виджет на Ваш сайт, надо скопировать и вставить на страницу, куда Вы хотите подключить виджет — код для вставки.
Для этого надо перейти по специальной ссылке на страницу разработчика — http://vkontakte.ru/developers.php?p=Comments
Это сайт разработчиков. В нижней части сайта находим вкладку, Виджеты для сайта. Кликаем на нее и перед нами появляется новое окно.
Рис. 1
Кликает на слово Комментарии.
И снова появляется новое окно. И здесь надо будет поработать немного.
Рис. 2
Заполните эту форму как у меня на рисунке.
И вы увидите код,
<!— Put this script tag to the <head> of your page —>
<script type=»text/javascript» src=»//vk.com/js/api/openapi.js?154″></script>
<script type=»text/javascript»>
VK.init({apiId: 6489861, 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: «680», attach: «*»});
</script> ,
который надо будет поставить на сайт. Но код там не один и поэтому его надо вставить на сайт следующим образом.
1. В шапку сайта между тегами <head> страницы Вашего сайта необходимо добавить следующий код:
<!— Put this script tag to the <head> of your page —>
<script type=»text/javascript» src=»//vk.com/js/api/openapi.js?154″></script>
Я покажу в видео.
2. Вторую часть кода
<script type=»text/javascript»>
VK.init({apiId: 6489861, 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: «680», attach: «*»});
</script> ,
вставим в тело сайта. Это раздел bodi. блок кода внутри:
Теперь обращаю ваше внимание на эту часть кода. Это ВАЖНО!
Обратите внимание, на цифры внутри кода 6489861 . У меня прописаны цифры, мой ID.
У вас в коде вы можете увидеть «ваш API_ID». Вам надо найти свой ID и заменить слово сочетание «ваш API_ID» на цифровое значение, на ваш ID.
Чтобы получить ваш API_ID, перейдете по ссылке https://vk.com/editapp?act=create
Выполните подтверждение и вас перебросит на новую страницу. В строке браузера вы увидите номер, это и есть ваш ID.
Рис.5
Берете этот Api_id и вставляете вместо фразы «ваш API_ID» .
После этого эту часть кода, вставляете на сайт, и все начинает работать.
Не забудьте нажать на кнопочку «сохранить» =) там, где это требуется.
Надеюсь, моя статья поможет вам установить виджет комментарии на ваш сайт.
Если нет — пишите в комментариях, что не ясно. Напишу подробнее. Удачи!
Комментарии
Как установить виджет Комментарии Вконтакте на ваш сайт? — Комментариев нет
HTML tags allowed in your comment: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>