Комментирование через соц. сети + табы

+45
2.95K
За основу взял это решение от адова сущность.
Так как не корректно у меня работало малость переделал для 1.10.3
Табы использовал эти.

Иллюстрация


1. В файле шаблона /templates/_default_/template.php вставляем это (я в хедере по привычке)
  1. <script type="text/javascript" src="//vk.com/js/api/openapi.js?112"></script>
  2. <script type="text/javascript">VK.init({apiId: ВАШ_ID_ПРИЛОЖЕНИЯ_обязательнО, onlyWidgets: true},
  3. function(obj) {
  4. document.getElementById('vk_count').innerHTML = 'всего:' + obj.response.count;
  5. });</script>
  6.  
  7. <meta property="fb:admins" content="{ваш админ айди не обязательно}"/>
  8. <meta property="fb:app_id" content="{айди вашего приложения не обязательно}"/>
  9.  
  10. <script type="text/javascript">
  11. $(document).ready(function() {
  12. $("#soccontent div.soc22").hide(); // Скрываем содержание
  13. $("#soctabs li:first").attr("id","current"); // Активируем первую закладку
  14. $("#soccontent div.soc22:first").fadeIn(); // Выводим содержание
  15.  
  16. $('#soctabs a').click(function(e) {
  17. e.preventDefault();
  18. $("#soccontent div.soc22").hide(); //Скрыть все сожержание
  19. $("#soctabs li").attr("id",""); //Сброс ID
  20. $(this).parent().attr("id","current"); // Активируем закладку
  21. $('#' + $(this).attr('title')).fadeIn(); // Выводим содержание текущей закладки
  22. });
  23. })();
  24. </script>


2. В файле /templates/_default_/components/com_comments_view.tpl вставляем это (привожу свой код полностью)
Если вы уже изменяли что-то под себя — будьте внимательны!

  1. <ul id="soctabs">
  2. <li><a href="#1" title="soctab1">{$labels.comments} ({$comments_count})</a></li>
  3. <li><a href="#2" title="soctab2">Facebook комментарии (<fb:comments-count href=http://SITE.RU{$smarty.server.REQUEST_URI}></fb:comments-count>)</a></li>
  4. <li><a href="#3" title="soctab3">ВКонтакте комментарии</a></li>
  5. </ul>
  6.  
  7. <div id="soccontent">
  8. <div id="soctab1" style="display: block;" class="soc22">
  9.  
  10. <div class="cm_ajax_list">
  11. {if $cfg.cmm_ajax}
  12. <script type="text/javascript">
  13. {literal}
  14. var anc = '';
  15. if (window.location.hash){
  16. var anc = window.location.hash;
  17. }
  18. {/literal}
  19. loadComments('{$target}', {$target_id}, anc);
  20. </script>
  21. {else}
  22. {$html}
  23. {/if}
  24. </div>
  25.  
  26. <a name="c"></a>
  27. <div class="cmm_links">
  28. <span id="cm_add_link0" class="cm_add_link add_comment">
  29. <a href="javascript:void(0);" onclick="{$add_comment_js}" class="ajaxlink">{$labels.add}</a>
  30. </span>
  31. {if $cfg.subscribe}
  32. {if $is_user}
  33. {if !$user_subscribed}
  34. <span class="subscribe">
  35. <a href="/subscribe/{$target}/{$target_id}">{$LANG.SUBSCRIBE_TO_NEW}</a>
  36. </span>
  37. {else}
  38. <span class="unsubscribe">
  39. <a href="/unsubscribe/{$target}/{$target_id}">{$LANG.UNSUBSCRIBE}</a>
  40. </span>
  41. {/if}
  42. {/if}
  43. {/if}
  44. {if $comments_count}
  45. <span class="cmm_rss">
  46. <a href="/rss/comments/{$target}-{$target_id}/feed.rss">{$labels.rss}</a>
  47. </span>
  48. {/if}
  49. </div>
  50. <div id="cm_addentry0"></div>
  51.  
  52. </div>
  53. <div id="soctab2" class="soc22">
  54.  
  55. <div id="cm_fb">
  56. <div class="cmm_heading">
  57.  
  58. <div id="fb-root"></div>
  59. <script src="http://connect.facebook.net/ru_RU/all.js#xfbml=1"></script><fb:comments href="http://SITE.RU{$smarty.server.REQUEST_URI}" num_posts="10" width="870"></fb:comments>
  60. </div>
  61. </div>
  62.  
  63. </div>
  64. <div id="soctab3" class="soc22">
  65. <div class="comments_count">
  66. <div id="cm_vk">
  67. <div class="cmm_heading">
  68. </div>
  69. <div id="vk_comments"></div>
  70. {literal}
  71. <script type="text/javascript">
  72. VK.Widgets.Comments("vk_comments", {limit: 10, width: "870", onChange:myFunc});
  73. function myFunc(num, last_comment, date, sign){
  74. alert(num);
  75. }
  76. </script>
  77. {/literal}
  78. </div>
  79.  
  80. </div>
  81. </div>
  82.  
Замените SITE.RU на свой, слеш в конце домена не ставьте.




3. Стили для всего этого дела
Можно скачать тут.

Если вы захотите полностью как в демо сделать наклон у табов то нужно будет дополнить. Лично мне так понравилось.

Буду благодарен, если кто подскажет как вывести количество комментариев ВК в таб (у FB и своих комментариев это есть).

P.S.: на совместимость всякую не проверял, у меня все отлично работает на полуживом сайте.

В IE 10 ВК виджет не отображается… хз, посмотрю на досуге(

04.05.14 P.S.S.: Проверьте чекбоксы, у кого не показываются, проверьте в стилях (socialbar.css) 22 строка input[type="checkbox"]{display:none;}
+1
Су-27 Су-27 8 лет назад #
Супер - спасибо и плюс в вашу копилку hoho
+2
kir kir 8 лет назад #
https://vk.com/page-1_44013925

VK.Api.call('widgets.getComments',
{widget_api_id:API_ID,page_id:'PAGE_ID'},function(res){
console.dir(num);
})

еще можно повесить обработчик на удаление и добавления комментария, чтобы обновлять счетчик) и раньше еще был баг если добавить сообщение и тут же удалить то событие не вызовется - мб уже поправили:)
0
PolarOne PolarOne 8 лет назад #
да, на форумах находил нечно подобное, но малость не понимаю как это втулить...
0
PolarOne PolarOne 8 лет назад #
оно то количество сообщений выводит, но не во вкладке, а уже в поле ввода сообщения.
""
0
Олег с клещами Олег с клещами 8 лет назад #
Та же история. Надо как то поправить. Всё остальное работает нормально. Плюс однозначно!
0
Алфей Алфей 8 лет назад #
Кто нибудь может это дело поправить, чтобы во владке показывалось число комментариев?
0
PolarOne PolarOne 8 лет назад #
на сколько понял из форумов, внутри фрейма вывести количество комментариев можно, но сама вкладка не во фрейме... не понимаю тут..
0
Bubble Gumoff Bubble Gumoff 8 лет назад #
Клас, а вкладки вк и фэйс c ajax подгрузкой? опасаюсь что нагружать будет загрузку страницы, если не аякс
0
PolarOne PolarOne 8 лет назад #
нет, все комменты на странице
display: none
0
PolarOne PolarOne 8 лет назад #
попробую сегодня с аяксом сделать...
0
PolarOne PolarOne 8 лет назад #
встроенный в icms аякс прикрутить не получилось, собственно, как и отдельно скрипт, не до конца разобрал организацию файлов/исходников для подгрузки, нужно глубже копать, а на это пока нет времени.
0
Erwin Erwin 8 лет назад #
фэйс что реально грузит страница, у кого как?
0
PolarOne PolarOne 8 лет назад #
учусь в свободное время)
Если кто доработает - буду рад.)))
Сам тоже попытаюсь лучше сделать.
0
Bubble Gumoff Bubble Gumoff 8 лет назад #
может модулями сделать - а модули уже грузить вот этим (Прямой эфир от Марата) http://instantcms.ru/blogs/moi-blog-360/modul-prjamoi-yefir-v-moduljah-v-2-0-0-dlja-icms-1-10.html
0
StronG StronG 8 лет назад #
У меня "вконтакте" почему-то отказывается грузиться, остальное работает хорошо
0
PolarOne PolarOne 8 лет назад #
Приложение (виджет) зарегистрировали?
ID ввели?
<script type="text/javascript">VK.init({apiId: ВАШ_ID_ПРИЛОЖЕНИЯ_обязательнО, onlyWidgets: true}.........
0
StronG StronG 8 лет назад #
Конечно, у меня уже стояли комментарии на сайте от ВК. Щас их и внедрил
0
PolarOne PolarOne 8 лет назад #
и вы полностью заменили все скрипты, абсолютно все?
если да, то нужно как-то посмотреть.
0
PolarOne PolarOne 8 лет назад #
В общем... по ходу еще сыровато... нужно доделывать, поторопился я.
0
hummer7887 hummer7887 8 лет назад #
Отличная работа, только вот столкнулся с проблемой! Теперь коменты от Конаткта вылазят практически на всех страницах снизу.... как от этого избавиться? А так Плюс однозначно! +
0
PolarOne PolarOne 8 лет назад #
Показываются даже там где никогда не было сообщений? о_О
Тоже нужно смотреть бо не знаю, либо стили, либо конфликт. Другие виджеты от ВК стоят?
0
kir kir 8 лет назад #
даю новодку:)

pageUrl - есть такой параметр у виджета его надо задавать как ссылка на тек страницу, или просто location.href , это FB динамически определяет путь) - это позволяет выводить где то одинаковые комменты, а где то разные для разной статьи

VK вроде этого не делал, по крайне мере раньше)
0
PolarOne PolarOne 8 лет назад #
Не знаю как раньше, но сейчас ВК определяет сам, у меня во всяком случае в том же варианте что предоставил - все пучком.
А вот для FB специально поставил
http://SITE.RU{$smarty.server.REQUEST_URI}
иначе на всех страницах одни и теже комментарии показываются.
0
hummer7887 hummer7887 8 лет назад #
Да стоят! Участники группы, и тоже коментарии на странице чата.... из за этого??
0
PolarOne PolarOne 8 лет назад #
hummer7887, а можете в личку ссылку на страницу дать где не должны комменты показываться?
с виджетом "Участники группы" нормально работает, возможно продублирован виджет комментариев и/или дело в чате... больше на ум ничего не приходит.
0
Алфей Алфей 8 лет назад #
Я сегодня сделал на основе того поста, который был взят за основу этого поста. Все работает, только фэйсбук я вообще вырезал.
0
PolarOne PolarOne 8 лет назад #
и ведь не сложно!)
меня только в начале озадачило сквозное размещение комментов на всех страницах, но решилось просто...
а еще с табами чуток повозился пока понял что скрипт всем div ставит display: none и комментарии не показывались)
0
mullo mullo 8 лет назад #
большое спасибо! то что искал. просто и быстро!
0
Paradoks Paradoks 7 лет назад #
Спасибо. Разобрался поставил v . Вам +
0
Paradoks Paradoks 6 лет назад #
Ребятки подскажите как удалить одну вкладку. Фэйсбук то работает то нет- в общем надо удалить, чтобы остался один таб VK

Еще от автора

Компонент "Каталог сайтов" Free
Доброго дня! Много чего обещалось и не сделалось, поэтому выкладываю компонент в свободный доступ.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.