Желаете научиться писать первоклассные статьи, которые будут приносить качественный трафик? Тогда скачайте мою БЕСПЛАТНУЮ книгу по ссылке справа.

Скачать книгу!
Главная страница » Настройка сайта » Красивые комментарии от соц. сетей

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

Здравствуйте, дорогие блогожане https://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. Обновление: Оказывается моя инструкция уже негодна :???: Скорее всего происходили какие-то обновления. Поэтому попробуйте другую инструкция здесь.

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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звёзд (1 голос, в среднем: 5.00 из 5)
Loading...

Понравилась статья? Поделитесь с другими!

Хотите получать оповещения о новых статьях на свою электронную почту?
Тогда введите свой E-mail адрес в форму ниже и нажмите Enter:
Оставлено комментариев: 54
  1. admin,

    Всегда пожалуйста, всё для читалей

    2012-10-09 в 2:42 пп |
    Ответить
  2. ruslan,

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

    2012-10-09 в 1:08 пп |
    Ответить
  3. Леонид,

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

    2012-10-13 в 10:09 дп |
    Ответить
    • admin,

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

      2012-10-13 в 2:43 пп |
      Ответить
  4. Антон,

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

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

    2012-10-15 в 9:39 дп |
    Ответить
    • admin,

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

      2012-10-15 в 2:13 пп |
      Ответить
  5. Роман,

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

    2012-10-19 в 2:31 дп |
    Ответить
    • admin,

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

      2012-10-19 в 3:37 пп |
      Ответить
  6. Максим,

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

    2012-11-14 в 4:05 пп |
    Ответить
    • admin,

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

      2012-11-14 в 4:23 пп |
      Ответить
      • Максим,

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

        2012-11-14 в 4:49 пп |
        Ответить
        • admin,

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

          2012-11-15 в 7:03 дп |
          Ответить
  7. Олег,

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

    2012-11-16 в 4:05 пп |
    Ответить
    • admin,

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

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

      2012-11-20 в 9:00 дп |
      Ответить
  8. Татьяна,

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

    2012-11-26 в 9:10 пп |
    Ответить
    • admin,

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

      2012-11-27 в 7:56 дп |
      Ответить
      • Татьяна,

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

        2012-11-27 в 8:26 дп |
        Ответить
        • admin,

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

          2012-11-27 в 8:37 дп |
          Ответить
  9. ирина,

    добрый день,

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

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

    2012-11-28 в 3:28 дп |
    Ответить
    • admin,

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

      2012-11-28 в 8:35 дп |
      Ответить
      • ирина,

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

        2012-11-28 в 8:49 дп |
        Ответить
        • admin,

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

          2012-11-28 в 9:43 дп |
          Ответить
          • ирина,

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

            2012-11-28 в 10:00 дп |
            Ответить
        • admin,

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

          2012-11-28 в 11:27 дп |
          Ответить
  10. Сергей,

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

    2013-02-03 в 7:35 дп |
    Ответить
  11. Сергей,

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

    2013-02-03 в 7:38 дп |
    Ответить
  12. bloggood,

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

    2013-02-11 в 9:08 пп |
    Ответить
    • admin,

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

      2013-02-12 в 8:49 дп |
      Ответить
  13. Roman,

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

    2013-03-25 в 1:35 пп |
    Ответить
  14. Татьяна Саксон,

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

    2013-04-15 в 4:53 пп |
    Ответить
    • admin,

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

      2013-04-17 в 9:56 дп |
      Ответить
  15. Татьяна Саксон,

    admin:

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

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

    2013-04-17 в 10:25 дп |
    Ответить
  16. Сашка,

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

    2013-07-12 в 5:18 пп |
    Ответить
  17. Natalia,

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

    2013-08-23 в 6:51 пп |
    Ответить
  18. RomanZmeu,

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

    2013-08-27 в 11:05 дп |
    Ответить
  19. Newport,

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

    2013-10-12 в 5:48 пп |
    Ответить
  20. Светлана,

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

    спасибо

    2013-11-11 в 4:52 дп |
    Ответить
  21. Мозгунова Ирина,

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

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

    2013-12-23 в 12:58 дп |
    Ответить
  22. Джеймс,

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

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

    2014-01-03 в 5:17 пп |
    Ответить
    • Константин Белан,

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

      2014-01-04 в 6:33 пп |
      Ответить
  23. Роман Рей,

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

    2014-01-05 в 8:44 пп |
    Ответить
  24. Денис Скрипник,

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

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

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

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

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

    Всё :-).

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

    2014-01-08 в 10:59 дп |
    Ответить
    • Константин Белан,

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

      2014-01-08 в 10:51 пп |
      Ответить
      • Денис Скрипник,

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

        2014-01-10 в 3:09 дп |
        Ответить
  25. Cветлана,

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

    2014-01-10 в 1:39 дп |
    Ответить
  26. Cветлана,

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

    2014-01-29 в 2:55 дп |
    Ответить
  27. Самсоненко Алексей,

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

    2014-03-26 в 1:48 дп |
    Ответить
  28. Виталий,

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

    2014-03-29 в 2:47 пп |
    Ответить
  29. Денис,

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

    2014-04-30 в 10:53 пп |
    Ответить
  30. Denis,

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

    2014-07-02 в 8:40 дп |
    Ответить
  31. Damp,

    Spasibo

    2015-01-14 в 11:22 пп |
    Ответить
  32. Александр,

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

    2015-03-31 в 5:08 пп |
    Ответить
  33. Павел,

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

    2015-06-26 в 10:07 пп |
    Ответить
  34. Василий,

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

    2015-12-04 в 9:25 пп |
    Ответить
Оставить свой комментарий:

Эффективный блоггинг и инфобизнес с Белан Константином

Станьте моим партнером

© 2012-2015 | При копировании материала активная ссылка на сайт-первоисточник обязательна!

▲ Наверх