Приятное с полезным: виджеты ВКонтакте и Facebook

Совсем недавно для одного своего нового сайта мне понадобилось установить дополнительно пару форм комментариев от ВКонтакте и Facebook.

Сайт сугубо развлекательной тематики, потому подобные формы необходимы как воздух (кстати, оставьте свой электронный адрес и я вам сообщу о запуске этого проекта, будет весело, смешно и жутко интересно, обещаю ;)).

Можно конечно воспользоваться disqus, но важно понимать, что оставляя на сайте комментарии через виджеты социальных сетей они автоматически публикуются в ленте пользователя, а это дополнительный траффик, а иногда даже основной. Для сайта развлекательной тематики это естественно более чем выгодно.

Панель вкладок для сайта с виджетами ВКонтакте и Facebook

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

Выход был найден довольно быстро — панель вкладок. Вот что нам нужно. Перемещаясь по вкладкам пользователь сможет оставить комментарий через форму его любимой социальной сети не отвлекаясь на формы других соц.сетей. Выглядит сейчас это так:

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

Виджет комментариев facebook

Создание таких вкладок дело не хитрое. Необходимый легкий скрипт нашелся на сайте Димокса. Это универсальный скрипт, который можно использовать…например, для вывода рубрик, меток и еще чего-нибудь в одном блоке в боковой панели. Но мне нужны были комментарии. О них и расскажу.

Как настроить панель вкладок на сайте

Сначала берем этот код и создаем файл с расширением .js:

(function($) {
$(function() {
 
 $('ul.tabs').delegate('li:not(.current)', 'click', function() {
 $(this).addClass('current').siblings().removeClass('current')
 .parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150);
 })
 
})
})(jQuery)

Если вдруг что-то не так, тогда скачайте готовый файл, сохранив эту ссылку (правая кнопка мыши->сохранить ссылку как…).

Этот файл заливаем на свой сервер и подключаем его в <head></head>, разместив там следующую запись:

<script language="javascript" type="text/javascript" src="здесь пропишите путь к этому файлу/tabs.js"></script>

Для корректной работы скрипта также потребуется фреймворк jQuery. Если он не подключен, тогда там же, между <head></head> пропишите эту строку:

<script type='text/javascript' src='http://pervushin.com/ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js?ver=1.7'></script>

Обратите внимание на порядок подключений tabs.js и jQuery: сначала jQuery, а после него tabs.js.

HTML код блоков с вкладками

Вот код, который будет выводить вкладки и содержимое блоков:

<div class="section">
 <ul class="tabs">
 <li class="current">1-я вкладка (открыта по-умолчанию)</li>
 <li>2-я вкладка (открывает скрытое содержимое второго блока)</li>
 </ul>
 <div class="box visible">
 Содержимое первого блока (1-я вкладка, которая открыта по-умолчанию)
 </div>
 <div class="box">
 Содержимое второго блока (2-я вкладка)
 </div>
</div>

CSS стили для панели вкладок

Это мои стили для моей панели вкладок с сайта о котором я говорил выше. Вы конечно можете использовать их и менять как того требует ситуация. Пропишите их в вашем файле (обычно это style.css):

ul.tabs {
 height: 28px;
 line-height: 25px;
 list-style: none;
 border-bottom: 1px solid #E4E4E4;
 }
 .tabs li {
 display: inline;
 font-size: 1em;
 outline: 0;
 border: 0;
 background: #D8D8D8;
 color: #555;
 padding: 7px 10px;
 margin: 20px 0 0 0;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 vertical-align: middle;
 cursor:pointer;
 
 }
 .tabs li:hover {
 background: #2e4c79;
 color: #fff
 }
 .tabs li.current {
 background: #2e4c79;
 color: #fff
 }
 .box {
 display: none;
 }
 .box.visible {
 display: block;
 }

Обратите внимание, последние два стиля (.box и .box.visible) обязательны! Без них вкладки не будут выглядеть как вкладки :).

Устанавливаем виджеты комментариев ВКонтакте и Facebook

Целесообразно в первую вкладку, которая будет открыта по-умолчанию, установить виджет комментариев вконтакте. Во второй у меня стоит facebook, а в третьей обычная форма комментариев, но о ней я промолчу :).

Давайте «наполним» первый блок.

Как установить виджет ВКонтакте

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

Как установить виджет ВКонтакте

Затем указываем необходимое количество выводимых на сайте комментариев и ширину будущей формы. Система тут же отдаст нам код для сайта:

Настраиваем виджет будущей формы комментариев

Первый код…

<script type="text/javascript" src="http://pervushin.com/userapi.com/js/api/openapi.js?47"></script>
<script type="text/javascript">
VK.init({apiId: API_ID, onlyWidgets: true});
</script>
<script type="text/javascript" src="http://pervushin.com/userapi.com/js/api/openapi.js?47"></script>
<script type="text/javascript">  VK.init({apiId: API_ID, onlyWidgets: true});</script>

размещаем между тегами <head></head>.

Второй…

<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "650", attach: "*"});
</script>

в блоке первой вкладки, а саму вкладку так прямо и называем «ВКонтакте». В итоге у Вас должно получиться что-то подобное:

<div class="section">
 <ul class="tabs">
 <li class="current">ВКонтакте</li>
 <li>2-я вкладка (открывает скрытое содержимое второго блока)</li>
 </ul>
 <div class="box visible">
 <div ID="vk_comments"></div>
<script TYPE="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "650", attach: "*"});
</script>
 </div>
 <div class="box">
 Содержимое второго блока (2-я вкладка)
 </div>
</div>

Как установить facebook виджет

Виджет комментариев от Facebook находится на этой странице. Здесь все также легко. Заполняем поля количества выводимых комментариев и ширину виджета, а в первом поле «URL to comment on» вообще все стираем. Затем жмем «Get Code»:

Опции виджета комментариев facebook

Facebook, как и вконтакте, сгенерирует для нас два кода. Первый…

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1&appId=102378703198105";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

необходимо разместить сразу после тега <body>. Второй…

<div class="fb-comments" data-num-posts="10" data-width="650"></div>

мы поместим в блок второй вкладки. Но прежде его надо бы немного модернизировать. Дабы привязать форму комментариев к каждому отдельному посту, а не сайту целиком, мы добавим в код строчку…

data-href="<?php the_permalink(); ?>"

, таким образом вместо <?php the_permalink(); ?> будет подставляться точный URL адрес страницы и комментарии соответственно будут привязаны к этой странице. Но это относится к wordpress, думаю для других движков тоже существует подобная функция, стоит лишь поискать ;). В общем строчка должна выглядеть примерно так:

<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-num-posts="10" data-width="650"></div>

А код вкладок с уже формами комментариев от вконтакта и фейсбука будет выглядеть вот так:

<div class="section">
 <ul class="tabs">
 <li class="current">ВКонтакте</li>
 <li>Facebook</li>
 </ul>
 <div class="box visible">
 <div ID="vk_comments"></div>
<script TYPE="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "650", attach: "*"});
</script>
 </div>
 <div class="box">
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-num-posts="10" data-width="650"></div>
 </div>
</div>

Желаете добавить еще одну вкладку? Нет проблем. По примеру описанному выше добавляете вкладку (<li>название вкладки</li>) и соответственно блок этой вкладки (<div class=»box»>содержимое блока</div>).

Вот и все. Надеюсь не сильно нагромоздил :), если что, вопросы и ответы на них в комментариях к этому посту ;).

Удачи Вам друзья и побольше положительных комментариев к статьям!

p.s. раздача волшебных пенделей подходит к концу. У Вас осталось 5 дней! Спешите!

Сладкое на сегодня: Два волшебных слова, не считая совсем не волшебный предлог «на» 🙂 — танец на шесте. У этого ролика более 9 миллионов просмотров! Наслаждайтесь 🙂

Комментарии

93 на запись "Приятное с полезным: виджеты ВКонтакте и Facebook"
  1. Отличное решение.
    Только как быть с подсчетом общего количества комментариев к статье?

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

  2. А как вы думаете, как лучше сделать для обычного информационного блога: формы от disqus или как вы предлагаете в этой статье? 
    Я пишу обзоры на различные интересные сервисы и вот столкнулся с таким выбором…
    Поставил disqus — результат меня не особо впечатлил. Это довольно удобно и продвинуто, но отдельные элементы перевода и функционала мне не очень нравятся.

    • Если тематика востребована и комментируема, тогда да, вконтакте и фейсбук то, что нужно. Вообще вконтакте подходит под более развлекательную тематику.
      Например на этот блог ставить эти формы смысла не вижу.

      • Спасибо за статью 🙂 Поставил — вроде всё ок 🙂
        Только вначале немного смутила надпись — вставляем между и . Если вставить там — то получается, что эти скрипты будут подгружаться на всех страницах сайта, а надо только на тех, где нужны комментарии. В общем, я вставил эти скрипты все прямо перед html кодом вкладок в шаблоне одиночной записи. Всё работает 🙂

      • Кстати — не знаю, как это всё скажется на загрузке, но вроде всё нормально — я вместо вкладки «обычная форма» внедрил панельку от disqus. Получилась весьма неплохая и универсальная форма для комментирования 🙂

  3. Tettie says:

    Сереж, как думаешь, моему блогу такое нужно?
    Вообще, у меня не много комментариев, может установка Контакт+Фейсбук+Дискус+Стандартная форма увеличит их количество? Или лучше сделать, как у тебя, возможность логина через Дискус, ФБ, Твиттер, Гугл, ОупенИД + стандартная форма?

    • Думаю вконтакте твоему блогу очень даже не повредит. Фейсбук врят-ли что-то сильно даст, а вконтакте — да, может стать одним из основных источников трафика. Попробуй.

  4. Тьфу ты блин, запутал меня.

    Конечно теги head находятся в header.php, а сами формы располагаются в одиночной записи, т.е. single.php. Если применительно к wordpress.

    Я уж было подумал, что ты все в одиночной записи разместил.

    Разницы в нагрузке ты особо никакой не заметишь. Что с формами, что без них. А вот время загрузки страниц увеличится, хоть и не значительно.

  5. Никакого номера ставить не требуется, просто указываете сайт на котором виджет будет установлен.

  6. Tettie says:

    Всё сделала, как в инструкции — вкладки не переключаются 🙁

  7. Da says:

    Ништяк ! Получилось 

  8. Аноним says:

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

    • Аноним says:

      и забыл уточнить, только в Chrome такое случается

      • aleksirine says:

        Установил jqueryui tabs, там тоже самое, появляется дополнительное место под виджетом facebook, но правда нашел ответ в инструкции к jqueryui tabs, объясняется тем что в некоторых браузерах порой высота блока  вычисляется коряво если изначально у блока, при загрузке страницы display:none. Там написан и ответ, заменить display:none на position: absolute;left: -10000px; то есть блок загрузиться только за пределами страницы. К данному примеру это решение не совсем подходит, но с jqueryui tabs работает отлично. Если кому поможет буду рад)   

  9. Аноним says:

    Есть вот такой вот интересный сервис для комментариев http://cackle.ru. На нём можно комментировать с разных соц. сетей и без лишних извращений с кодом))

  10. у меня проблема со стандартным комментарием вордпресс. При добавлении нового выдает ошибку и иероглифы —  РћРЁР�БКА: введите защитный РєРѕРґ (для защиты РѕС‚ автоспама)

  11. Артём says:

    Помогите пожалуйста разобраться. Всё поэтапно сделал, но вот но: вкладки видны, переключаются, а вот содержимого нет, видна только стандартная форма если на её вкладку нажать. А так только кнопки(… Может где-то упустил, что?… несколько раз перепроверял. Или не правильно понял куда, что вставлять.

  12. К сожалению, подробнее чем написано и не сказать. На каком движке у Вас сделан сайт? WordPress?

  13. sasa says:

    ccccccccccccccccccccccccc

  14. Посмотрел. Формы на месте. У Вас все в порядке 😉

  15. Heroots says:

    у меня сайт на ucoz. Вроде сделал так как написано, но все появилось, а вкладки не переключаются. Помогите, в чем модет быть проблема?

  16. ВОт это правильно. Надо просто поставить дискас и можнго будет чем угодно войти чем плодить веток коментариев к одному посту.

  17. Серей! Помогите пожалуйста! Голову уже сломал.
    Не переключает на вкладку и всё… 🙁 Незнаю в чём дело

  18. Вкладки переключаются, все в порядке 😉

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

  20. В facebook спама обычно нет, это очень большая редкость.
    Что касается вконтакте. А Вы виджет генерировали по инструкции из статьи?

  21. Хм..странно…что-то видимо Вы не доделали :(. Сложно сказать не видя.

  22. Сделать это конечно же можно. Любой виджет от соцсетей, в том числе и вконтакте, позволяют модерировать (удалять) комментарии.
    Но я не уверен, что смогу Вам помочь. Там потребуется авторизация под вашей учетной записью. Т.е. мне потребуются логин и пароль от ВКонтакте, логин и пароль от вашего блога, а также адрес блога.

  23. Сергей, установил — все работает отлично, но почему-то под каждой статьей коменты одни и те-же, а как привязать к каждой статье?

  24. Точно также, как описано в статье. Только вместо моих кнопок необходимо сделать свои, тематичные для каждого виджета и разместить этот блок в sidebar.php (применительно к wordpress)

  25. Так вот оно все есть 🙂 Как рас то что мне нужно…. 

  26. AlexKF says:

    если будет идея как модерировать fb  — не откажусь от совета. весь вечер бьюсь — что тони как не выходит

  27. Да, я об этом знаю. Что интересно, при просмотре исходного кода отрисованной страницы в head есть строчка FB о том, что я админ.

  28. Я поставил себе на сайт комменты. Там они работают а пытался поставить на форум, не переключаються вкладки. Перепробывал все! не переклчаються вкладки в блоке «Подпишись»

Спасибо, что оставили свой комментарий

banner