Форма комментариев Facebook и как создать компактные социальные комментарии
Добрый день, уважаемые читатели и гости LediSeo! Несколько дней тому назад я рассказывала Вам как можно вывести на страницы блога wordpress форму комментариев от социальной сети Вконтакте. Понимая, что социализация достаточно прочно входит в нашу жизнь и каждый для себя выбирает более комфортную для него среду общения, решила сегодня Вам рассказать о том как вывести на блог форму комментариев Facebook, а также поговорить о том как создать компактные формы комментариев, которые не будут располагаться друг под другом и растягиваться огромным бесконечным списком на странице. Но… обо всем по порядку.
Устанавливаем форму комментариев Facebook на wordpress
Установить форму комментариев от фейсбук не так и сложно. Практически необходимо будет выполнить тоже самое, что мы выполняли при интегрировании комментариев от Вконтакте, но здесь есть одна тонкость, о которой мы поговорим чуть позже, а для начала необходимо получить код для вставки формы комментариев facebook. Чтобы это сделать заходим на нашу страницу в соцсети фейсбук и открываем раздел для разработчиков. Конечно, я могла бы Вам сейчас дать ссылку на конечную страницу с получением кода формы, но делать этого просто не буду. Вы должны сами проделать весь путь, чтобы понять что и откуда взялось.
Для того чтобы попасть в раздел Разработчиков нажимаем по ссылке “Разработчикам”, расположенной в самом низу страницы. Перед нами открывается страница
где нам необходимо нажать на пункт “Build for Websites” (создание сайтов). Откроется следующая страница со списком различных возможностей,
но на данный момент мне интересен пункт “Core Concepts” (основные параметры), поэтому снова нажимаем по данному пункту и открывается список с возможным функционалом
Нам для получения кода от формы комментариев facebook следует выбрать пункт “Social Plugins”. Снова нас перекидывает на страницу, где на этом завершающем этапе просто нажимаем на пункт “Comments”
Нажав по данному пункту мы попадаем на страницу генерации кода формы комментариев.
Где нам необходимо в поле Url to comment on прописать адрес ресурса, на котором мы будем интегрировать полученный код. Затем в поле “Number of posts” указываем какое количество комментариев будет выводиться в данной форме. Остальные параметры ( ширина формы (width) и цветовая палитра (color scheme) оставляем по умолчанию) и нажимаем на кнопку “Get Code” (получить код). Появляется окно с двумя различными кода.
Первый код, подсвеченный на скриншоте зеленым цветом,
<script type="text/javascript">// <![CDATA[ (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"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); // ]]></script> |
копируем и размещаем в файле header.php используемой темы, после открывающегося тега <body>
Сохраняем произведенные изменения.
Второй код, подсвеченный на скриншоте бежевым цветом,
тоже копируем и вставляем в файл single.php после кода, отвечающего за вывод основного контента. Сохраняем произведенные изменения.
Все форма комментариев от Facebook стала отражаться на страницах блога wordpress, но вот теперь хочу обратить Ваше внимание на ту тонкость данной форму, о которой предупреждала в самом начале. Дело в том, что данная форма не будет привязывать комментарии к определенным страницам, а будут отражаться на всех. Думаю, Вы поняли. И вот чтобы это исправить достаточно просто в коде вывода, размещенном в файле single.php прописать строчку
1 | <!--?php the_permalink(); ?--> |
То есть в итоге код приобретёт следующий вид:
Сохраняем произведенные изменения.
Все, таким образом у нас на блоге появляется три формы комментирования – форма комментирования wordpress, Вконтакте и Facebook, расположенные друг над другом.
И вот теперь представьте, Ваш посетитель решит оставить сообщение через форму wordpress и ему придется очень долго пролистывать ранее оставленные сообщения через форму Вконтакте или Фейсбук. Думаю не у каждого на это хватит терпения. Поэтому предлагаю вывести формы комментариев от Вконтакте и Фейсбук более компактно с помощью табов. Я уже писала как можно сэкономить благодаря им место в сайтбаре в статье “Как делала верстку боковой панели и ставила табы в сайтбар” и как можно сэкономить место на странице в материале «Создаем вкладки (табы) на блоге с помощью плагина postTabs». Подобным же образом я предлагаю сэкономить место и в данном случае.
Оформляем формы комментариев с помощью табов
Прежде всего для реализации задуманного нам потребует jquery скрипт, благодаря которому будет совершаться планвый переход между вкладками табов. Данный скрипт Вы можете скачать здесь. После того, как Вы получили tab.zip, распаковываем архив и перемещаем файл tab.js в папку с используемой темой, то есть в wp-content/themes/тема шаблона/сюда поместить.
Теперь необходимо подключить jquery, прописав в файле header.php используемой темы перед закрывающим тегом </header> следующий код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> |
Далее необходимо подключить и установленный нами скрип, то есть все в том же файле header.php прописываем еще один код
<script src="<?php bloginfo('template_url'); ?>/tab.js" type="text/javascript" language="javascript"></script> |
То есть выглядеть это в редактируемом файле будет примерно следующим образом:
Как видите, у меня тут же размещены коды отвечающие за подключение форм комментирования от Вконтакте и Facebook. Не забываем сохранить произведенные изменения.
Далее открываем на редактирование файл single.php и осторожно удаляем коды, которые у нас отвечают за вывод форм комментариев от Вконтакте и Фейсбук и вместо них прописываете следующий
Сохраняем произведенные изменения в файле. Теперь осталось только прописать оформление табов с помощью стилей, а для этого в файле style.css прописываем следующие строки:
ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; border: 1px solid #999; width: 500px;} ul.tabs li { float: left; width:249px; height: 31px; line-height: 31px; border: 1px solid #999; border-left: none; margin-bottom: -1px; overflow: hidden; position: relative; background: #e0e0e0;} ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding-left: 50px; border: 1px solid #fff; outline: none;} ul.tabs li a:hover { background: #ccc;} html ul.tabs li.active, html ul.tabs li.active a:hover { background: #fff; border-bottom: 1px solid #fff;} .tab_container { border-top: none; overflow: hidden; clear: both; float: left; width: 500px; height: 500px; background: #fff;} .tab_content { padding: 20px; } |
Сохраняем произведенные изменения. Все теперь наши формы комментариев имеют компактную форму
То есть нажав на одну из ссылок откроется та или иная форма комментирования. При этом если чуть – чуть потрудиться над стилями вывода табов можно добиться интересных результатов, например как у меня
Если Вы сами не сможете разобраться со стилями, то можно обратиться за помощью к профессионалу своего дела Илье, который в короткие сроки сможет справиться с любым стилем. Найти Илью Вы всегда можете в скайпе il_krechetov или на сайте http://www.free-lance.ru/users/ilvep/ Ну, а если Вам потребуется свой собственный логотип, дизайн сайта или блога, то рекомендую обратиться к Денису, который воплотить в реальность все Ваши задумки за короткий срок и качественно. Найти Дениса можно в скайпе DenyaGLAVb либо же на сайте http://www.free-lance.ru/users/DenyaGLAV/ Вообщем ребята работают супер и качественно, поэтому рекомендую.
Ну вот и все. Социальные формы комментариев от Вконтакте и Фейсбук мы с Вами вывели с помощью компактной формы, посмотреть как это все работает Вы можете на сайте pan-salat.ru. Как реализовывать Вам решайте сами, но при этом всегда следует учитывать чтобы было удобно нашим читателям. Хочу Вас предупридить также, данные фишки как и форма комментариев Дискус хорошо грузит блог, поэтому если Вы решите сочетать Дискус и данные формы комментирования, то скорость блог значительно упадет.
На этом все, всем удачи. Пока – пока.
С уважением, Наталья Яшина
Возможно Вам это будет интересно:
Вам понравилась статья? Расскажите о ней друзьям!
Егор 
Наталья 
fotokarapuz 
Татьяна