+7-499-70-300-44
заказать звонок
Заказать обратный звонок

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

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

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

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

Спасибо за оставленную заявку
Ожидайте звонка

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

Блог вебмастера

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

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

2015-01-21_094353

2015-01-21_0943523

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

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

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

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


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


2) Вставляем скрипт в hedaer.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>

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


<ul class="tabs tabs1"> 
<li class="t1 tab-current"><a><img src="http://stelmakh.com/wp-content/uploads/2012/11/vk.png" alt="vk" width="20" height="20" /> комментарии </a></li> 
<li class="t2"><a><img src="http://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>

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

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

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


/* адаптивность комментариев */
@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;
}

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

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


<ul class="tabs tabs1"> 
<li class="t1 tab-current"><a><img src="http://stelmakh.com//wp-content/uploads/2012/11/vk.png" alt="vk" width="20" height="20" /> комментарии </a></li> 
<li class="t2"><a><img src="http://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>

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

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

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

Internet Explorer

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

Вывод

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

Другие статьи

Заказать обратный звонок

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

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

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

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

Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

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

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

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для обсуждения деталей,
необходимых для расчета стоимости проекта.

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

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

Введите адрес сайта, который нуждается в продвижении *

Указать точное время звонка

или позвоните нам по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

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

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

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Хочу так же
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей.

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

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

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
[contact-form-7 404 "Not Found"]
Спасибо за оставленную заявку
Ожидайте звонка
Заказ СЕО продвижения
Введите ваше имя и телефон.
Я лично свяжусь с Вами для обсуждения деталей.

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

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

Введите ваш Скайп *

Спасибо за оставленную заявку
Ожидайте звонка