Приятное с полезным: виджеты ВКонтакте и Facebook
Совсем недавно для одного своего нового сайта мне понадобилось установить дополнительно пару форм комментариев от ВКонтакте и Facebook.
Сайт сугубо развлекательной тематики, потому подобные формы необходимы как воздух (кстати, оставьте свой электронный адрес и я вам сообщу о запуске этого проекта, будет весело, смешно и жутко интересно, обещаю ;)).
Можно конечно воспользоваться disqus, но важно понимать, что оставляя на сайте комментарии через виджеты социальных сетей они автоматически публикуются в ленте пользователя, а это дополнительный траффик, а иногда даже основной. Для сайта развлекательной тематики это естественно более чем выгодно.
Сама установка проблем не вызовет ни у кого, все достаточно просто. Но шлепать одну форму под другой не очень хорошо. А при наличии большого количества комментариев та форма, что окажется ниже может просто потеряться в ленте.
Выход был найден довольно быстро — панель вкладок. Вот что нам нужно. Перемещаясь по вкладкам пользователь сможет оставить комментарий через форму его любимой социальной сети не отвлекаясь на формы других соц.сетей. Выглядит сейчас это так:
Создание таких вкладок дело не хитрое. Необходимый легкий скрипт нашелся на сайте Димокса. Это универсальный скрипт, который можно использовать…например, для вывода рубрик, меток и еще чего-нибудь в одном блоке в боковой панели. Но мне нужны были комментарии. О них и расскажу.
Как настроить панель вкладок на сайте
Сначала берем этот код и создаем файл с расширением .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, как и вконтакте, сгенерирует для нас два кода. Первый…
<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 миллионов просмотров! Наслаждайтесь 🙂
Отличное решение.
Только как быть с подсчетом общего количества комментариев к статье?
С этим делом туго. По отдельности вывести можно на ту же вкладку количество комментариев и от вконтакта, и от фейсбука. А общее нет, я такого способа не знаю.
Спасибо!
полезно
А как вы думаете, как лучше сделать для обычного информационного блога: формы от disqus или как вы предлагаете в этой статье?
Я пишу обзоры на различные интересные сервисы и вот столкнулся с таким выбором…
Поставил disqus — результат меня не особо впечатлил. Это довольно удобно и продвинуто, но отдельные элементы перевода и функционала мне не очень нравятся.
Если тематика востребована и комментируема, тогда да, вконтакте и фейсбук то, что нужно. Вообще вконтакте подходит под более развлекательную тематику.
Например на этот блог ставить эти формы смысла не вижу.
Спасибо за статью 🙂 Поставил — вроде всё ок 🙂
Только вначале немного смутила надпись — вставляем между и . Если вставить там — то получается, что эти скрипты будут подгружаться на всех страницах сайта, а надо только на тех, где нужны комментарии. В общем, я вставил эти скрипты все прямо перед html кодом вкладок в шаблоне одиночной записи. Всё работает 🙂
Хм, возможно. От фейсбука то точно так можно, а вот вконтакте требует в head ставить. Уже комментировали? Все нормально?
Хм, возможно. От фейсбука то точно так можно, а вот вконтакте требует в head ставить. Уже комментировали? Все нормально?
Кстати — не знаю, как это всё скажется на загрузке, но вроде всё нормально — я вместо вкладки «обычная форма» внедрил панельку от disqus. Получилась весьма неплохая и универсальная форма для комментирования 🙂
Тоже вариант.
Сереж, как думаешь, моему блогу такое нужно?
Вообще, у меня не много комментариев, может установка Контакт+Фейсбук+Дискус+Стандартная форма увеличит их количество? Или лучше сделать, как у тебя, возможность логина через Дискус, ФБ, Твиттер, Гугл, ОупенИД + стандартная форма?
Думаю вконтакте твоему блогу очень даже не повредит. Фейсбук врят-ли что-то сильно даст, а вконтакте — да, может стать одним из основных источников трафика. Попробуй.
Тьфу ты блин, запутал меня.
Конечно теги head находятся в header.php, а сами формы располагаются в одиночной записи, т.е. single.php. Если применительно к wordpress.
Я уж было подумал, что ты все в одиночной записи разместил.
Разницы в нагрузке ты особо никакой не заметишь. Что с формами, что без них. А вот время загрузки страниц увеличится, хоть и не значительно.
Никакого номера ставить не требуется, просто указываете сайт на котором виджет будет установлен.
Всё сделала, как в инструкции — вкладки не переключаются 🙁
Разобралась — нашла ответ в одном блоге. Ты упустил важный момент: порядок размещения скриптов обязательно должен быть такой:
— сначала jQuery
— а под ним tabs.js
А ну да, конечно, сначала должен подгрузиться сам фреймворк, а потом использующие его скрипты.
А ну да, конечно, сначала должен подгрузиться сам фреймворк, а потом использующие его скрипты.
Спасибо золотце, ламал голову с той же проблемой, пока ни нашёл твой комент.
Ништяк ! Получилось
У меня проблема с виджетом facebook. Установил, в принципе все работает, но у facebook появляется дополнительное пустое пространство под виджетом, причем не сразу а после пары обновлений страницы. При этом если поменять местами, чтобы facebook загружался в первой вкладке то все нормально.
и забыл уточнить, только в Chrome такое случается
Установил jqueryui tabs, там тоже самое, появляется дополнительное место под виджетом facebook, но правда нашел ответ в инструкции к jqueryui tabs, объясняется тем что в некоторых браузерах порой высота блока вычисляется коряво если изначально у блока, при загрузке страницы display:none. Там написан и ответ, заменить display:none на position: absolute;left: -10000px; то есть блок загрузиться только за пределами страницы. К данному примеру это решение не совсем подходит, но с jqueryui tabs работает отлично. Если кому поможет буду рад)
Спасибо за дополнение. Пригодится.
Есть вот такой вот интересный сервис для комментариев http://cackle.ru. На нём можно комментировать с разных соц. сетей и без лишних извращений с кодом))
у меня проблема со стандартным комментарием вордпресс. При добавлении нового выдает ошибку и иероглифы — РћРЁР�БКА: введите защитный РєРѕРґ (для защиты РѕС‚ автоспама)
Помогите пожалуйста разобраться. Всё поэтапно сделал, но вот но: вкладки видны, переключаются, а вот содержимого нет, видна только стандартная форма если на её вкладку нажать. А так только кнопки(… Может где-то упустил, что?… несколько раз перепроверял. Или не правильно понял куда, что вставлять.
Адрес сайта дайте, посмотрю.
вот адрес: http://abs.pp.ua/portfolio/fusing/
уф…сложно разобраться, у Вас в хедере столько всего подключено. Так вроде все верно. Попробуйте те скрипты, которые в head прописываете, перед закрывающим тегом /head прописать. Не факт, конечно, но может поможет.
Сейчас попробую. Спасибо.
Отлично! Действительно помогло! Спасибо огромное.
Здорово!
К сожалению, подробнее чем написано и не сказать. На каком движке у Вас сделан сайт? WordPress?
ccccccccccccccccccccccccc
Посмотрел. Формы на месте. У Вас все в порядке 😉
у меня сайт на ucoz. Вроде сделал так как написано, но все появилось, а вкладки не переключаются. Помогите, в чем модет быть проблема?
Я признаться ни разу не работал с ucoz, потому даже не знаю, как там дела обстоят 🙁
ВОт это правильно. Надо просто поставить дискас и можнго будет чем угодно войти чем плодить веток коментариев к одному посту.
Да, вот только disqus вконтакте не поддерживает, но вроде обещают.
это не приятно. надеюсь они это исправят.
Серей! Помогите пожалуйста! Голову уже сломал.
Не переключает на вкладку и всё… 🙁 Незнаю в чём дело
Вкладки переключаются, все в порядке 😉
Мне казалось это логичным, да и в комментариях здесь это уже обсуждалось. В любом случае, пост дополнил.
В facebook спама обычно нет, это очень большая редкость.
Что касается вконтакте. А Вы виджет генерировали по инструкции из статьи?
Хм..странно…что-то видимо Вы не доделали :(. Сложно сказать не видя.
Сделать это конечно же можно. Любой виджет от соцсетей, в том числе и вконтакте, позволяют модерировать (удалять) комментарии.
Но я не уверен, что смогу Вам помочь. Там потребуется авторизация под вашей учетной записью. Т.е. мне потребуются логин и пароль от ВКонтакте, логин и пароль от вашего блога, а также адрес блога.
Сергей, установил — все работает отлично, но почему-то под каждой статьей коменты одни и те-же, а как привязать к каждой статье?
Точно также, как описано в статье. Только вместо моих кнопок необходимо сделать свои, тематичные для каждого виджета и разместить этот блок в sidebar.php (применительно к wordpress)
Спасибо!
Так вот оно все есть 🙂 Как рас то что мне нужно….
если будет идея как модерировать fb — не откажусь от совета. весь вечер бьюсь — что тони как не выходит
Признаться — не знаю. Я в общем-то не задумывался, а сейчас глянул — действительно, нет такой функции. Подумаем 😉
Да, я об этом знаю. Что интересно, при просмотре исходного кода отрисованной страницы в head есть строчка FB о том, что я админ.
Я поставил себе на сайт комменты. Там они работают а пытался поставить на форум, не переключаються вкладки. Перепробывал все! не переклчаються вкладки в блоке «Подпишись»