Получайте секретные материалы проекта на свой E-Mail:

Красивые комментарии от соц. сетей

Здравствуйте, дорогие блогожане http://seokos.ru! Как и обещал, публикую пост спустя 3 дня. Пост будет на тему как сделать на wordpress комментарии от facebook и вконтакте. И не просто сделать, а сделать это красиво и профессионально. Приступаем!wordpress комментарии от вконтакте и facebookКомментарии будут находится не друг под другом, как делают многие, а находится в одном месте в разных вкладках. Т.е. будет выбор между комментариями facebook и комментариями вконтакте.

Оформление будет производится с помощью скрипта на jQuery. Первое, что мы сделаем — это просто добавим формы комментариев себе на блог.

WordPress комментарии от Вконтакте

Переходим на сайт Вконтакте.ру, а именно на страницу виджетов и заполняем нужные поля по примеру на рисунке ниже:

Нажимаем сохранить. И ниже видим окошко Код для вставки (рисунок ниже) и копируем от туда код. Верхня часть кода

<!-- Put this script tag to the <head> of your page -->
<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) следующее:

<?php the_permalink (); ?>

И должно получиться так:

<div data-href="<?php the_permalink (); ?>" data-num-posts="5" data-width="500"></div>

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

Оформление комментариев wordpress

Так... мы установили комментарии от Вконтакте и Facebook. Но, они страшно находятся друг под другом. Конечно можно оставить так, дело каждого, но я все-таки советую оформить их. Сделать на одном месте, но в разных вкладках.

Первое, что нужно сделать — это подключить jquery. Для этого скопируйте ниже код в header.php:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

После это качаем файл, размещаем его в корне темы и подключаем скрипт — вставкой кода в header.php:

<script language="javascript" type="text/javascript" src="<?php bloginfo ('template_url'); ?>/tab.js"></script>

Вставляем в single.php следующее:

<ul>
<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:

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; }

Ура! Хочу Вас поздравить, мы все сделали. Трудно было? Думаю нет. И код легкий, и замороч нет. А зато как полезно сэкономить место.

Почему таких комментариев нет у меня? — Ответ прост: потому что не считают нужным вообще делать эти wordpress комментарии вконтакте и facebook. Раньше стояли, но я решил убрать.

На последок посмотрите видео:

На этом у меня все. Спасибо за внимание! Всем до скорого!

P.S. Обновление: Оказывается моя инструкция уже негодна 😕 Скорее всего происходили какие-то обновления. Поэтому попробуйте другую инструкция здесь.

С уважением, Томский школьник!

Белан Константин Сергеевич

С уважением, Константин Белан.

Рабочая 634570 Россия, Томская обл., г. Томск, +7 952 160 36 17
Сделайте мне приятно - нажмите на любую из кнопок:
Подпишитесь на рассылку блога и получайте новые статьи на свою почту
Количество комментариев к данной статье: 56
  1. Всегда пожалуйста, всё для читалей

  2. Спасибо буду знать , как сделать

  3. Хотелось бы увидеть пример, что в результате получиться.

    • Обязательно сделаю, подпишитесь и Вы увидите первые!

  4. Ответить

    Да, пример бы был кстати, хотя бы скрин)

    С шириной наверное придется провозится немного чтобы подогнать под шаблон

    • С шириной особых проблем возникнуть не должно!) Если что можно обратиться к знающим. А пример будет) Обязательно в следующий статье, в виде скрина.

  5. А у меня тема не позволяет вносить изменения, а может не догоняю просто:(

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

  6. Ответить

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

    • Стандартный + немного переделанный вручную

      • Ответить

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

        • Говорят, что есть. Лично я не знаю ничего подобного

  7. Ответить

    Если зайти на сайт с правами администратора, то над формой комментариев ВК есть надпись администрирование. Нажимаешь на нее и открываются все комментарии со всех страниц от самых поздних до самых ранних. Чтобы просмотреть дальше, внизу надпись К предыдущим записям.

    • Олег, здравствуйте!

      Спасибо, что посетили мой блог. Я очень этому рад. Заходите еще.

  8. Ответить

    Что-то у меня ничего не получилось красиво сделать таким образом. Пробовала сама отыскать проблему, но все равно отображается два маркированных списка и внизу две формы соцсетей 🙁 Может подскажите в чем загвоздка? Подозреваю, что все дело в jquery...

    • Файл, который скачали, разместили в папку с шаблоном?

      • Ответить

        Да, поместила. Еще и слайдер поломался. Надо видимо разбираться с конфликтом jquery и wordpress. Везде предлагают разные варианты решения проблемы, буду пробовать, может что поможет...

        • Пробуйте. Буду проблемы, обращайтесь. Постараюсь помочь

  9. Ответить

    добрый день,

    Сделала всё, как написано в вашем блоге, но почему-то ничего не получилось.

    Как вы думаете, в чём может быть проблема? Буду очень благодарна за ответ.

    • Значит где-то допустили ошибку. Попробуйте еще раз, если не получится напишите в форму обратной связи.

      • Ответить

        Я уже пыталась так сделать — переделала всё уже 3 раза — результат плачевный. Он виден на странице, что я вам писала. Что делать теперь, вообще не представляю(((????

        • Как будет свободное время я обязательно помогу Вам. Ждите.

          • Ответить

            буду очень надеяться, что свободное время у вас появится сегодня — очень бы хотелось исправить ошибку и повесить на блог красивые комменты.

        • Оказывается моя инструкция уже негодна 😕 Скорее всего происходили какие-то обновления. Поэтому попробуйте другую инструкция на http://cospi.ru/kompaktnye-formy-kommentariev-chast-2/

  10. Ответить

    А у меня с комментариями от контакта проблемка возникла — дублируются почему-то. Т.е. две формы появляется и никак не могу сделать одну. Поэтому решил пока отказаться — когда-то решу эту проблему!

  11. Ответить

    У меня также стояли кнопки от Pluso, но я их решил убрать. Ведь и от твиттера , гугла, вконтакте и фейсбука вполне хватает. На другие пользователи практически не нажимают!

  12. Ответить

    А без ID не как нельзя????

    • bloggood, Никак! А чем собственно проблема?

  13. Ответить

    Спасибо, сделал себе наконецто комментарии с фейсбук!

  14. Ответить

    А у меня вопрос. Если стоит форма от ВК, уже не удалишь неугодный комментарий?

    • Татьяна Саксон, Есть такая возможность! Просто нажимаете на кнопку «В» в верху формы комментариев и там открывается админ-панель.

  15. Ответить

    admin:

    Татьяна Саксон, Есть такая возможность! Просто нажимаете на кнопку «В» в верху формы комментариев и там открывается админ-панель.

    Все, разобралась. Спасибо!

  16. Ответить

    Спасибо, у вас прочитал и все получилось . Форма работает

  17. Большое спасибо за информацию. Особенно ценно — то, что надо менять код для фэйсбука.

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

  19. Ответить

    Спасибо! Интересное решение.

  20. Ответить

    да, это пригодилось бы

    спасибо

  21. Ответить

    Только собиралась установить формы для комментариев, как, оказывается уже и инструкция устарела, да и сам Константин от этих форм комментариев отказался.

    Подожду лучших времён.

  22. Ответить

    Здравствуйте.

    Скажите, а когда выйдет новая инструкция?

    • Здравствуйте! Технологии с каждым днем меняются, а вместе с этим меняются и инструкции... Записал себе в блокнот, написать новую статью на 15-20 января. Буду рад Вас видеть!

  23. Вроде как не задумывался о вставке комментариев от контакта. Теперь задумался)

  24. Ответить

    А что поставил комментарии Вконтакте над обычными комментами и без Facebook?

    У меня вообще прикольно подключаются они:

    1. Активирую плагин Tabs.

    2. Активирую плагин Tree-comments.

    3. В настройках прописываю VK API id, выбираю расположение вкладок и другие настройки.

    Всё :-).

    Помню: когда использовал WordPress, тоже намучался с кодами в тех местах, где это вовсе должно было быть стандартным.

    • Я решил что Facebook'ом мало кто пользуется, поэтому решил не ставить форму комментариев от этой социальной сети.

      • Ответить

        Ну здесь я не могу согласиться. На моём блоге есть два коммента, да и у меня в Facebook много людей, другое дело, что среди твоих посетителей пользователей Facebook мало.

  25. Ответить

    Я форму от Facebook установила несколько месяцев назад,но через неё комменты не писали. А недавно оставили 2 комментария. И незадача — они отражаются на всех страницах под каждым постом. Под некоторыми — совершенно не в тему. Покопалась в интернете — оказывается у многих возникала такая проблема. Они задавали вопросы, но к сожалению никто им не ответил. Может вы знаете в чём причина и как это исправить?

  26. Ответить

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

  27. Жаль вот только спам в этих комментариях контролировать нельзя. К стати почисти комментарии с ВК под этой статьёй. Там куча спама.

  28. благодарю, очень нравится на других сайтах когда есть комментарии от социальных сетей, надеюсь и я сумею установить себе такие 😐

  29. Ответить

    А если выбирать, родные каменты оставить на блоге или каменты от вк? Чтобы выбрал?

  30. Ответить

    Спасибо Константин возьму на заметку!

  31. Ответить

    Spasibo

  32. Ответить

    У меня почему-то не получилось

  33. Очень полезная статья.Надо будет тоже украсить свои комментарии

  34. Ответить

    Интересно, спасибо за статью!

  35. Спасибо большое!

    Повезло быстро найти ответ на мой вопрос: «Как избавиться от одинаковых комментариев» (fb).

    Реально — спасибо!

  36. Ответить

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