Время чтения: 4 мин. 21 января 2015 в 12:33 Блог веб-разработчика
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...

Адаптивные Комментарии Вконтакте и Facebook

Недавно мне нужно было сделать комментарии от соц сетей Вконтакте и Facebook. Совместить комментарии я решил через Вкладки (табы). По итогу получилось:

Адаптивные Комментарии Вконтакте и Facebook

2015-01-21_094353

2015-01-21_0943523

Способ №1) Как делаем: (соблюдать порядок подключения скриптов )

1) В первую очередь нам потребуется популярная сегодня библиотека jQuery.

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

Копируем ее в папку с шаблоном блога и подключаем следующим кодом:

[php]

<script type="text/javascript" src="путь к файлу.js"></script>

[/php]

2) Вставляем скрипт в hedaer.php (данный скрипт позволяет нам переключаться между вкладками)

[php]

<script language="javascript" type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j(‘ul.tabs li’).css(‘cursor’, ‘pointer’);
$j(‘ul.tabs.tabs1 li’).click(function(){
var thisClass = this.className.slice(0,2);
$j(‘div.t1’).hide();
$j(‘div.t2’).hide();
$j(‘div.’ + thisClass).show();
$j(‘ul.tabs.tabs1 li’).removeClass(‘tab-current’);
$j(this).addClass(‘tab-current’);
});
});
</script>

[/php]

3. Затем вставляем код в том месте где нам нужны табы с комментариями:

[php]

<ul class="tabs tabs1">
<li class="t1 tab-current"><a><img src="https://stelmakh.com/wp-content/uploads/2012/11/vk.png" alt="vk" width="20" height="20" /> комментарии </a></li>
<li class="t2"><a><img src="https://stelmakh.com/wp-content/uploads/2012/11/fb.png" alt="fb" width="20" height="20" /> комментарии </a></li>
</ul>
<div class="t1">
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 5, width: "730", attach: "*"});
</script>
</div>
<div class="t2">
<?php echo do_shortcode("[fbcomments]"); ?>
</div>
[/php]

Читайте также:  Новый способ настройки целей в Contact Form 7

4. Добавляем в файл functions.php shortcode

[php]
add_shortcode(‘fbcomments’, ‘addFacebookComments’);
function addFacebookComments() {
global $post;
return ‘

<div class="google-ads-st"><div class="fb-comments" data-href="’ .get_permalink( $post->ID) .’" data-num-posts="5" data-width="650" data-colorscheme="light" data-mobile="false"></div></div>

<div class="google-ads-mobile"><div class="fb-comments" data-href="’ .get_permalink( $post->ID) .’" data-num-posts="5" data-width="200" data-colorscheme="light" data-mobile="true"></div></div>
‘;}
[/php]

5. Далее добавляем CSS

[php]

/* адаптивность комментариев */
@media only screen and (min-width:769px) {
.google-ads-mobile {
display:none;
}
}

@media only screen and (max-width: 767px) {
.google-ads-st {
display:none;
}
}

/* адаптивность комментариев */

/* tabs */
ul.tabs {
height: 25px;
line-height: 25px;
margin: 0 0 3px;
list-style: none;
}
* html ul.tabs {margin-bottom: 0;}
ul.tabs li {
float: left;
margin-right: 1px;
}
ul.tabs li a {
display: block;
padding: 0 13px 1px;
margin-bottom: -1px;
color: #444;
text-decoration: none;
cursor: pointer;
position: relative;
}
* html ul.tabs li a {float: left}
*+html ul.tabs li a {float: left}
ul.tabs li a:hover {
color: #F70;
background: #FFFFDF;
}
ul.tabs li.tab-current a {
color: #444;
background: #EFEFEF;
padding: 0px 13px 2px;
border: 1px solid #DDD;
border-bottom: 1px solid #EFEFEF;
}
div.t2,
div.t3,
div.t4 {
display: none;
}
div.t1,
div.t2,
div.t3,
div.t4 {
border: 1px solid #DDD;
background: #EFEFEF;
padding: 20px 20px;
}
/* end tabs */

Читайте также:  Урок 8. Технические моменты

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

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

[/php]

Способ №2) Как делаем: (соблюдать порядок подключения скриптов )

1 шаг — повтор
2 шаг — повтор
3 шаг — отличие:

[php]

<ul class="tabs tabs1">
<li class="t1 tab-current"><a><img src="https://stelmakh.com//wp-content/uploads/2012/11/vk.png" alt="vk" width="20" height="20" /> комментарии </a></li>
<li class="t2"><a><img src="https://stelmakh.com//wp-content/uploads/2012/11/fb.png" alt="fb" width="20" height="20" /> комментарии </a></li>
</ul>
<div class="t1">
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 5, width: "730", attach: "*"});
</script>
</div>
<div class="t2">

<div class="google-ads-st"><div class="fb-comments" data-href="’ .get_permalink( $post->ID) .’" data-num-posts="5" data-width="650" data-colorscheme="light" data-mobile="false"></div></div>

<div class="google-ads-mobile"><div class="fb-comments" data-href="’ .get_permalink( $post->ID) .’" data-num-posts="5" data-width="200" data-colorscheme="light" data-mobile="true"></div></div>

</div>
[/php]

4 шаг — не делаем вообще!
5 шаг — повтор.

Читайте также:  Удаляем and в WordPress 4.9+

На что прошу обратить внимание. Такие классы, как tabs1, t1, t2, должны быть уникальными. Т.е. если вы хотите создать, например, 2 отдельных блока с двумя вкладками в каждом, то для первого классами будут: tabs1, t1, t2, для второго: tabs2, t3, t4. Естественно, эти классы можно обозвать как угодно, главное — чтобы они не повторялись от блока к блоку.

При увеличении количества вкладок или блоков с вкладками, параметры в скрипт добавляются по аналогии.

Internet Explorer

Он, как всегда, отличился. Поскольку у тега ссылок во вкладках не используется параметр href (дабы при клике на них экран не прокручивался), IE6 и IE7 не воспринимают прописанные CSS-правила при наведении курсора на вкладку (не знаю почему, но в IE7 на моем блоге это работает).

Вывод

По итогу Вы получаете адаптивные комментарии Вконтакте и Facebook. Так же модуль вкладок можно использовать для Ваших нужд.

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

Давайте знакомиться!
Я в социальных сетях, добавляйтесь!
Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
Начать сотрудничество
Заполните поля ниже. Я лично перезвоню Вам в течении 15 минут для обсуждения деталей.

Введите ваше имя *

Введите контактный телефон *

Введите контактный Email для отправки точной стоимости

или позвоните мне по телефону
+7-499-70-300-44
Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

[contact-form-7 404 "Not Found"]
Рассчитать стоимость
Заполните поля ниже. Я свяжусь с Вами в течении 15 минут в рабочее время для обсуждения деталей

Введите контактный телефон *

Введите контактный e-mail *

Опишите ваш вопрос для того чтобы я мог рассчитать стоимость

Прикрепить файл,если необходимо

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Рассчитать стоимость
Заполните поля ниже. Я свяжусь с Вами в течении 15 минут в рабочее время для обсуждения деталей

Введите контактный телефон *

Введите контактный e-mail *

Опишите ваш вопрос для того чтобы я мог рассчитать стоимость

Прикрепить файл,если необходимо

Запись на бесплатный урок
Введите ваше имя, телефон и Skype логин и email.
Я свяжусь с Вами для уточнения времени прохождения урока.

Введите контактный телефон *

Введите ваше Skype логин *

Введите контактный E-mail *

Выберите программу

Введите ваше имя *

Введите контактный email *

Опишите ваш вопрос в произвольной форме

Прикрепить файл,если необходимо

Заказать сайт
Первые 14 дней бесплатно. Оставьте номер email и контактный телефон. Я лично перезвоню Вам в течении 10 минут, для обсуждения деталей.


Ваш email

Введите контактный телефон

Комментарий или вопрос

Проблемы с оплатой?
Опишите ситуацию. Когда возникает проблема? Что планируете купить?

Введите ваше имя *

Введите контактный email *

Что необходимо доработать

Скачать чек-лист
Заполните поля ниже. В течении 10 минут на указанный e-mail будет отправлена ссылка на скачивание чек-листа.

Введите ваше имя *

Введите контактный E-mail *

Предварительная запись для получения скидки
Введите ваше имя, телефон и Skype логин и email. Я свяжусь с Вами для уточнения деталей прохождения курса.

С кого числа Вам удобней начать обучение в 2019 году?

Введите контактный телефон *

Введите контактный E-mail *

Выберите программу

Курс SEO для интернет-магазинов

Из данного курса вы узнаете как превратить ваш интернет магазин рабочую лошадку, генерирующую по нарастающей поток клиентов из 300 человек в месяц, в 10 000 в день. С любым ассортиментом.

Особенности продвижения интернет-магазинов, специфика оптимизации. Как избавить себя от рутинной оптимизации каждой страницы и в 1 клик оптимизировать до 10 000 тыс товаров.

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

И да, все это урок за уроком я лично расскажу Вам и помогу внедрить.

Длительность обучения 30 дней.

Запись на бесплатный урок
Введите ваше имя, телефон и Skype логин и email.
Я свяжусь с Вами для уточнения времени прохождения урока.

Введите контактный телефон *

Введите ваше Skype логин *

Введите контактный E-mail *

Выберите программу

Курс SEO для корпоративных сайтов

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

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

И да, все это урок за уроком я лично расскажу Вам и помогу внедрить.

Длительность обучения 20 дней.

Запись на бесплатный урок
Введите ваше имя, телефон и Skype логин и email.
Я свяжусь с Вами для уточнения времени прохождения урока.

Введите контактный телефон *

Введите ваше Skype логин *

Введите контактный E-mail *

Выберите программу

Курс SEO для Landing Page

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

Курс научит Вас оптимизировать и продвигать одностраничные сайты.

И да, все это урок за уроком я лично расскажу Вам и помогу внедрить.

Длительность обучения 1 день.

Запись на бесплатный урок
Введите ваше имя, телефон и Skype логин и email.
Я свяжусь с Вами для уточнения времени прохождения урока.

Введите контактный телефон *

Введите ваше Skype логин *

Введите контактный E-mail *

Выберите программу

Курс SEO для самостоятельного обучения

В закрытом разделе моего сайта весь курс представлен в текстовом/видео формате. Если вы желаете обучаться самостоятельно по актуальным данным которые работают в данный момент (поскольку данную информацию я обновляю сразу по мере изменений от поисковых систем) этот курс для вас.

Вы шаг за шагом приведете свой сайт в порядок и сможете увеличить трафик на 500% минимум!!!

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

Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

Я работаю в городе Москва, но работу строю удаленно, и ваш город Абакан, Абинск, Аксай, Александровское, Алексин, Альметьевск, Анапа, Ангарск, Апшеронск, Арзамас, Армавир, Архангельск, Ачинск, Балаково, Балашиха, Балашов, Барнаул, Батайск, Белая Калитва, Белгород, Белореченск, Березники, Бийск, Благовещенск, Благодарный, Борисоглебск, Братск, Бронницы, Брюховецкая, Брянск, Бугульма, Буденновск, Бузулук, Великие Луки, Великий Новгород, Владивосток, Владикавказ, Владимир, Волгоград, Волгодонск, Волжский, Вологда, Волхов, Воркута, Воронеж, Воскресенск, Выборг, Выкса, Выселки, Гатчина, Геленджик, Георгиевск, Горно Алтайск, Грозный, Губкин, Гудермес, Гуково, Гусь Хрустальный, Десногорск, Дзержинск, Димитровград, Дмитров, Домодедово, Донецк, Ейск, Екатеринбург, Елец, Ессентуки, Железногорск, Железногорск Красноярский край, Железнодорожный, Зеленоград, Зеленокумск, Иваново, Ивантеевка, Ижевск, Изобильный, Ипатово, Иркутск, Йошкар Ола, Казань, Калуга, Каменск Шахтинск, Камышин, Каневская, Кашира, Кемерово, Кинешма, Кириши, Киров, Клин, Клинцы, Ковров, Коломна, Комсомольск на Амуре, Кореновск, Королёв, Кострома, Котлас, Красногорск, Краснодар, Красноярск, Крымск, Кстово, Кузнецк, Курган, Курганинск, Курск, Кущевская, Лабинск, Ленинградская, Ленинск Кузнецкий, Ливны, Липецк, Лобня, Лысьва, Лыткарино, Люберцы, Москва, Магнитогорск, Майкоп, Междуреченск, Миасс, Миллерово, Минеральные воды, Михайловск, Мичуринск, Можайск, Мончегорск, Морозовск, Мостовской, Мурманск, Муром, Мытищи, Набережные Челны, Назрань, Нальчик, Находка, Невинномысск, Нерюнгри, Нефтекамск, Нефтекумск, Нефтеюганск, Нижневартовск, Нижнекамск, Нижний Новгород, Нижний Тагил, Новоалександровск, Новокузнецк, Новомосковск, Новороссийск, Новосибирск, Новочеркасск, Новошахтинск, Норильск, Ноябрьск, Нягань, Одинцово, Октябрьский, Омск, Орёл, Оренбург, Орехово Зуево, Орск, Отрадная, Павловская, Павловский Посад, Пенза, Пермь, Петрозаводск, Петропавловск Камчатский, Подольск, Приморско Ахтарск, Прокопьевск, Псков, Пушкино, Пятигорск, Раменское, Реутов, Россошь, Ростов на Дону, Рыбинск, Рязань, Санкт Петербург, Сальск, Самара, Саранск, Саратов, Саянск, Светлоград, Северодвинск, Северская, Сергиев Посад, Серов, Серпухов, Славянск на Кубани, Смоленск, Солнечногорск, Сочи, Ставрополь, Староминская, Старый Оскол, Стерлитамак, Сургут, Сызрань, Сыктывкар, Таганрог, Тамбов, Тверь, Темрюк, Тимашевск, Тихвин, Тихорецк, Тобольск, Тольятти, Томск, Трудобеликовский, Тула, Тюмень, Улан Удэ, Ульяновск, Усинск, Усолье Сибирское, Уссурийск, Усть Илимск, Усть Лабинск, Уфа, Ухта, Фрязино, Хабаровск, Ханты Мансийск, Чебоксары, Челябинск, Череповец, Чехов, Чита, Шахты, Шелехов, Щёлково, Электросталь, Энгельс, Южно Сахалинск, Якутск, Ярославльи регионАмурская область, Камчатский край, Приморский край, Республика Саха Якутия, Сахалинская область, Хабаровский край, Кировская область, Нижегородская область, Оренбургская область, Пензенская область, Пермский край, Республика Башкортостан Октябрьский и Нефтекамск, Республика Башкортостан Уфа, Республика Марий Эл, Республика Мордовия, Республика Татарстан, Республика Татарстан Казань, Республика Удмуртия, Республика Чувашия, Самарская область, Саратовская область, Ульяновская область, Архангельская область, Вологодская область, Мурманская область, Новгородская область, Псковская область, Республика Карелия, Республика Коми Воркута и Усинск, Республика Коми Сыктывкар, Республика Ингушетия, Республика Кабардино Балкария, Республика Северная Осетия Алания, Ставропольский край, Чеченская Республика, Алтайский край, Забайкальский край, Иркутская область, Кемеровская область, Красноярский край, Красноярский край Норильск, Новосибирская область, Омская область, Республика Алтай, Республика Бурятия, Республика Хакасия, Томская область, Курганская область, Свердловская область, Тюменская область, Ханты Мансийский АО, Челябинская область, Ямало Ненецкий АО, Белгородская область, Брянская область, Владимирская область, Воронежская область, Ивановская область, Калужская область, Костромская область, Курская область, Липецкая область, Орловская область, Рязанская область, Смоленская область, Тамбовская область, Тверская область, Тульская область, Ярославская область, Волгоградская область, Краснодарский край, Республика Адыгея, Ростовская область,не имеет значения.