Три в одном или как своими руками сделать аккуратную форму для комментариев WordPress, Facebook и Вконтакте
Всем привет дорогие читатели, сегодня я продолжу тему, начатую мной в одной из прошлых статей — Как сделать комментарии вконтакте и фейсбук для каждой страницы блога? В прошлый раз, я установил на свой блог комментарии Вконтакте и Фейсбук, после завершения установки все мои комментарии смотрелись вот так:
А теперь представьте картину — статья удалась и во всех трех комментирующих виджетах: wordpress, facebook и вконтакте собралось много комментариев — получиться очень длинная поляна из комментариев, которые будет трудно воспринимать.
Поэтому, я поставил перед собой задачу — совместить виджеты комментариев Вконтакте и Фейсбук, и сделать их два в одном. Я проштудировал интернет, подумал головой, и даже перестарался — у меня получилось совместить все три виджета комментариев: wordpress, facebook и вконтакте, в одну аккуратную форму:
Получились три аккуратные вкладки, которые переключаются одним кликом мышки, и комментируй себе на здоровье, хочешь на wordpress, хочешь вконтакте, а можно и в facebook! Вы уже можете видеть как это работает на моем блоге. И если Вам интересно, то я расскажу как сделать такую форму, и совместить три виджета комментариев: wordpress, вконтакте, и facebook в один!
Итак, я после первой статьи получил два первых (верхних) кода от Вконтакте и Фейсбук, которые вставил в header.php, их оставляю на месте. Вторые (нижние) коды, отображающие сами виджеты, я вставил в файл comments.php — вот с этим файлом cейчас и надо поработать.
Для начала нужно создать стили моего нового виджета, захожу в редактор в панели управления блогом, и вставляю показанный ниже код в самый конец своего файла стиля на блоге style.css, не забываю сохранить!
#page {width:70%;margin:10px auto;}
.tabs {width:100%;overflow:hidden;font-size:0.9em;margin:2em 0;zoom:1;padding:1px;position:relative;}
.tabs dt {float:left;line-height:2;height:2em;background:#e8f0f5;border:1px solid #e8f0f5;border-bottom:0;padding:0 1em;position:relative;left:35px;margin-right:1px;cursor:pointer;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;}
.tabs dt:hover {background-color:#bfdff4;}
.tabs dt.selected {border-color:#b0d0e9;background:#fff;z-index:3;cursor:auto;}
.tabs dd {background:#fff;display:none;float:right;width:100%;margin:2em 0 0 -100%;position:relative;z-index:2;}
.tabs dd.selected {display:block;}
.tabs .tab-content {border:1px solid #b0d0e9;padding:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;}
Далее я вставляю javascript между тегами <head> и </head>, этот скрипт будет переключать комментарии с вкотнакте на фейсбук, или вордпресс.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('dl.tabs dt').click(function(){
$(this)
.siblings().removeClass('selected').end()
.next('dd').andSelf().addClass('selected');
});
});
</script>
Теперь, приступаю к более радостному мероприятию… 🙂 Создаю форму для своих будущих комментариев. Стиль формы и дееспособность заданы прошлыми вставленными кодами, а теперь надо вставить код для отображения самого виджета. Я на всякий случай сделал резервную копию файла comments.php и начал вставлять новшество. Пока покажу условный код, а после объясню — что к чему!
<div id="comments"> <h3><font color="ff0000">Ваши комментарии к статье:</font></h3> <dl class="tabs"> <dt class="selected">Wordpress</dt> <dd class="selected"> <div class="tab-content"> Код основных комментариев WordPress </div> </dd> <dt>ВКонтакте</dt> <dd> <div class="tab-content"> Код комментариев Вконтакте </div> </dd> <dt>FaceBook</dt> <dd> <div class="tab-content"> Код комментариев Facebook </div> </dd> </dl> </div>
Теперь подробнее — файл comments.php я обновляю целиком. Для начала я буквально все, кроме
<div id="comments"> и последнего </div>
копирую в отдельный файл, во-первых для того, чтобы не запутаться, а во-вторых, этот скопированный код и будет моим кодом основных комментариев Wordrpess. Если Вам хочется увидеть мой обновленный файл comments.php, читайте — Как сделать комментарии Google+ у себя на блоге?
Далее, задаю цвет и шрифт заголовка моих комментариев. После этого, если посмотреть на код, можно увидеть практически три одинаковые наборы тегов, это и есть три моих кита, на которых будут стоять комментарии. Если посмотреть внимательно — одно отличие можно увидеть в первом ките, а именно, в классе select. Он и отвечает за тот вид комментариев, который будет показан по умолчанию в моем виджете. Я установил select на комментарии wordpress, т.е. основные комментарии у меня будут отображаться по умолчанию.
Дальше всё просто, беру скопированный код из файла comments.php и вставляю его в заранее приготовленное место для кода комментариев wordpress. Тоже самое делаю со вторыми (нижними) частями кода, которые мне вручили социальные сети Вконтакте и Facebook. Если кто-то позабыл, где они берутся — читайте здесь.
Всё, если я нигде не ошибся, то сохраняю файл, и запускаю любую статью на блоге — проверяю работоспособность своей новой формы совмещенных комментариев wordpress, facebook и вконтакте.
UPD: от 05.11.2013 — некоторое время назад я обнаружил, что комментарии facebook более не отображаются в созданной мной форме. Что-то изменилось в стиле самих комментариев фейсбука и это мешает им корректно отображаться. Если я найду способ это исправить, я обязательно напишу об этом.
UPD: от 20.06.2014 — Во-первых, я написал статью — Виджет совмещенных комментариев без скриптов на CSS в которой рассказал об еще одном, даже более легком способе сделать совмещенные комментарии. И во-вторых, я недавно решил обновить код комментариев в фейсбуке на своем трэвел-блоге и понял, что комментарии фейсбук опять работают как и прежде.
Саша-умничка, отличная идея, думаю ей воспользоваться 🙂
Я и сам рад, что потихоньку расту. Всё больше убеждаюсь, что не зря сделал этот блог, где самому интересно совмещать теоретические и практические вопросы — как сделать свой блог на wordpress! 🙂
Да! Удачи во всем! 🙂
Жду новых креативных идей … например, можно ли сделать такими же подобными закладками форму в боковую панель, куда я могу вставить то, что мне нужно. Например: теги, комментируемые статьи, последние статьи — в одной форме, чтобы не занимать много места в сайдбаре…?
Вы моя муза для воплощения идей! Действительно, данный скрипт можно будет видоизменить и найти ему применение в сайдбаре!!! Буду над этим работать! 😉
Я давно о подобной конструкции подумывала, но не могу решиться: комментарии от соцсетей на странице выглядят как инородное тело. Ничего не могу с собой сделать…
Привет Княгиня — в таком варианте, вроде симпатично вставлены, их и не видно, кому не надо… 🙂
Приветствую всех!
Сейчас занят созданием одного крупного проекта, на котором появилось желание разместить все виды форм для комментирования.
Когда-то очень давно видел где-то, но потом не смог найти. В целом, нет проблем написать подобное самому, но зачем изобретать велосипед, если в данной статье все описано и сделано отлично!
Единственное, что можно здесь добавить, так это эффект при открытии тех или иных комментариев.
Спасибо автору!
Я рад, что мой блог полезен для других людей. И Вам спасибо!
КРУТО! Понравилось, завтра с утра займусь, спасибо автору!!! А вот фон комментариев, он везде будет белый или зависит от фона сайта?
Рашида, фон можно поменять в файле стиля в разделе отвечающем за комментарии… Однозначно сказать где не могу, потому что у каждой темы свой стиль — надо Вам самостоятельно поискать.
ай маладца, я только заметил, что ты новый блог запустил. Спасибо, решение это по-любому возьму, а то у меня с комментированием вообще не айс. =) Поздравляю так же с рождением дочери, как то до вашего туристического блога добираюсь постоянно, а вот коммент оставить забываю!
Артем, этому блогу уже полгода скоро будет :))) И за поздравления благодарю! 🙂
Ну вот как-то не уследил =)
Ну, теперь уже не потеряешься! 🙂
Всегда хотел такую формку комментариев. Жаль что вы только для себя объяснили.
Руслан, я обычно пишу то, что я делаю на этом сайте, и при этом выкладываю все шаги подробно, чтобы другие люди смогли сделать у себя подобное. Так что, если есть желание — алгоритм установки и подробности кода изложены выше! Если есть вопросы, с радостью отвечу.
Дело в том, что у меня на локалке еще сайт новый. Этот код в файле коммент снизу дописывать или на чистый записать? И куда именно вставлять коды от социалок чтобы они везде как вордпрессовские были? Заранее спасибо.
Руслан, Вы внимательно почитайте статью, скопируйте предложенные коды в куда-то и внимательно их просмотрите и сопоставьте с текстом статьи. Например, я пишу Теперь подробнее — файл comments.php я обновляю целиком. Для начала я буквально все, кроме… Это же реальная инструкция к применению, не только у меня, но и на любом блоге wordpress. Пошагово с начала статьи пройдите все действия и будем Вам праздник! Только, если меняете файлы, не забывайте делать резервные копии, ведь бывает иногда что-то идет не так! 😉 Коды социалок куда вставлять, тоже написано в одной из предыдущих статей, а в этой статье есть ссылка на нее! 😉
Спасибо! Как сделаю, отпишу результат!
Удачной установки виджета комментариев!
Sun Sunich спасибо за статью, все разжевано, НО в конце что делать немного не понятно. Я дошла до того как создать форму для своих будущих комментариев. Как ее создать не пойму! Получается последний шаг совершенно не расписан. Как задать цвет, что куда вставить не понятно. В общем я запуталась. Помогите пожалуйста.
Евгения, последний код, данный в статье — как раз и есть создание формы комментариев, а выше я описал — куда и как его вставить в файл comments.php
Если взять этот код прямо с примера, то у вас на сайте должна появиться сама форма с переключающимися табами, между комментариями wordpress, facebook и вконтакте. Если форма появилась, то далее, нужно просто вставить части кода, отвечающие за вывод самих комментариев
Хорошо бы, для удобства, оформить эти табы в качестве плагина.
Но, видимо, никто не удосужился 🙁
Придется делать этот плагин самому.
Может вдвоем! Я давно хотел сделать что-то полезное — типа плагина! 🙂 Пиши, буду рад сотрудничать!
Cаша, а как насчет моего вопроса с совмещенными закладками в боковом сайдбаре, получается??
Получается, уже на нашем тревел блоге ifewithoutdrugs.org реализовано в сайдбаре второй сверху виджет! 😉 Надо теперь статью по этому поводу сделать… Хотя технологии те же, что и в комментах, только нижний код вставляю в сайдбар… 🙂
Выполнил так у себя. Все работает. Спасибо огромное. Вот только хотелось бы узнать, можно ли ка-то вручную сделать каптчу для комментариев с вордпресса без плагинов?
Руслан, я же сказал тебе — плагин NoSpamNX решит все проблемы… Зачем тебе капча — пугать своих читателей, если хочешь, чтобы твой сайт комментировали — не стоит делать ни регистрацию, ни капчу
Ну ладно. А что насчет в УРЛ вкладки category ??? Стоит ли ее убирать?
Я тебе в личку ответил… почему-то :)))
Не одно, так другое. ((( Теперь после того как создал форму, на странице «карта сайта» и «контакты» внизу появилась эта форма комментариев. Из них вордпрессовская пустая, а вот вконтакте и фэйсбук комментируются. Отключал на страницах убрав в редактировании галочку разрешить записи. Можно ли как-то убрать с этих двух страниц формы комментирования?
Руслан… Я конечно, человек с фантазией… но не мешало бы увидеть твое творчество, чтобы понять, что к чему! :)))
Все отправил на почту адрес.
Андрей, может просто руками отключить комментарии конкретно в свойствах этих страниц, или можно сделать для них отдельный шаблон без комментов.
Здравствуйте! Спасибо заьо такое решение. Очень понравилось, но установить не получиось. Всё делала по шагам вроде бы правильно, в итоге появилась такая строчка вверху страницы: class=»single single-post postid-637 single-format-standard custom-background»> Что я не так сделала? Спасибо.
Ольга, к сожалению в ближайшие 10 дней, я на очень шатком интернете… и учитывая это не смогу Вам помочь. Если у Вас хватит терпения подождать меня. Напишите мне еще раз в начале февраля. Я думаю, судя по ошибке, Вы в файле стиля, что-то напутали. А вообще, это решение не становиться на все темы, из моих трех блогов, на одном оно вообще не работает. Это от темы зависит, в некоторых случаях, нужно дополнительно в коде ковыряться!
Круто, работает, только у меня сайд бар поплыл после того как код вставил в comments.php, как я только не воротил но так и не получилось (. Пришлось снять.
Олег, у меня тоже сайдбар танцевал… Подумал немного… и оказалось: почему-то не хватало одного закрывающего тега DIV в конце всей композиции с комментами! И всё встало на свои места! 😉 Удачи.
Отличный у тебя Блог! Много полезной и ценной инфы, много креативных решений.
Сегодня же попробую совместить на своём сайте комментарии, код предельно, прост а значит я смогу настроить дизайн вкладок под общую гамму сайта. Да кстати, нашол тебя через гугл по запросу: «вордпресс комментарии вконтакте и фейсбук» . Былобы неплохо вступить в твою группу ВК но вот, кнопки не могу найти, после сегодняшняшного обновления блога.
Привет, благодарю за добрые слова. Да, я как раз сейчас работаю над восстановлением всех сделанных мной функций — благо сам написал инструкции по их созданию… 🙂
Как здорово, ты уже разобрался в этом вопросе, а я как раз хотел у себя наконец-то это сделать. Достала длинная простыня комментариев, хотелось сделать вкладки 🙂 Надо будет найти время и заморочится.
А ты плагин не искал для этого? Может есть что-то уже…
Олег, ручками делать не сложно… Плагин, уже кто-то здесь в комментах мне предлагал написать… Если бы у меня был хоть малый опыт делать это… может Диме написать (4втае)… 🙂 Они с Аджеем делали плагины…
Не, я имел ввиду, что уже кто-то сделал что-то в этом роде. Типа плагин с табами, знаю есть такие для сайдбаров, а вот просто чтобы табы в любое место шаблона поставить, не видел. Ручками да можно сделать, в принципе это даже и не сложно, но плагины таки удобнее большинству.
Да, я тебя понял Олег. Я не встречал такого плагина. Сам стараюсь использовать как можно меньше плагинов. Хотя технически — их быстрее восстановить. Вот у меня тема слетела и все ручки не дойдут вернуть все то, что было сделано руками на этом блоге… 🙂
Кстати, селектор #page нужно убрать из кода css, так как ты его потом не используешь в приведенном коде.
И второй момент. У меня например в comments.php немного иначе все, и у меня код расположен не только внутри ))))
Да, Я тебя понимаю, поэтому и написал, что в разных темах по-разному, у меня на одном нашем блоге вообще не получилось установить этот виджет… Нужно подумать головой… Я просто привел пример — как это можно сделать… 🙂 И не говорил, что он универсальный… 🙂
стерлись теги, не только внутри дива комментс.
Главное понимать, какая часть кода отвечает за комменты… А файлы во всех темах разные…
Привет! Спасибо за статью!!! 2 дня копался в инете, всё пробовал, эксперементировал! Твоя статья: прям самое то оказалась! Всё остальное лажа!
Легко и с первого раза всё получилось! Только не понял куда вставлять вот это:
Далее я вставляю javascript между тегами и , этот скрипт будет переключать комментарии с вкотнакте на фейсбук, или вордпресс.
В какой файл? У меня в cooments и header нету » и «… (((
нету тегов head
Тэг обычно находится в файле header.php
Да, я имел ввиду вставляю скрипт между тегами head в файл header.php
Сан Саныч, большое спасибо за статью — крайне полезная штука!
ЗЫ. Эх, если бы ты всякие кодерские фишки, которые не осилить обычному блогоюзеру постил с периодичностью раз в три дня…. цены бы тебе не было. 🙂
Витя, полезные штуки находят своего читателя…. Каждый день такого не изобретешь 🙂
Да, Саша, согласен. Одна такая статья стоит двадцати блогов, наполненных рерайтом общедоступного материала.
Кстати, а в таком виде (табами) хоть кто-то из соцсетей комментирует? А то когда они все по очереди идут, тогда люди их видят, а тут нужно специально залезть, и чтобы тебе кто из других читателей ответил, он должен специально открыть эти табы, чтобы посмотреть, есть там чьи-то комменты или нет. Надо в метрике в вебвизоре посмотреть, кликает ли на них хоть кто-то.
ЗЫ. А вот если бы на табе был ярлычек, по типу красной цифры на иконке почты у айфона, которая показывает, сколько уже комментов на скрытых табах — то юзабилити было бы значительно выше. Но это наверно не так просто сделать…
Да, Вить ты прав, эффективность использования вложенных комментов ниже, чем всё одним полотном, но выглядит более эстетично! 🙂
Идея с количеством комментов в каждом табе — мне нравиться, и даже API есть вроде по всем… Я буду думать в этом направлении… Так как уж начал копать эту тему, можно и дальше развить. Спасибо за идею.
Спасибо, ценная информация!
А отчего решили не применять этот прием совмещения на lifewithoutdrugs.org? Так же аккуратнее выглядит…
На моем трэвел-блоге я провожу эксперимент сейчас — какая форма комментариев более действенная, комментарии совмещенным виджетом или одним полотном. Я об этом позже расскажу своим читателям. 🙂
Ну тогда даже подпишусь :))
Вообще, пока я еще думаю, как усовершенствовать виджет с комментариями, пока он явно проигрывает полотну комметнариев по кликабельности, но выигрывает по эстетике внешнего вида. 🙂
Эх, так я и думал… интуитивно как-то 🙂 Я вообще заметил, что люди чаще пользуются теми комментами, какие уж есть «по умолчанию». Лишнего клика не потерпят 🙂
Может быть дело пойдет веселее — если просто при наведении курсора на ссылку «вконтакте», форма вконтактовского комментария сама собой покажеться (без клика)?
ИМХО так все будет гораздо дружелюбнее выглядеть 🙂
Да, Антон, люди ленивые бывают, и при этом множество блогов используют замороченную капчу или регистрацию, и комментаторов это не останавливает… 🙂
Здравое суждение! Возможно, действительно, более чем я прав оратор, писавший чуть выше. Людям надо видеть — во всех ли «разделах» комментов есть комменты… и будут ли они прочитаны. Вот посужу по себе: для меня важно, чтобы коммент был прочтен как можно большим количеством людей, и соответственно я буду писать в комментах «поумолчанию» даже не смотря на то что для этого мне надо ввести мыло и имя, что очень лениво делать 🙂 Хотя мог бы писать через вконтакте — ведь я там уже залогинен…
К сожалению, вконтакте пока не может предоставлять статистику по количеству комментариев. Недавно переписывался два дня со службой поддержки Вконтакте и так и не получил нормального ответа на вопрос — как вывести в любом месте сайта количество комментариев вконтаке к данной странице? Кстати, Антон, может их замучить! Напиши тоже в службу поддержки… Может они созреют ответить! 🙂
Я тут заметил, что на всех сайтах, использующих комменты от Вконтакта, никак не хочет подгружаться скрипт под именем im960 , висит в вечном pending… Меня это раздражает!!! Хоть валерьянку пить…
А Вы не замечали? Не отнесутся ли плохо поисковики к такому «тормозу»? 🙂
И вообще — это такой глюк или фича? НА самом сайте Вконтакте тоже подобный тормозной скрипт есть )
Собираюсь заняться оптимизацией скорости загрузки блога, напишу об этом. Со скриптом, тобой упомянутым, лично не знаком, но при проверке и оптимизации, все тормоза постараюсь выявить и поддать корректировки, насколько это возможно! 🙂
Саша, спасибо большое за идею, давно уже надо совместить все комментирования и Google+, как сделал ты в последний момент на этом блоге!
Александр у вас коменты соцсетей , не помещаются в рамку, справа срезается содержимое, и сама рамка формы так же не видна, браузеры Хром, Опера.
Игорь, это только у Вас так, видимо стоят настройки монитора особенные, например для слабого зрения, при этом масштаб страницы увеличен. У меня всё выглядит хорошо, тестировал на разных компах, с разных броузеров.
Здравствуйте, уважаемый Sun Sunich.
Не подскажите, как вставить формы для комментариев, если использовать в посте вкладки плагина wordpress post tabs ??
Пробовал обойтись без плагина, но когда подключаю в header.php jquery получается конфликт с важным мне плагином — ротатором картинок.
Подскажите пожалуйста.
Александр, я плагина такого не знаю, а разбираться в нём сейчас нет времени, мы вступили в активную фазу наших путешествий, и редко сможем быть за компом. Мне кажется, можно как-то погуглить насчет избегания конфликтов с другим плагином.
wordpress post tabs это простой плагин для вставки табов в пост.
Мне нужно было, чтобы в одной из вкладок можно было оставлять отзывы.
Разобрался. Все просто. Не подумал сразу, что можно просто вставить вызов комментария php кодом в посте.
По умолчанию в вордпрессе нельзя так делать, код воспринимается как обычный текст.
Решается это путем вставки специального скрипта в function.php. А в посте, где нужно вывести php код, нужно вставлять специальный шорткод.
Ссылку на первоисточник, где нашел решение не ставлю =)
Я так понял, что решение найдено! 🙂 Поздравляю! Для вызова в теле страницы или в сайдбаре функции php есть специальный плагин, хотя его наверняка можно разобрать… Как и все другие плагины… 🙂
ну и чем закончился твой эксперимент по улучшению комментирования? Что лучше табы или сплошная лента?
Олежка, это пока борьба между эстетическим видом и практической реализацией совмещенных комментариев. Самый практичный и компромиссный вариант представлен на нашем трэвел-блоге в данный момент! 🙂
Я бы не сказал, что он компромиссный, это как раз один из двух вариантов, когда просто сплошной лентой )))
Ну я там заголовки ВК и FB выделил, мне кажется так немного заметнее они стали! 🙂
Я со своим шаблоном вообще не могу ничего вставить(( Приходится все плагинами делать(( У него все какое-то другое и синг пшп и хедр.
Мурзик, такого быть не может… Темы и шаблоны бывают разные, часто, бывает, что скрипт квери, который переключает табы с одних комментариев на другие конфликтует со скриптами самой вызванными самой темой, я уже устранял подобные конфликты. Скорее всего, и Ваша проблема не сложнее! 🙂
Спасибо. Пригодилось для моего блога
Да, совмещенные комментарии — штука полезная. 🙂
Очень полезный пост, огромное спасибо
только мне пришлось убрать строку из хедера
библиотеки уже по умолчанию подключены
Да, в некоторых темах библиотеки подключены уже, а где-то нет!
Спасибо огромное за урок, Александр. Обязательно воспользуюсь! Меня интересует, как «прикрутить» комментарии от Google+ вот так же, как сделано это на Вашем блоге?
Вопрос уже не актуален, т.к. прочитав еще раз статью, нашел ответ на свой вопрос. Первый раз пропустил. Спасибо за подробное описание!
Здравствуйте, смотрю у вас тоже вкладка фейсбук перестала работать как у меня=D. Выносил в другое место код фейсбука — работает, а в данной форме нет. Может у вас получится поправить….
А вот у меня почему-то перестала отображаться форма комментариев от фейсбука. Когда захожу под именем фан страницы, то показывает, а под логином нет. В чем причина, подскажите?
У вас тоже я не вижу формы комментариев для фейсбука.
Вот скрин:
С фейсбуком пока не разбирался, не было интернета, погляжу, если найду причину, отпишусь вам в комментарии.
Вот дублирую скрин:
Кодом не получается вставить. Даю ссылку http://vahe-zdorovye.ru/wp-content/uploads/Kak-sovmestit-kommentarii-Wordpress-Facebook-i-Vkontakte-Blog-na-wordpress-svoimi-rukami.jpg
Красота 🙂 И снова спасибо! Все получилось 🙂
ой, только у меня комментарии сначала идут, а потом в самом низу вкладки. А у вас идут вкладочки, а в них комментарии. Я где-то ошиблась да?
Sun Sunich, приветствую!!!
вопрос, с фейсбуком, не хочет в форме отображаться, под ней или над ней без проблем….в форме нет, ты с этим не разбирался еще, ….если да то подскажи пожл. решение. Спасибо!!!
Пока не нашел ответ на этот вопрос, по-ходу, в стилях кроется проблема. Потому что, технически всё работает, но не отображается.
Здравствуйте!
Я нашел выход по поводу совмещения комментариев и в добавок без скриптов, все на CSS3. Вот думаю поделюсь идеей.
Можете посмотреть как выглядит форма комментариев на сайте <a href="http://oneprog.ru/" title="Скачать Бесплатно Программы"
Подробно расписывать нет времени.
Вот код для вставки в single.php
ВКонтакте
Facebook
Здесь вставляем код комментариев ВКонтакте
Здесь вставляем код комментариев Facebook
А вот код для вставки в style.css вашей темы
.tabscomment {position:relative;margin:40px 0;}
.tabscomment label {display:block;float:left;background:#E7E1DD;-moz-border-radius:6px 6px 0 0;-webkit-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0;color:#62a8dd;cursor:pointer;padding:5px 0; position:relative;top:2px;margin:0 5px 0 0;width:100px;text-align:center;z-index:1;}
.tabscomment input {position:absolute;left:-9999px;}
.tabscomment label:hover {background:#E7E1DD;top:0;-webkit-transition: all 0.2s ease-in-out;}
#tab_1:checked ~ #tab_l1,
#tab_2:checked ~ #tab_l2 {background:#62a8dd;color:#E7E1DD;top:0px;}
.tabs_cont {background:#E7E1DD;-moz-border-radius:0 6px 6px 6px;-webkit-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;padding:10px 15px;position:relative;z-index:2;}
.tabs_cont > div {position:absolute;left:-9999px;top:0;opacity:0;-moz-transition:opacity .45s ease-in-out;-webkit-transition:opacity .45s ease-in-out;transition:opacity .45s ease-in-out;}
#tab_1:checked ~ .tabs_cont #tab_c1,
#tab_2:checked ~ .tabs_cont #tab_c2 {position:static;left:0;opacity:1;}
Код полностью не вставляется к вам, выложил его в текстовый файл
http://oneprog.ru/coment_oneprog.ru.txt
Вижу, что работает у тебя. Завтра засяду разбирать код и сделаю большую поправку в этой статье! 🙂
И большое спасибо за подсказку! 😉
Всегда пожалуйста=)
А можно и мне данный код, а то ваша ссылка не работает
Спасибо
Вернул ссылку, все работает.
Спасибо Вам огромное!!!!
И у меня есть отдельный рецепт 🙂 http://howmakeit.ru/vidzhet-sovmeshhennyx-kommentariev-bez-skriptov-na-css/ Может пригодится!
Александр, я вижу у вас заработала снова форма комментариев от фейсбука, не подскажете, как это у вас получилось? 🙂
Я создавал новый виджет, он имеет ряд преимуществ перед прежним, например, он работает без скриптов. И фейсбук там работает. На днях постараюсь написать статью. Но и минус есть у этого виджета я не могу в него вставить комментарии самого блога, только визуально можно это сделать стилями. 🙂
А если комментарии блога отдельно, а в виджет вставить только социалки? Нормально?
Если только совмещенный виджет комментариев социальных сетей, то всё отлично! Решение работает во всех броузерах, кроме IE 8 и версий ниже, но это старье уже мало у кого есть. И главное без скриптов, только на CSS 3. Постараюсь днями выпустить статью с рецептом. Там очень просто теперь… это со скриптом возникало много проблем.
Ура-ура-ура! Жду с нетерпением 🙂
Александр, кстати, было бы неплохо, если бы было оповещение на мои комментарии, вы конечно быстро отвечаете, но все равно чуточку неудобно 🙂
Спасибо!
А что, оповещения не приходят??? Последнее время многие почтовые бренды в спам всё укладывают. Поглядите там на всякий случай, прежде чем, я подумаю, что у меня эта штука не работает!
О, точно! Спасибо, все в порядке, нашла 🙂
Отличный блог, главное что нашла нужные ответы по виджетам коментов в соцсетях. Установила на своем блоге, все отлично работает. Спасибо тебе Александр.
А какая нагрузка? Говорят что довольно приличная. А вот про IE8 по-моему вы не правы. Этой древностью еще пользуется куча народа и про них забывать еще рано) А вот виджет класс, надо будет подумать и воткнуть в новый дизайн. Спасибо
Зачем всю работу делать вручную? Воспользуйтесь готовым решением — https://wordpress.org/plugins/vk-comments/
Денис, плагины — это для ленивых и ламеров.
Александр, ну, если вам нравится тратить на рядовые задачи кучу времени, то пожалуйста — изобретайте велосипед. Может вы тогда перейдете с WordPress на кастомный фрэймворк? Зачем вам удобный вордпрес, если вы не пользуетесь его плагинами? Пишите весь код вручную, вы же не ламер.
Денис, чтобы быть счастливым, человек должен заниматься тем, что ему нравиться. Я счастлив, чего и вам желаю! 😉
Александр, огромное спасибо за очень дельное решение со вкладками — давно такое искал для нового сайта. Поставил 3 закладки — комментарии блога, вконтакте и фейсбук. всё замечательно и плавно работает, но есть маленький недочёт — в основной вкладке комментариев блога отображаются только 2 последних комментария, хотя в коде присутствуют все. в чём может быть проблема? огромное спасибо за ответ!
Александр
Скорее всего ошибка в коде. Поглядите все ли тэги закрывающие див на месте. Часто не закрытый див становится причиной косяков.
Я себе тоже так сделала. Красота! Спасибо.
Рад за вас! 😉
Здравствуйте, Александр!
На одном из шаблоне я уже использовал этот замечательный способ, но на шаблоне который у меня сейчас установлен, при подключении CSS в файл style.css страница контента сжимается до размеров, которые указаны в Вашем коде CSS, а именно вот эта строчка:
#page {width:70%;margin:10px auto;}
Могли бы вы мне помочь с этой проблемой?
Алексей, попробуйте убрать данную строку. Или можно попробовать поменять значения в ней.
Здравствуйте! Отличная идея — комментировать через табы соцсетей. А удалось ли решить проблему, о которой вы написали в ноябре? Если ДА, то хотел бы воспользоваться Вашими услугами.
Дмитрий, я создал новую форму совмещенных комментариев (рецепт здесь — http://howmakeit.ru/vidzhet-sovmeshhennyx-kommentariev-bez-skriptov-na-css/) Попробуйте его в действии, он даже проще в освоении, чем описанный выше. И насколько я понял, фейсбук устранил многие косяки, во всяком случае, администрирование комментариев опять заработало.
Спасибо за рабочее решение! Добавил себе на сайт вконтакте, facebook и wordpress — получилась невнятная простыня. Теперь, после вашей статьи, все переделаю и тогда заживём. 🙂
Главное, чтобы комментаторы были, и вид комментариев их не отпугивал =)
Наконец-то переделал на своем сайте комментарии, но в процессе работы над совмещением нашел специальный jQuery модуль. «Tabs», который выполняет работу по переключению вкладок сам. Переделывать не стал, потому что плохо дружу со стилями. Но если кому надо, вот ссылка: . Этот модуль входит в поставку WordPress, так что лишних файлов копировать ниоткуда не надо.
Я уже со стилями привык, да и стили не грузят так сайт, как скрипты… Да еще querry конфликтует с плагинами разными временами.
Оставшаяся вкладка Остальное нас не интересует. Вконтакте и Фейсбук на сайт созданный на движке WordPress + узнали как добавить кнопки социальных сетей на сайт.
На данный момент иметь на сайте возможность добавления комментрий с помощью соц сетей на мой взгляд решает проблему активности на сайте. При увеличении вариантов добавить камент на сайт или блог повышает общение и создает диалог посетителей. Тут еще не мало важный фактор быстрая реакция алминистратора на комментрии.