Уроки по программированию

Резиновая ширина виджета комментариев (вконтакте, facebook)

Резиновая ширина виджета комментариев вконтакте, facebook нужна для тех кто использует резиновые, либо адаптивные шаблоны. На (рисунке 1)  можно увидеть ширину виджета комментариев vk по умолчанию она составляет 520 px

Резиновый блок комментариев вконтакте
Если вам вдруг захотелось задать ширину в процентах чтобы виджет растягивался по ширине блока div, то достаточно прописать следующий код в css файле:

Для вконтакте это будет:

#vk_comments,
#vk_comments iframe {
	width: 100% !important;
}

Для facebook это будет:

.fb-comments, 
.fb-comments span, 
.fb-comments iframe {
	width: 100% !important;
}

Результат будет выглядеть вот так

Резиновый блок комментариев вконтакте

Комментарии к статье

  • Аватарка 16.06.2013

    Ура! Отлично работает! Большое спасибо!)

    • Аватарка 16.06.2013

      Не за что=) а я думал мой блог никто не читает

  • Аватарка 05.10.2013

    Чувак, расскажи как сделать, чтобы комменты были такими вкладками

    • Аватарка 06.10.2013

      Вкладки делать конечно интересно, но практика показывает что это не удобно для пользователей сайта. советую использовать http://hypercomments.com.

  • Аватарка 02.11.2013
    Ответить Денис Коновалов

    подскажи как hypercomments по ширине изменить, я установил на WordPress и Виджет принял 100% ширины родительского блока.

    • Аватарка 02.11.2013

      Здравствуйте, точно не знаю как, но думаю должно сработать зайдите в панель управления wordpress -> комментарии -> hypercommets в правом верхнем углу выберите раздел Настройка там должен быть параметр Блок вставки кода виджета здесь нужно указать id вашего блока у меня к примеру #comments_widget. Теперь перейдите в ваш шаблон и вставьте блок

      в то место где должны выводиться комментарии. Теперь используя класс comment-block вы можете задать ширину в css добавив параметр width. Например comment-block{ width:500px; }

  • Аватарка 29.12.2013
    Ответить Наиль Ханнанов

    спасибо!

  • Аватарка 25.03.2014
    Ответить legallaz

    Такой вопрос. Есть ли у вас? Вкладки комментариев, как на скриншоте???

    • Аватарка 25.03.2014

      Готового урока нет, но такие вкладки делаются просто. Отправьте письмо через блок «помощь населению» отвечу

  • Аватарка 24.04.2014
    Ответить Vladimir Rak

    слушай мне очень нужен твой совет подскажи как вот это вссе точно настроить для фэцчбука где встаить это код

  • Аватарка 15.01.2015

    Супер, спасибо огромное, помогло(:smile:)

  • Аватарка 27.03.2015

    Гаф )

  • Аватарка 12.07.2015
    Ответить Djamal N

    помогли , спс

  • Аватарка 26.08.2015
    Ответить Кирилл

    Спасибо!!!!!

  • Аватарка 27.08.2015
    Ответить Дмитрий

    а можно ли изменить цвет виджета?

  • Аватарка 20.10.2015
    Ответить Артем Травло

    отлично. спасибо.

  • Аватарка 20.10.2015
    Ответить Александр

    Что то у меня не работает,

  • Аватарка 30.10.2015
    Ответить Аксения Дыбовская

    спасибо 🙂

  • Аватарка 13.03.2016

    спасибо

  • Аватарка 23.03.2016
    Ответить Евгений

    тестовый

  • Аватарка 03.06.2016
    Ответить Сергей

    Круто, спасибо

  • Аватарка 03.06.2016
    Ответить Алёнка Эскандерова

    легко и просто, спасибо!!

  • Аватарка 03.09.2016
    Ответить Aleks Pokas

    Как его записать в .less файл, или так же без изменений?
    #vk_comments,
    #vk_comments iframe {
    width: 100% !important;
    }

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

Ваш адрес email не будет опубликован.