Главная » Функционал » Нестандартные решения » Вставка блока комментариев ВКонтакте на сайтах Ucoz

Вставка блока комментариев ВКонтакте на сайтах Ucoz

31.01.2012 в 22:40
Автор: MategeR   

1. Заходим на свою страницу ВКонтакте, опускаемся в самый низ и нажимаем ссылку "разработчикам".



2. Попадаем на страницу для разработчиков (vk.com/developers.php). Кликаем ссылку "Подробнее" в разделе "Виджеты и сторонние сайты".



3. В списке виджетов выбираем "Комментарии" (кликаем по ссылке):



4. Заполняем страницу подключения комментариев к сайту:



Заполняйте поля следующим образом:

  • Сайт/приложение: выбирайте "Подключить новый сайт"
  • Название сайта: произвольное (например, Самый лучший сайт)
  • Адрес сайта: введите адрес своего сайта, сделанного на Ucoz (например, http://xxxxxx.ru)
  • Основной домен сайта: то же самое, только без http:// (например, xxxxxx.ru). Как правило, заполняется автоматически.


После ввода параметров сайта жмем на кнопку "Сохранить". Может выскочить такое окошко:



Просто введите код с картинки (как на рисунке) и нажмите "Отправить". Изменения должны сохраниться. После этого продолжаем заполнять параметры нашего блока:


  • Количество комментариев: выбираем по вкусу (я оставил 10)
  • Медиа: оставляем галочку "Включить расширенные комментарии"
  • Ширина: если не знаете точно, какая ширина нужна, введите любое значение и увидите, что блок комментариев внизу страницы стал такой ширины, как вы указали. Подберите нужную ширину, чтобы она вписывалась в дизайн Вашего сайта.


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



Этот код надо вставлять
между <head> и </head>
(назовем его ЧАСТЬ 1)



Этот код надо вставлять
в ту часть страницы, где будет стоять блок
(назовем его ЧАСТЬ 2)




5. Вставка кода на страницы сайта.

5.1. Вставка кода "ЧАСТЬ 1"

Рассмотрим три самых распространенных случая:

Случай 1. Вы хотите установить блок на главную страницу или на любую другую, которую Вы добавляли через "Редкатор страниц".

Случай 2. Вы хотите установить блок в конце каждой статьи Каталога статей (чтобы пользователи могли комментировать любую статью).

Случай 3. Вы хотите установить блок на каждой странице Каталога файлов (чтобы пользователи могли комментировать любой материал).

В случае 1 заходим в Панель управления сайтом, в строке меню выбираем Дизайн -> Управление дизайном (шаблоны), затем "Страницы сайта".

В случае 2 заходим в Панель управления сайтом, в строке меню выбираем Дизайн -> Управление дизайном (шаблоны), затем "Страница материала и комментариев к нему" Каталога статей.

В случае 3 заходим в Панель управления сайтом, в строке меню выбираем Дизайн -> Управление дизайном (шаблоны), затем "Страница материала и комментариев к нему" Каталога файлов.

Ищем вручную открывающий тег <head> и закрывающий тег </head>. В любое место между этими тегами вставляем код "ЧАСТЬ 1":



5.2. Вставка кода "ЧАСТЬ 2"

Напоминаем:

Случай 1. Вы хотите установить блок на главную страницу или на любую другую, которую Вы добавляли через "Редкатор страниц".

Случай 2. Вы хотите установить блок в конце каждой статьи Каталога статей (чтобы пользователи могли комментировать любую статью).

Случай 3. Вы хотите установить блок на каждой странице Каталога файлов (чтобы пользователи могли комментировать любой материал).

Так вот,

В случае 1 ищем на той же странице в коде буквосочетание $CONTENT$ и сразу после него вставляем "ЧАСТЬ 2" кода.

В случаях 2 и 3 ищем на той же странице в коде буквосочетание $MESSAGE$ и сразу после него вставляем "ЧАСТЬ 2" кода:



7. Конечный результат.
Всё, готово! Теперь пользователи Вашего сайта смогут оставлять на нем комментарии:

вконтакте, комментарии


Прикреплённый файл: 282_31.01.jpg (103.1Kb)

Рейтинг: 36  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 20382          Комментариев: 30

Похожие инструкции

07.07.2015 в 18:24      0  

А к "Фотоальбомам" это применимо?
09.07.2015 в 12:36      0  

Применимо. Сделайте по аналогии с каталогом файлов.
12.06.2014 в 20:07      0  

Получилось!!! Правда пришлось попыхтеть happy
23.03.2014 в 06:26      0  

Подскажи пожалуйста.как сделать чтобы комментарии были в 2 колонки,рассчитываю на вашу помощь)
03.02.2014 в 06:49      0  

Получается, что в каждом браузере все по своему. В опере и файр-фоксе вставляешь комментарии - они появляютсяя на всех страницах одновременно. В Яндекс-браузере все нормально.
Хотелось бы все-таки чтобы во всех браузерах корректно работало...
03.02.2014 в 06:20      0  

Удалил комментарии с В контакте с главной страницы, но проблема осталась. На некоторых браузерах комментарии видны, на других - один комментарий с любой страницы дублируется на всех остальных. В чем проблема может быть? Коды вставлены по инструкции
02.02.2014 в 21:29      0  

Доброго времени суток! Не могу понять - если устанавливаешь блок и на главной странице, и на странице новостей и статей - они конфликтуют что ли? То есть комментарии на главной, через некоторое врмя пропадают... Как я понял - на главную вообще лучше не ставить - только в страницы, статьи и файлы?
27.10.2013 в 00:04      0  

Подскажите, пожалуйста, как сделать виджет комментариев ВКонтакте "резиновым", чтоб его ширина была на всю ширину страницы между первым и вторым контейнерами и изменялась при изменении (сужении, расширении) окна? Например, как вот на этом сайте http://russian.rt.com/article/17393
27.10.2013 в 09:27      0  

Здравствуйте, kupina. На указанном Вами сайте виджет комментариев ВКонтакте имеет фиксированные значения:
Цитата
style="height: 387px; width: 300px; background-image: none; background-position: initial initial; background-repeat: initial initial;
27.10.2013 в 14:52      0  

Я узнала, как сделать комментарии ВКонтакте "резиновыми". Даже, если в коде самих комментариев ширина установлена фиксированная. Об этом написано на этой странице http://webkab.ru/rezinovaya-shirina-kommentariev-vkontakte-i-facebook/ . Надо вставить код 
#vk_comments,
#vk_comments iframe { width: 100% !important;}в стили сайта. Я так сделала, и у меня всё заработало - комменты ВКонтакте стали "резиновыми"!
19.10.2013 в 18:18      0  

Такой вопрос. На своём сайте http://vatreno.ru реализовал 3 возможности комментирования, но возникла проблема при которой гости не могут прокомментировать новость через вкладку Вконтакте, у пользователей же всё нормально отображается. Кто знает в чём проблема?
20.10.2013 в 09:58      0  

Здравствуйте, Rom@rio. Рекомендуется убедиться, что соответствующий код для отображения виджета не установлен внутри условных операторов, что скрывает блок для неавторизованных пользователей.
20.10.2013 в 13:38      0  

Проверил код, но, к сожалению не нашёл каких-то ошибок, если не сложно, не могли бы взглянуть?
Код
<link type="text/css" rel="StyleSheet" href="http://vatreno.ru/tabs.css.txt" />  
  <script type="text/javascript">  
  $(function () {  
    var tabContainers = $('div.tabs > div');  
    tabContainers.hide().filter(':first').show();  
       
    $('div.tabs ul.tabNavigation a').click(function () {  
    tabContainers.hide();  
    tabContainers.filter(this.hash).show();  
    $('div.tabs ul.tabNavigation a').removeClass('selected');  
    $(this).addClass('selected');  
    return false;  
    };).filter(':first').click();  
  };);  
  </script>  

  $ADVBT_1$<script type="text/javascript" src="//yandex.st/share/share.js"  
  charset="utf-8"></script>  
  <div class="yashare-auto-init" data-yashareL10n="ru"  
    data-yashareType="none" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,gplus"  

  ></div>  
       
  <div class="tabs">  
    <ul class="tabNavigation">  
    <li><a class="" href="#first">uCoz</a></li>  
    <li><a class="" href="#second">Вконтакте</a></li>  
    <li><a class="" href="#third">Facebook</a></li>  
    </ul>  
    <div id="first"><?if($COM_IS_ACTIVE$)?>  
  <?if($COM_CAN_READ$)?>  
  <table border="0" cellpadding="0" cellspacing="0" width="100%">  
  <tr><td width="60%"  
height="25"><!--<s5183>-->Всего  
комментариев<!--</s>-->:  
<b>$COM_NUM_ENTRIES$</b></td><td align="right"  
height="25">$COM_PAGE_SELECTOR$</td></tr>  
  <tr><td colspan="2">$COM_BODY$</td></tr>  
  <tr><td colspan="2" align="center">$COM_PAGE_SELECTOR1$</td></tr>  
  <tr><td colspan="2" height="10"></td></tr>  
  </table>  
  <?endif?>  

  <?if($COM_CAN_ADD$)?>  
  $COM_ADD_FORM$  
  <?else?>  
  <?if($USER_LOGGED_IN$)?><?else?><div align="center"  
class="commReg"><!--<s5237>-->Добавлять комментарии могут
  только зарегистрированные пользователи.<!--</s>--><br  
/>[ <a  
href="$REGISTER_LINK$"><!--<s3089>-->Регистрация<!--</s>--></a>
  | <a  
href="$LOGIN_LINK$"><!--<s3087>-->Вход<!--</s>--></a>
  ]</div><?endif?>  
  <?endif?>  
  <?endif?></div>  
    <div id="second"><div id="vk_comments"></div>  
  <script type="text/javascript">  
  VK.Widgets.Comments("vk_comments", {limit: 20, width: "496", attach: "*"};);  
  </script></div>    
    <div id="third"><div class="fb-comments"  
data-href="http://vatreno.ucoz.ru" data-width="470"  
data-num-posts="20"></div></div>  
  </div>    
    <!-- </body> -->  
  </div>  
  <div style="clear:both;"></div>
21.10.2013 в 09:24      0  

Вы можете попробовать переместить в части кода:
Цитата
<?endif?></div>
<div id="second"><div id="vk_comments"></div>

<?endif?> в промежуток кода после окончания упоминания всего блока с комментариями.
21.10.2013 в 09:57      0  

К сожалению, не помогло. Комментарии от Facebook по-прежнему работают, а вк недоступны для гостей сайта. К тому же проверил, что запрет или разрешение публикации комментариев не повлияло на отображение блока комментариев от вк для гостей сайта.
22.10.2013 в 09:29      +1  

Уточните, остаётся ли ситуация актуальной при отключении соц-бара.
22.10.2013 в 09:49      0  

Отключение соц-бара помогло, спасибо!
Я так понимаю, это временный баг, связанный с его недоработкой?
22.10.2013 в 15:58      0  

Данная ситуация возникает по причине наличия кода вида:
Цитата
<script type="text/javascript">
VK.init({apiId: , onlyWidgets: true});
</script>

В двойном упоминании.

Вы можете пробовать задействовать код вида:
Цитата
<?if($USER_LOGGED_IN$)?><script type="text/javascript" src="//vk.com/js/api/openapi.js?101"></script>
<script type="text/javascript">
VK.init({apiId: apiId_Вашего_Сайта, onlyWidgets: true});
</script><?endif?>
22.10.2013 в 16:46      0  

Попробовал изменить таким образом код в модуле "новости сайта", но при включённом соц-баре по-прежнему осталось без изменений для гостей сайта, комментарии вк по-прежнему недоступны.

Upd: Теперь они включили соц-бар и для пользователей, теперь и комментарии от фейсбук не работают... smile
23.06.2013 в 18:11      0  

Я вроде не дурак, хотя и дурак не малый. Вроде и разложено всё по полочкам и скрины есть, сделал всё по шагово. Но не появился у меня блок с комментариями. Может я что то упустил?
 Вот скрины:
http://weltkrieg.at.ua/forum1/1ja_chast.png
http://weltkrieg.at.ua/forum1/2ja_chast.png
24.06.2013 в 09:14      +1  

Здравствуйте, заместо:
Цитата
VK.Widgets.Comments("vk_comments", {limit: 15, width: "730", attach: "*"}, );

Необходимо установить:
Цитата
VK.Widgets.Comments("vk_comments", {limit: 15, width: "730", attach: "*"});
24.06.2013 в 14:16      0  

Ок, заработало. Всего лишь одна запятая, сам бы я не нашёл. Спасибо!
15.05.2013 в 16:37      0  

Ребят а знает ли кто как нужно Администратировать комментарии если на моем сайте не только вконтакт блок но и фейсбук с обычным(то есть три окна).?
17.05.2013 в 09:19      0  

Здравствуйте, виджет от соц. сети facebook также позволяет модерировать комментарии. Рекомендуется обратиться к информации по работе данного виджета: http://developers.facebook.com/docs/reference/plugins/comments/
1 2 »