Здравствуйте, дорогие блогожане https://seokos.ru! Как и обещал, публикую пост спустя 3 дня. Пост будет на тему как сделать на wordpress комментарии от facebook и вконтакте. И не просто сделать, а сделать это красиво и профессионально. Приступаем!
Комментарии будут находится не друг под другом, как делают многие, а находится в одном месте в разных вкладках. Т.е. будет выбор между комментариями facebook и комментариями вконтакте.
Оформление будет производится с помощью скрипта на jQuery. Первое, что мы сделаем — это просто добавим формы комментариев себе на блог.
WordPress комментарии от Вконтакте
Переходим на сайт Вконтакте.ру, а именно на страницу виджетов и заполняем нужные поля по примеру на рисунке ниже:
Нажимаем сохранить. И ниже видим окошко Код для вставки (рисунок ниже) и копируем от туда код. Верхня часть кода
<script type="text/javascript" src="//vk.com/js/api/openapi.js?55"></script><script type="text/javascript">
VK.init ({apiId: ваш ID, onlyWidgets: true});
</script>
вставляем в header.php. А остальное, в то место, где хотите, чтобы отображались комментарии. Вот так должна выглядеть форма wordpress комментарии вконтакте :
WordPress комментарии от Facebook
Здесь почти тоже самое. Заходим на сайт Facebook.ru, а именно на страницу виджета комментариев. Заполняем поля, пример на рисунке ниже:
Еажимаем Get Code и нам выдают следующий код:
Часть кода, которая наверху вставляем в header.php, а нижнюю туда, где хотим, чтобы отображались комментарии.
Но! Внимание! После установки wordpress комментариев facebook, они будут работать неправильно. А именно одиннаковые комментарии будут отображаться на всех страницах. Чтобы это исправить, нужно добавить в код вывода (нижний код под №2) следующее:
И должно получиться так:
А теперь переходим к самому главному, самому вкусному...
Оформление комментариев wordpress
Так... мы установили комментарии от Вконтакте и Facebook. Но, они страшно находятся друг под другом. Конечно можно оставить так, дело каждого, но я все-таки советую оформить их. Сделать на одном месте, но в разных вкладках.
Первое, что нужно сделать — это подключить jquery. Для этого скопируйте ниже код в header.php:
После это качаем файл, размещаем его в корне темы и подключаем скрипт — вставкой кода в header.php:
Вставляем в single.php следующее:
<li><a href="#vk">Контакт</a></li>
<li><a href="#fb"> Facebook </a></li>
</ul><div><div id="vk">
<div id="vk_comments"></div>
<script type="text/javascript">VK.Widgets.Comments («vk_comments», {limit: 10, width: «450», attach: «*»});</script>
</div><div id="fb">
<div data-href="<?php the_permalink (); ?>" data-num-posts="5" data-width="450"></div>
</div></div>
Все почти готово, осталось только добавить немного кода в style.css:
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; }
Ура! Хочу Вас поздравить, мы все сделали. Трудно было? Думаю нет. И код легкий, и замороч нет. А зато как полезно сэкономить место.
Почему таких комментариев нет у меня? — Ответ прост: потому что не считают нужным вообще делать эти wordpress комментарии вконтакте и facebook. Раньше стояли, но я решил убрать.
На последок посмотрите видео:
На этом у меня все. Спасибо за внимание! Всем до скорого!
P.S. Обновление: Оказывается моя инструкция уже негодна 
Скорее всего происходили какие-то обновления. Поэтому попробуйте другую инструкция здесь.
С уважением, Томский школьник!
(1 голос, в среднем: 5.00 из 5)
Loading...
Всегда пожалуйста, всё для читалей
Спасибо буду знать , как сделать
Хотелось бы увидеть пример, что в результате получиться.
Обязательно сделаю, подпишитесь и Вы увидите первые!
Да, пример бы был кстати, хотя бы скрин)
С шириной наверное придется провозится немного чтобы подогнать под шаблон
С шириной особых проблем возникнуть не должно!) Если что можно обратиться к знающим. А пример будет) Обязательно в следующий статье, в виде скрина.
А у меня тема не позволяет вносить изменения, а может не догоняю просто:(
В каждой теме можно произвести какие-то изменения. Вы наверно просто не знаете как. Напишите мне в форму обратной связи, я обязательно помогу
Супер. Подскажите, пожалуйста, какой плагин комментариев используется на Вашем блоге. Уж очень красиво)
Стандартный + немного переделанный вручную
А есть ли какой-то способ, единого контроля всех комментариев сайта от ВК? Каждый раз заходить на все страницы сайта, и смотреть есть или нету комментариев...
Говорят, что есть. Лично я не знаю ничего подобного
Если зайти на сайт с правами администратора, то над формой комментариев ВК есть надпись администрирование. Нажимаешь на нее и открываются все комментарии со всех страниц от самых поздних до самых ранних. Чтобы просмотреть дальше, внизу надпись К предыдущим записям.
Олег, здравствуйте!
Спасибо, что посетили мой блог. Я очень этому рад. Заходите еще.
Что-то у меня ничего не получилось красиво сделать таким образом. Пробовала сама отыскать проблему, но все равно отображается два маркированных списка и внизу две формы соцсетей
Может подскажите в чем загвоздка? Подозреваю, что все дело в jquery...
Файл, который скачали, разместили в папку с шаблоном?
Да, поместила. Еще и слайдер поломался. Надо видимо разбираться с конфликтом jquery и wordpress. Везде предлагают разные варианты решения проблемы, буду пробовать, может что поможет...
Пробуйте. Буду проблемы, обращайтесь. Постараюсь помочь
добрый день,
Сделала всё, как написано в вашем блоге, но почему-то ничего не получилось.
Как вы думаете, в чём может быть проблема? Буду очень благодарна за ответ.
Значит где-то допустили ошибку. Попробуйте еще раз, если не получится напишите в форму обратной связи.
Я уже пыталась так сделать — переделала всё уже 3 раза — результат плачевный. Он виден на странице, что я вам писала. Что делать теперь, вообще не представляю(((????
Как будет свободное время я обязательно помогу Вам. Ждите.
буду очень надеяться, что свободное время у вас появится сегодня — очень бы хотелось исправить ошибку и повесить на блог красивые комменты.
Оказывается моя инструкция уже негодна
Скорее всего происходили какие-то обновления. Поэтому попробуйте другую инструкция на http://cospi.ru/kompaktnye-formy-kommentariev-chast-2/
А у меня с комментариями от контакта проблемка возникла — дублируются почему-то. Т.е. две формы появляется и никак не могу сделать одну. Поэтому решил пока отказаться — когда-то решу эту проблему!
У меня также стояли кнопки от Pluso, но я их решил убрать. Ведь и от твиттера , гугла, вконтакте и фейсбука вполне хватает. На другие пользователи практически не нажимают!
А без ID не как нельзя????
bloggood, Никак! А чем собственно проблема?
Спасибо, сделал себе наконецто комментарии с фейсбук!
А у меня вопрос. Если стоит форма от ВК, уже не удалишь неугодный комментарий?
Татьяна Саксон, Есть такая возможность! Просто нажимаете на кнопку «В» в верху формы комментариев и там открывается админ-панель.
Все, разобралась. Спасибо!
Спасибо, у вас прочитал и все получилось . Форма работает
Большое спасибо за информацию. Особенно ценно — то, что надо менять код для фэйсбука.
Спасибо. Пригодилось для моего блога
Спасибо! Интересное решение.
да, это пригодилось бы
спасибо
Только собиралась установить формы для комментариев, как, оказывается уже и инструкция устарела, да и сам Константин от этих форм комментариев отказался.
Подожду лучших времён.
Здравствуйте.
Скажите, а когда выйдет новая инструкция?
Здравствуйте! Технологии с каждым днем меняются, а вместе с этим меняются и инструкции... Записал себе в блокнот, написать новую статью на 15-20 января. Буду рад Вас видеть!
Вроде как не задумывался о вставке комментариев от контакта. Теперь задумался)
А что поставил комментарии Вконтакте над обычными комментами и без Facebook?
У меня вообще прикольно подключаются они:
1. Активирую плагин Tabs.
2. Активирую плагин Tree-comments.
3. В настройках прописываю VK API id, выбираю расположение вкладок и другие настройки.
Всё :-).
Помню: когда использовал WordPress, тоже намучался с кодами в тех местах, где это вовсе должно было быть стандартным.
Я решил что Facebook'ом мало кто пользуется, поэтому решил не ставить форму комментариев от этой социальной сети.
Ну здесь я не могу согласиться. На моём блоге есть два коммента, да и у меня в Facebook много людей, другое дело, что среди твоих посетителей пользователей Facebook мало.
Я форму от Facebook установила несколько месяцев назад,но через неё комменты не писали. А недавно оставили 2 комментария. И незадача — они отражаются на всех страницах под каждым постом. Под некоторыми — совершенно не в тему. Покопалась в интернете — оказывается у многих возникала такая проблема. Они задавали вопросы, но к сожалению никто им не ответил. Может вы знаете в чём причина и как это исправить?
Вы не ответили на мой вопрос, а я уже сама исправила этот недостаток. Теперь комментарии отображаются там где нужно. Кому интересно пишите через форму обратной связи моего сайта. Отвечу.
Жаль вот только спам в этих комментариях контролировать нельзя. К стати почисти комментарии с ВК под этой статьёй. Там куча спама.
благодарю, очень нравится на других сайтах когда есть комментарии от социальных сетей, надеюсь и я сумею установить себе такие
А если выбирать, родные каменты оставить на блоге или каменты от вк? Чтобы выбрал?
Спасибо Константин возьму на заметку!
Spasibo
У меня почему-то не получилось
Очень полезная статья.Надо будет тоже украсить свои комментарии
Интересно, спасибо за статью!