logo у меня все покупают г. Москва

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

21 января 2015 в 12:33 Без категории

Недавно мне нужно было сделать комментарии от соц сетей Вконтакте и 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]

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 */

#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 шаг – повтор.

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

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

Internet Explorer

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

Вывод

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

Адаптивные Комментарии Вконтакте и Facebook #8642398 Адаптивные Комментарии Вконтакте и Facebook #2642598 Адаптивные Комментарии Вконтакте и Facebook #3357202 Адаптивные Комментарии Вконтакте и Facebook #9357002 Адаптивные Комментарии Вконтакте и Facebook #15356802 Адаптивные Комментарии Вконтакте и Facebook #21356602 Адаптивные Комментарии Вконтакте и Facebook #27356402 Адаптивные Комментарии Вконтакте и Facebook #33356202 Адаптивные Комментарии Вконтакте и Facebook #39356002 Адаптивные Комментарии Вконтакте и Facebook #45355802 Адаптивные Комментарии Вконтакте и Facebook #51355602 Адаптивные Комментарии Вконтакте и Facebook #57355402 Адаптивные Комментарии Вконтакте и Facebook #63355202 Адаптивные Комментарии Вконтакте и Facebook #69355002 Адаптивные Комментарии Вконтакте и Facebook #75354802 Адаптивные Комментарии Вконтакте и Facebook #81354602 Адаптивные Комментарии Вконтакте и Facebook #87354402 Адаптивные Комментарии Вконтакте и Facebook #93354202 Адаптивные Комментарии Вконтакте и Facebook #99354002 Адаптивные Комментарии Вконтакте и Facebook #105353802 Адаптивные Комментарии Вконтакте и Facebook #111353602 Адаптивные Комментарии Вконтакте и Facebook #117353402 Адаптивные Комментарии Вконтакте и Facebook #123353202 Адаптивные Комментарии Вконтакте и Facebook #129353002 Адаптивные Комментарии Вконтакте и Facebook #135352802 Адаптивные Комментарии Вконтакте и Facebook #141352602 Адаптивные Комментарии Вконтакте и Facebook #147352402 Адаптивные Комментарии Вконтакте и Facebook #153352202 Адаптивные Комментарии Вконтакте и Facebook #159352002 Адаптивные Комментарии Вконтакте и Facebook #165351802

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


Оставить заявку
Для экономии вашего времени на все вопросы отвечают программисты/сеошники/маркетологи, а не секретари или офис-менеджеры. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

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

Ваш вопрос:

Рассчитать стоимость
Для экономии вашего времени на все вопросы отвечают программисты/сеошники/маркетологи, а не секретари или офис-менеджеры. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

Прикрепить файл:

Ваш вопрос:

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

Заказать обратный звонок
Для экономии вашего времени на все звонки отвечают программисты, а не секретари или офис-менеджеры. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

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

Как с вами связаться? *

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

Создадим сайт по картинке или вашему макету
Цена: от 2,900 руб. Я бесплатно рассчитаю стоимость реализации сайта в течение 15 минут.
Как это работает? После расчета стоимости я отпиваюсь вам и вы принимаете решение о дальнейшем сотрудничестве.
Задать вопрос
Опишите вопрос своими словами. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

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

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

Комментарий

There are no products