• Главная
  • Автор
  • Лучший хостинг
  • Оставить Заявку
Блог на wordpress своими руками
Блог на wordpress своими руками from Sun Sunich
  • Главная
  • Автор
  • Лучший хостинг
  • Оставить Заявку
Home  /  Своими руками  /  Как совместить комментарии WordPress, Facebook и Вконтакте?
Своими руками

Как совместить комментарии WordPress, Facebook и Вконтакте?

Александр Алексеенко 30.11.2012 facebook, wordpress, блог, вконтакте, комментарии 131 комментарий 19683 Просмотр

Три в одном или как своими руками сделать аккуратную форму для комментариев WordPress, Facebook и Вконтакте

Всем привет дорогие читатели, сегодня я продолжу тему, начатую мной в одной из прошлых статей — Как сделать комментарии вконтакте и фейсбук для каждой страницы блога? В прошлый раз, я установил на свой блог комментарии Вконтакте и Фейсбук, после завершения установки все мои комментарии смотрелись вот так:

Как установить комментарии wordpress + facebook + вконтакте три в одном?

А теперь представьте картину — статья удалась и во всех трех комментирующих виджетах: 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 + facebook + вконтакте три в одном?

 

TimeWeb - мощный хостинг для вашего сайта

P.S. Если у вас возникли вопросы создания и монетизации блога на worpdress,
и вы хотите обратиться ко мне за помощью, то загляните на эту страничку.



С наилучшими пожеланиями, Ваш Sun Sunich — автор блога на wordpress своими руками

Вы всегда можете сказать мне ->>


Поделиться с друзьями...


Facebook
Вконтакте
Google+
Twitter



Об авторе

Александр Алексеенко

Дорогие Читатели! Представляю вам "Блог на wordpress своими руками" - как коллекцию моего личного опыта по созданию блогов. Буду рад, если мои открытия станут полезными и для Вас! =)

Похожие статьи

  • Как закрыть ссылки авторов комментариев от индексации?

    05.08.2017
  • Достала всплывающая реклама в браузере — есть решение как ее убрать!

    09.08.2014
  • Красивые кнопки социальных сетей своими руками

    21.07.2014

131 комментарий

  1. Green oak Ответить
    30.11.2012 at 08:24

    Саша-умничка, отличная идея, думаю ей воспользоваться 🙂

    • Sun Sunich Ответить
      30.11.2012 at 08:33

      Я и сам рад, что потихоньку расту. Всё больше убеждаюсь, что не зря сделал этот блог, где самому интересно совмещать теоретические и практические вопросы — как сделать свой блог на wordpress! 🙂

      • Green oak Ответить
        14.12.2012 at 07:05

        Да! Удачи во всем! 🙂
        Жду новых креативных идей … например, можно ли сделать такими же подобными закладками форму в боковую панель, куда я могу вставить то, что мне нужно. Например: теги, комментируемые статьи, последние статьи — в одной форме, чтобы не занимать много места в сайдбаре…?

        • Sun Sunich Ответить
          14.12.2012 at 08:52

          Вы моя муза для воплощения идей! Действительно, данный скрипт можно будет видоизменить и найти ему применение в сайдбаре!!! Буду над этим работать! 😉

  2. Княгиня Ответить
    30.11.2012 at 13:42

    Я давно о подобной конструкции подумывала, но не могу решиться: комментарии от соцсетей на странице выглядят как инородное тело. Ничего не могу с собой сделать…

    • Sun Sunich Ответить
      30.11.2012 at 13:54

      Привет Княгиня — в таком варианте, вроде симпатично вставлены, их и не видно, кому не надо… 🙂

  3. MrWildWolf666 Ответить
    10.12.2012 at 23:45

    Приветствую всех!

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

    Когда-то очень давно видел где-то, но потом не смог найти. В целом, нет проблем написать подобное самому, но зачем изобретать велосипед, если в данной статье все описано и сделано отлично!

    Единственное, что можно здесь добавить, так это эффект при открытии тех или иных комментариев.

    Спасибо автору!

    • Sun Sunich Ответить
      11.12.2012 at 10:20

      Я рад, что мой блог полезен для других людей. И Вам спасибо!

  4. Рашида Гарифулина Ответить
    14.12.2012 at 00:11

    КРУТО! Понравилось, завтра с утра займусь, спасибо автору!!! А вот фон комментариев, он везде будет белый или зависит от фона сайта?

    • Sun Sunich Ответить
      14.12.2012 at 05:50

      Рашида, фон можно поменять в файле стиля в разделе отвечающем за комментарии… Однозначно сказать где не могу, потому что у каждой темы свой стиль — надо Вам самостоятельно поискать.

  5. Art_gud Ответить
    17.12.2012 at 17:34

    ай маладца, я только заметил, что ты новый блог запустил. Спасибо, решение это по-любому возьму, а то у меня с комментированием вообще не айс. =) Поздравляю так же с рождением дочери, как то до вашего туристического блога добираюсь постоянно, а вот коммент оставить забываю!

    • Sun Sunich Ответить
      17.12.2012 at 18:52

      Артем, этому блогу уже полгода скоро будет :))) И за поздравления благодарю! 🙂

      • Art_gud Ответить
        17.12.2012 at 19:49

        Ну вот как-то не уследил =)

        • Sun Sunich Ответить
          17.12.2012 at 20:32

          Ну, теперь уже не потеряешься! 🙂

  6. Руслан Ответить
    20.12.2012 at 02:48

    Всегда хотел такую формку комментариев. Жаль что вы только для себя объяснили.

    • Sun Sunich Ответить
      20.12.2012 at 04:58

      Руслан, я обычно пишу то, что я делаю на этом сайте, и при этом выкладываю все шаги подробно, чтобы другие люди смогли сделать у себя подобное. Так что, если есть желание — алгоритм установки и подробности кода изложены выше! Если есть вопросы, с радостью отвечу.

      • Руслан Ответить
        20.12.2012 at 05:16

        Дело в том, что у меня на локалке еще сайт новый. Этот код в файле коммент снизу дописывать или на чистый записать? И куда именно вставлять коды от социалок чтобы они везде как вордпрессовские были? Заранее спасибо.

        • Sun Sunich Ответить
          20.12.2012 at 05:23

          Руслан, Вы внимательно почитайте статью, скопируйте предложенные коды в куда-то и внимательно их просмотрите и сопоставьте с текстом статьи. Например, я пишу Теперь подробнее — файл comments.php я обновляю целиком. Для начала я буквально все, кроме… Это же реальная инструкция к применению, не только у меня, но и на любом блоге wordpress. Пошагово с начала статьи пройдите все действия и будем Вам праздник! Только, если меняете файлы, не забывайте делать резервные копии, ведь бывает иногда что-то идет не так! 😉 Коды социалок куда вставлять, тоже написано в одной из предыдущих статей, а в этой статье есть ссылка на нее! 😉

          • Руслан Ответить
            20.12.2012 at 05:47

            Спасибо! Как сделаю, отпишу результат!

            • Sun Sunich Ответить
              20.12.2012 at 07:31

              Удачной установки виджета комментариев!

      • Евгения Ответить
        05.09.2013 at 16:38

        Sun Sunich спасибо за статью, все разжевано, НО в конце что делать немного не понятно. Я дошла до того как создать форму для своих будущих комментариев. Как ее создать не пойму! Получается последний шаг совершенно не расписан. Как задать цвет, что куда вставить не понятно. В общем я запуталась. Помогите пожалуйста.

        • Александр Алексеенко Ответить
          06.09.2013 at 12:10

          Евгения, последний код, данный в статье — как раз и есть создание формы комментариев, а выше я описал — куда и как его вставить в файл comments.php
          Если взять этот код прямо с примера, то у вас на сайте должна появиться сама форма с переключающимися табами, между комментариями wordpress, facebook и вконтакте. Если форма появилась, то далее, нужно просто вставить части кода, отвечающие за вывод самих комментариев

  7. Truper Ответить
    23.12.2012 at 13:17

    Хорошо бы, для удобства, оформить эти табы в качестве плагина.
    Но, видимо, никто не удосужился 🙁
    Придется делать этот плагин самому.

    • Sun Sunich Ответить
      23.12.2012 at 13:47

      Может вдвоем! Я давно хотел сделать что-то полезное — типа плагина! 🙂 Пиши, буду рад сотрудничать!

  8. Green oak Ответить
    23.12.2012 at 16:27

    Cаша, а как насчет моего вопроса с совмещенными закладками в боковом сайдбаре, получается??

    • Sun Sunich Ответить
      23.12.2012 at 16:38

      Получается, уже на нашем тревел блоге ifewithoutdrugs.org реализовано в сайдбаре второй сверху виджет! 😉 Надо теперь статью по этому поводу сделать… Хотя технологии те же, что и в комментах, только нижний код вставляю в сайдбар… 🙂

  9. Руслан Ответить
    27.12.2012 at 08:10

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

    • Sun Sunich Ответить
      28.12.2012 at 07:32

      Руслан, я же сказал тебе — плагин NoSpamNX решит все проблемы… Зачем тебе капча — пугать своих читателей, если хочешь, чтобы твой сайт комментировали — не стоит делать ни регистрацию, ни капчу

      • Руслан Ответить
        28.12.2012 at 07:34

        Ну ладно. А что насчет в УРЛ вкладки category ??? Стоит ли ее убирать?

        • Sun Sunich Ответить
          28.12.2012 at 08:08

          Я тебе в личку ответил… почему-то :)))

          • Руслан Ответить
            29.12.2012 at 03:31

            Не одно, так другое. ((( Теперь после того как создал форму, на странице «карта сайта» и «контакты» внизу появилась эта форма комментариев. Из них вордпрессовская пустая, а вот вконтакте и фэйсбук комментируются. Отключал на страницах убрав в редактировании галочку разрешить записи. Можно ли как-то убрать с этих двух страниц формы комментирования?

            • Sun Sunich Ответить
              29.12.2012 at 14:46

              Руслан… Я конечно, человек с фантазией… но не мешало бы увидеть твое творчество, чтобы понять, что к чему! :)))

              • Руслан Ответить
                29.12.2012 at 15:17

                Все отправил на почту адрес.

              • Sun Sunich Ответить
                23.04.2013 at 12:27

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

  10. Ольга Ответить
    21.01.2013 at 12:01

    Здравствуйте! Спасибо заьо такое решение. Очень понравилось, но установить не получиось. Всё делала по шагам вроде бы правильно, в итоге появилась такая строчка вверху страницы: class=»single single-post postid-637 single-format-standard custom-background»> Что я не так сделала? Спасибо.

    • Sun Sunich Ответить
      21.01.2013 at 15:09

      Ольга, к сожалению в ближайшие 10 дней, я на очень шатком интернете… и учитывая это не смогу Вам помочь. Если у Вас хватит терпения подождать меня. Напишите мне еще раз в начале февраля. Я думаю, судя по ошибке, Вы в файле стиля, что-то напутали. А вообще, это решение не становиться на все темы, из моих трех блогов, на одном оно вообще не работает. Это от темы зависит, в некоторых случаях, нужно дополнительно в коде ковыряться!

  11. Oleg Ответить
    25.01.2013 at 02:31

    Круто, работает, только у меня сайд бар поплыл после того как код вставил в comments.php, как я только не воротил но так и не получилось (. Пришлось снять.

    • Sun Sunich Ответить
      26.01.2013 at 08:10

      Олег, у меня тоже сайдбар танцевал… Подумал немного… и оказалось: почему-то не хватало одного закрывающего тега DIV в конце всей композиции с комментами! И всё встало на свои места! 😉 Удачи.

  12. Рейнер Ответить
    26.01.2013 at 14:15

    Отличный у тебя Блог! Много полезной и ценной инфы, много креативных решений.

    Сегодня же попробую совместить на своём сайте комментарии, код предельно, прост а значит я смогу настроить дизайн вкладок под общую гамму сайта. Да кстати, нашол тебя через гугл по запросу: «вордпресс комментарии вконтакте и фейсбук» . Былобы неплохо вступить в твою группу ВК но вот, кнопки не могу найти, после сегодняшняшного обновления блога.

    • Sun Sunich Ответить
      26.01.2013 at 15:17

      Привет, благодарю за добрые слова. Да, я как раз сейчас работаю над восстановлением всех сделанных мной функций — благо сам написал инструкции по их созданию… 🙂

  13. Geleosan Ответить
    08.02.2013 at 04:04

    Как здорово, ты уже разобрался в этом вопросе, а я как раз хотел у себя наконец-то это сделать. Достала длинная простыня комментариев, хотелось сделать вкладки 🙂 Надо будет найти время и заморочится.

    А ты плагин не искал для этого? Может есть что-то уже…

    • Sun Sunich Ответить
      08.02.2013 at 11:19

      Олег, ручками делать не сложно… Плагин, уже кто-то здесь в комментах мне предлагал написать… Если бы у меня был хоть малый опыт делать это… может Диме написать (4втае)… 🙂 Они с Аджеем делали плагины…

      • Geleosan Ответить
        08.02.2013 at 17:07

        Не, я имел ввиду, что уже кто-то сделал что-то в этом роде. Типа плагин с табами, знаю есть такие для сайдбаров, а вот просто чтобы табы в любое место шаблона поставить, не видел. Ручками да можно сделать, в принципе это даже и не сложно, но плагины таки удобнее большинству.

        • Sun Sunich Ответить
          08.02.2013 at 17:34

          Да, я тебя понял Олег. Я не встречал такого плагина. Сам стараюсь использовать как можно меньше плагинов. Хотя технически — их быстрее восстановить. Вот у меня тема слетела и все ручки не дойдут вернуть все то, что было сделано руками на этом блоге… 🙂

  14. Geleosan Ответить
    10.02.2013 at 15:01

    Кстати, селектор #page нужно убрать из кода css, так как ты его потом не используешь в приведенном коде.

    И второй момент. У меня например в comments.php немного иначе все, и у меня код расположен не только внутри ))))

    • Sun Sunich Ответить
      10.02.2013 at 17:17

      Да, Я тебя понимаю, поэтому и написал, что в разных темах по-разному, у меня на одном нашем блоге вообще не получилось установить этот виджет… Нужно подумать головой… Я просто привел пример — как это можно сделать… 🙂 И не говорил, что он универсальный… 🙂

  15. Geleosan Ответить
    10.02.2013 at 15:01

    стерлись теги, не только внутри дива комментс.

    • Sun Sunich Ответить
      10.02.2013 at 17:18

      Главное понимать, какая часть кода отвечает за комменты… А файлы во всех темах разные…

  16. Алексей Ответить
    30.03.2013 at 15:29

    Привет! Спасибо за статью!!! 2 дня копался в инете, всё пробовал, эксперементировал! Твоя статья: прям самое то оказалась! Всё остальное лажа!

    Легко и с первого раза всё получилось! Только не понял куда вставлять вот это:
    Далее я вставляю javascript между тегами и , этот скрипт будет переключать комментарии с вкотнакте на фейсбук, или вордпресс.

    В какой файл? У меня в cooments и header нету » и «… (((

    • Алексей Ответить
      30.03.2013 at 15:32

      нету тегов head

      • Павел Мрыкин Ответить
        12.04.2013 at 12:00

        Тэг обычно находится в файле header.php

    • Sun Sunich Ответить
      12.04.2013 at 12:09

      Да, я имел ввиду вставляю скрипт между тегами head в файл header.php

  17. Котовский Ответить
    24.04.2013 at 14:03

    Сан Саныч, большое спасибо за статью — крайне полезная штука!

    ЗЫ. Эх, если бы ты всякие кодерские фишки, которые не осилить обычному блогоюзеру постил с периодичностью раз в три дня…. цены бы тебе не было. 🙂

    • Sun Sunich Ответить
      24.04.2013 at 17:11

      Витя, полезные штуки находят своего читателя…. Каждый день такого не изобретешь 🙂

  18. Котовский Ответить
    24.04.2013 at 18:06

    Да, Саша, согласен. Одна такая статья стоит двадцати блогов, наполненных рерайтом общедоступного материала.

    Кстати, а в таком виде (табами) хоть кто-то из соцсетей комментирует? А то когда они все по очереди идут, тогда люди их видят, а тут нужно специально залезть, и чтобы тебе кто из других читателей ответил, он должен специально открыть эти табы, чтобы посмотреть, есть там чьи-то комменты или нет. Надо в метрике в вебвизоре посмотреть, кликает ли на них хоть кто-то.

    ЗЫ. А вот если бы на табе был ярлычек, по типу красной цифры на иконке почты у айфона, которая показывает, сколько уже комментов на скрытых табах — то юзабилити было бы значительно выше. Но это наверно не так просто сделать…

    • Sun Sunich Ответить
      24.04.2013 at 21:25

      Да, Вить ты прав, эффективность использования вложенных комментов ниже, чем всё одним полотном, но выглядит более эстетично! 🙂
      Идея с количеством комментов в каждом табе — мне нравиться, и даже API есть вроде по всем… Я буду думать в этом направлении… Так как уж начал копать эту тему, можно и дальше развить. Спасибо за идею.

  19. Антон Ответить
    12.05.2013 at 01:18

    Спасибо, ценная информация!
    А отчего решили не применять этот прием совмещения на lifewithoutdrugs.org? Так же аккуратнее выглядит…

    • Sun Sunich Ответить
      12.05.2013 at 13:58

      На моем трэвел-блоге я провожу эксперимент сейчас — какая форма комментариев более действенная, комментарии совмещенным виджетом или одним полотном. Я об этом позже расскажу своим читателям. 🙂

      • Антон Ответить
        12.05.2013 at 14:24

        Ну тогда даже подпишусь :))

        • Sun Sunich Ответить
          12.05.2013 at 17:12

          Вообще, пока я еще думаю, как усовершенствовать виджет с комментариями, пока он явно проигрывает полотну комметнариев по кликабельности, но выигрывает по эстетике внешнего вида. 🙂

          • Антон Ответить
            14.05.2013 at 23:12

            Эх, так я и думал… интуитивно как-то 🙂 Я вообще заметил, что люди чаще пользуются теми комментами, какие уж есть «по умолчанию». Лишнего клика не потерпят 🙂
            Может быть дело пойдет веселее — если просто при наведении курсора на ссылку «вконтакте», форма вконтактовского комментария сама собой покажеться (без клика)?
            ИМХО так все будет гораздо дружелюбнее выглядеть 🙂

            • Sun Sunich Ответить
              15.05.2013 at 04:31

              Да, Антон, люди ленивые бывают, и при этом множество блогов используют замороченную капчу или регистрацию, и комментаторов это не останавливает… 🙂

              • Антон Ответить
                15.05.2013 at 10:44

                Здравое суждение! Возможно, действительно, более чем я прав оратор, писавший чуть выше. Людям надо видеть — во всех ли «разделах» комментов есть комменты… и будут ли они прочитаны. Вот посужу по себе: для меня важно, чтобы коммент был прочтен как можно большим количеством людей, и соответственно я буду писать в комментах «поумолчанию» даже не смотря на то что для этого мне надо ввести мыло и имя, что очень лениво делать 🙂 Хотя мог бы писать через вконтакте — ведь я там уже залогинен…

                • Sun Sunich Ответить
                  15.05.2013 at 12:45

                  К сожалению, вконтакте пока не может предоставлять статистику по количеству комментариев. Недавно переписывался два дня со службой поддержки Вконтакте и так и не получил нормального ответа на вопрос — как вывести в любом месте сайта количество комментариев вконтаке к данной странице? Кстати, Антон, может их замучить! Напиши тоже в службу поддержки… Может они созреют ответить! 🙂

  20. Антон Ответить
    14.05.2013 at 23:02

    Я тут заметил, что на всех сайтах, использующих комменты от Вконтакта, никак не хочет подгружаться скрипт под именем im960 , висит в вечном pending… Меня это раздражает!!! Хоть валерьянку пить…
    А Вы не замечали? Не отнесутся ли плохо поисковики к такому «тормозу»? 🙂
    И вообще — это такой глюк или фича? НА самом сайте Вконтакте тоже подобный тормозной скрипт есть )

    • Sun Sunich Ответить
      15.05.2013 at 04:34

      Собираюсь заняться оптимизацией скорости загрузки блога, напишу об этом. Со скриптом, тобой упомянутым, лично не знаком, но при проверке и оптимизации, все тормоза постараюсь выявить и поддать корректировки, насколько это возможно! 🙂

  21. Зима в Таиланде Ответить
    15.05.2013 at 17:30

    Саша, спасибо большое за идею, давно уже надо совместить все комментирования и Google+, как сделал ты в последний момент на этом блоге!

  22. Игорь Ответить
    16.05.2013 at 21:31

    Александр у вас коменты соцсетей , не помещаются в рамку, справа срезается содержимое, и сама рамка формы так же не видна, браузеры Хром, Опера.

    • Sun Sunich Ответить
      17.05.2013 at 09:47

      Игорь, это только у Вас так, видимо стоят настройки монитора особенные, например для слабого зрения, при этом масштаб страницы увеличен. У меня всё выглядит хорошо, тестировал на разных компах, с разных броузеров.

  23. Александр Ответить
    18.05.2013 at 16:51

    Здравствуйте, уважаемый Sun Sunich.
    Не подскажите, как вставить формы для комментариев, если использовать в посте вкладки плагина wordpress post tabs ??
    Пробовал обойтись без плагина, но когда подключаю в header.php jquery получается конфликт с важным мне плагином — ротатором картинок.
    Подскажите пожалуйста.

    • Sun Sunich Ответить
      19.05.2013 at 18:09

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

      • Александр Ответить
        20.05.2013 at 00:29

        wordpress post tabs это простой плагин для вставки табов в пост.
        Мне нужно было, чтобы в одной из вкладок можно было оставлять отзывы.
        Разобрался. Все просто. Не подумал сразу, что можно просто вставить вызов комментария php кодом в посте.
        По умолчанию в вордпрессе нельзя так делать, код воспринимается как обычный текст.
        Решается это путем вставки специального скрипта в function.php. А в посте, где нужно вывести php код, нужно вставлять специальный шорткод.
        Ссылку на первоисточник, где нашел решение не ставлю =)

        • Sun Sunich Ответить
          20.05.2013 at 04:19

          Я так понял, что решение найдено! 🙂 Поздравляю! Для вызова в теле страницы или в сайдбаре функции php есть специальный плагин, хотя его наверняка можно разобрать… Как и все другие плагины… 🙂

  24. Geleosan Ответить
    07.07.2013 at 15:27

    ну и чем закончился твой эксперимент по улучшению комментирования? Что лучше табы или сплошная лента?

    • Sun Sunich Ответить
      07.07.2013 at 15:55

      Олежка, это пока борьба между эстетическим видом и практической реализацией совмещенных комментариев. Самый практичный и компромиссный вариант представлен на нашем трэвел-блоге в данный момент! 🙂

      • Geleosan Ответить
        07.07.2013 at 16:01

        Я бы не сказал, что он компромиссный, это как раз один из двух вариантов, когда просто сплошной лентой )))

        • Sun Sunich Ответить
          07.07.2013 at 16:08

          Ну я там заголовки ВК и FB выделил, мне кажется так немного заметнее они стали! 🙂

  25. Мурзик Ответить
    20.07.2013 at 13:53

    Я со своим шаблоном вообще не могу ничего вставить(( Приходится все плагинами делать(( У него все какое-то другое и синг пшп и хедр.

    • Sun Sunich Ответить
      20.07.2013 at 18:38

      Мурзик, такого быть не может… Темы и шаблоны бывают разные, часто, бывает, что скрипт квери, который переключает табы с одних комментариев на другие конфликтует со скриптами самой вызванными самой темой, я уже устранял подобные конфликты. Скорее всего, и Ваша проблема не сложнее! 🙂

  26. RomanZmeu Ответить
    27.08.2013 at 15:27

    Спасибо. Пригодилось для моего блога

    • Александр Алексеенко Ответить
      27.08.2013 at 16:30

      Да, совмещенные комментарии — штука полезная. 🙂

  27. Евгений Ответить
    24.09.2013 at 10:11

    Очень полезный пост, огромное спасибо
    только мне пришлось убрать строку из хедера

    библиотеки уже по умолчанию подключены

    • Александр Алексеенко Ответить
      24.09.2013 at 15:10

      Да, в некоторых темах библиотеки подключены уже, а где-то нет!

  28. Игорь Ответить
    18.10.2013 at 14:29

    Спасибо огромное за урок, Александр. Обязательно воспользуюсь! Меня интересует, как «прикрутить» комментарии от Google+ вот так же, как сделано это на Вашем блоге?

  29. Игорь Ответить
    20.10.2013 at 21:01

    Вопрос уже не актуален, т.к. прочитав еще раз статью, нашел ответ на свой вопрос. Первый раз пропустил. Спасибо за подробное описание!

  30. OneProg Ответить
    25.10.2013 at 03:35

    Здравствуйте, смотрю у вас тоже вкладка фейсбук перестала работать как у меня=D. Выносил в другое место код фейсбука — работает, а в данной форме нет. Может у вас получится поправить….

  31. Быть здоровым легко Ответить
    28.10.2013 at 13:58

    А вот у меня почему-то перестала отображаться форма комментариев от фейсбука. Когда захожу под именем фан страницы, то показывает, а под логином нет. В чем причина, подскажите?

    У вас тоже я не вижу формы комментариев для фейсбука.
    Вот скрин:

    • Александр Алексеенко Ответить
      01.11.2013 at 19:31

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

  32. Быть здоровым легко Ответить
    28.10.2013 at 14:00

    Вот дублирую скрин:

  33. Быть здоровым легко Ответить
    28.10.2013 at 14:01

    Кодом не получается вставить. Даю ссылку http://vahe-zdorovye.ru/wp-content/uploads/Kak-sovmestit-kommentarii-Wordpress-Facebook-i-Vkontakte-Blog-na-wordpress-svoimi-rukami.jpg

  34. Татьяна Ответить
    29.10.2013 at 13:19

    Красота 🙂 И снова спасибо! Все получилось 🙂

    • Татьяна Ответить
      29.10.2013 at 13:27

      ой, только у меня комментарии сначала идут, а потом в самом низу вкладки. А у вас идут вкладочки, а в них комментарии. Я где-то ошиблась да?

  35. Lucky Ответить
    02.11.2013 at 20:59

    Sun Sunich, приветствую!!!
    вопрос, с фейсбуком, не хочет в форме отображаться, под ней или над ней без проблем….в форме нет, ты с этим не разбирался еще, ….если да то подскажи пожл. решение. Спасибо!!!

    • Александр Алексеенко Ответить
      02.11.2013 at 21:21

      Пока не нашел ответ на этот вопрос, по-ходу, в стилях кроется проблема. Потому что, технически всё работает, но не отображается.

  36. OneProg Ответить
    05.11.2013 at 21:29

    Здравствуйте!
    Я нашел выход по поводу совмещения комментариев и в добавок без скриптов, все на CSS3. Вот думаю поделюсь идеей.
    Можете посмотреть как выглядит форма комментариев на сайте <a href="http://oneprog.ru/&quot; 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;}

    • OneProg Ответить
      05.11.2013 at 21:40

      Код полностью не вставляется к вам, выложил его в текстовый файл

      • OneProg Ответить
        05.11.2013 at 21:41

        http://oneprog.ru/coment_oneprog.ru.txt

        • Александр Алексеенко Ответить
          05.11.2013 at 22:43

          Вижу, что работает у тебя. Завтра засяду разбирать код и сделаю большую поправку в этой статье! 🙂

        • Александр Алексеенко Ответить
          05.11.2013 at 22:44

          И большое спасибо за подсказку! 😉

          • OneProg Ответить
            05.11.2013 at 23:03

            Всегда пожалуйста=)

    • Sasha Ответить
      18.04.2014 at 13:46

      А можно и мне данный код, а то ваша ссылка не работает

      Спасибо

      • OneProg Ответить
        18.04.2014 at 13:59

        Вернул ссылку, все работает.

        • Sasha Ответить
          18.04.2014 at 14:10

          Спасибо Вам огромное!!!!

          • Александр Алексеенко Ответить
            18.04.2014 at 15:43

            И у меня есть отдельный рецепт 🙂 http://howmakeit.ru/vidzhet-sovmeshhennyx-kommentariev-bez-skriptov-na-css/ Может пригодится!

  37. chusika Ответить
    14.11.2013 at 22:19

    Александр, я вижу у вас заработала снова форма комментариев от фейсбука, не подскажете, как это у вас получилось? 🙂

    • Александр Алексеенко Ответить
      15.11.2013 at 06:56

      Я создавал новый виджет, он имеет ряд преимуществ перед прежним, например, он работает без скриптов. И фейсбук там работает. На днях постараюсь написать статью. Но и минус есть у этого виджета я не могу в него вставить комментарии самого блога, только визуально можно это сделать стилями. 🙂

      • chusika Ответить
        15.11.2013 at 10:56

        А если комментарии блога отдельно, а в виджет вставить только социалки? Нормально?

        • Александр Алексеенко Ответить
          15.11.2013 at 11:47

          Если только совмещенный виджет комментариев социальных сетей, то всё отлично! Решение работает во всех броузерах, кроме IE 8 и версий ниже, но это старье уже мало у кого есть. И главное без скриптов, только на CSS 3. Постараюсь днями выпустить статью с рецептом. Там очень просто теперь… это со скриптом возникало много проблем.

          • chusika Ответить
            15.11.2013 at 13:54

            Ура-ура-ура! Жду с нетерпением 🙂
            Александр, кстати, было бы неплохо, если бы было оповещение на мои комментарии, вы конечно быстро отвечаете, но все равно чуточку неудобно 🙂
            Спасибо!

            • Александр Алексеенко Ответить
              15.11.2013 at 13:56

              А что, оповещения не приходят??? Последнее время многие почтовые бренды в спам всё укладывают. Поглядите там на всякий случай, прежде чем, я подумаю, что у меня эта штука не работает!

              • chusika Ответить
                15.11.2013 at 14:00

                О, точно! Спасибо, все в порядке, нашла 🙂

  38. Alia Ответить
    10.03.2014 at 16:13

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

  39. Сергей Ответить
    29.03.2014 at 07:43

    А какая нагрузка? Говорят что довольно приличная. А вот про IE8 по-моему вы не правы. Этой древностью еще пользуется куча народа и про них забывать еще рано) А вот виджет класс, надо будет подумать и воткнуть в новый дизайн. Спасибо

  40. Денис Ответить
    14.04.2014 at 19:53

    Зачем всю работу делать вручную? Воспользуйтесь готовым решением — https://wordpress.org/plugins/vk-comments/

    • Александр Алексеенко Ответить
      15.04.2014 at 05:08

      Денис, плагины — это для ленивых и ламеров.

      • Денис Ответить
        15.04.2014 at 09:00

        Александр, ну, если вам нравится тратить на рядовые задачи кучу времени, то пожалуйста — изобретайте велосипед. Может вы тогда перейдете с WordPress на кастомный фрэймворк? Зачем вам удобный вордпрес, если вы не пользуетесь его плагинами? Пишите весь код вручную, вы же не ламер.

        • Александр Алексеенко Ответить
          15.04.2014 at 11:23

          Денис, чтобы быть счастливым, человек должен заниматься тем, что ему нравиться. Я счастлив, чего и вам желаю! 😉

  41. Алекс Ответить
    22.04.2014 at 21:56

    Александр, огромное спасибо за очень дельное решение со вкладками — давно такое искал для нового сайта. Поставил 3 закладки — комментарии блога, вконтакте и фейсбук. всё замечательно и плавно работает, но есть маленький недочёт — в основной вкладке комментариев блога отображаются только 2 последних комментария, хотя в коде присутствуют все. в чём может быть проблема? огромное спасибо за ответ!
    Александр

    • Александр Алексеенко Ответить
      23.04.2014 at 05:45

      Скорее всего ошибка в коде. Поглядите все ли тэги закрывающие див на месте. Часто не закрытый див становится причиной косяков.

  42. Татьяна Ответить
    20.05.2014 at 16:05

    Я себе тоже так сделала. Красота! Спасибо.

    • Александр Алексеенко Ответить
      20.05.2014 at 17:13

      Рад за вас! 😉

  43. Алексей Ответить
    05.06.2014 at 18:30

    Здравствуйте, Александр!
    На одном из шаблоне я уже использовал этот замечательный способ, но на шаблоне который у меня сейчас установлен, при подключении CSS в файл style.css страница контента сжимается до размеров, которые указаны в Вашем коде CSS, а именно вот эта строчка:
    #page {width:70%;margin:10px auto;}
    Могли бы вы мне помочь с этой проблемой?

    • Александр Алексеенко Ответить
      06.06.2014 at 18:14

      Алексей, попробуйте убрать данную строку. Или можно попробовать поменять значения в ней.

  44. Дмитрий Ответить
    20.06.2014 at 11:46

    Здравствуйте! Отличная идея — комментировать через табы соцсетей. А удалось ли решить проблему, о которой вы написали в ноябре? Если ДА, то хотел бы воспользоваться Вашими услугами.

    • Александр Алексеенко Ответить
      20.06.2014 at 13:12

      Дмитрий, я создал новую форму совмещенных комментариев (рецепт здесь — http://howmakeit.ru/vidzhet-sovmeshhennyx-kommentariev-bez-skriptov-na-css/) Попробуйте его в действии, он даже проще в освоении, чем описанный выше. И насколько я понял, фейсбук устранил многие косяки, во всяком случае, администрирование комментариев опять заработало.

  45. Евгений Ответить
    19.11.2014 at 08:34

    Спасибо за рабочее решение! Добавил себе на сайт вконтакте, facebook и wordpress — получилась невнятная простыня. Теперь, после вашей статьи, все переделаю и тогда заживём. 🙂

    • Александр Алексеенко Ответить
      19.11.2014 at 18:35

      Главное, чтобы комментаторы были, и вид комментариев их не отпугивал =)

      • Евгений Ответить
        27.11.2014 at 10:41

        Наконец-то переделал на своем сайте комментарии, но в процессе работы над совмещением нашел специальный jQuery модуль. «Tabs», который выполняет работу по переключению вкладок сам. Переделывать не стал, потому что плохо дружу со стилями. Но если кому надо, вот ссылка: . Этот модуль входит в поставку WordPress, так что лишних файлов копировать ниоткуда не надо.

        • Александр Алексеенко Ответить
          27.11.2014 at 11:27

          Я уже со стилями привык, да и стили не грузят так сайт, как скрипты… Да еще querry конфликтует с плагинами разными временами.

  46. Алина Ответить
    20.04.2017 at 02:56

    Оставшаяся вкладка Остальное нас не интересует. Вконтакте и Фейсбук на сайт созданный на движке WordPress + узнали как добавить кнопки социальных сетей на сайт.

  47. Артем Ответить
    23.06.2017 at 11:31

    На данный момент иметь на сайте возможность добавления комментрий с помощью соц сетей на мой взгляд решает проблему активности на сайте. При увеличении вариантов добавить камент на сайт или блог повышает общение и создает диалог посетителей. Тут еще не мало важный фактор быстрая реакция алминистратора на комментрии.

Добавить комментарий

Отменить ответ

Подпишись на блог!

Рубрики

  • Своими руками10
  • Защита блога1
  • Эксперименты8
  • Монетизация блога9
  • Установка Wordpress1
  • Настройка Wordpress6
  • Плагины Wordpress10
  • Внешний вид блога12
  • Оптимизация блога8
  • Статистика блога1
  • Полезные программы2
  • Продвижение в соц. сетях10
  • Железо1
  • В гостях у блога1

Мой Блог Вконтакте

Мой Блог в Google+

Статистика Блога

LiveInternet: показано количество просмотров и посетителей

Рекомендую лично!

TimeWeb - один из лучших хостингов в соотношении цена - качество.


Мои статьи помогли Вам! =)
Скажите ->>
Блог на wordpress своими руками
Александр Алексеенко (Sun Sunich) © Copyright 2012-2016. Блог на Wordpess своими руками