Последние:

Vavik96

Интернет-дайджест для вебмастеров и фотографов.

Web 

Установка виджета комментариев социальных сетей

admin 0 Комментариев , , ,

В этой записи будет рассказано как установить на сайте виджеты комментариев от социальных сетей Вконтакте, Facebook и Google+.

Также будут показаны два варианта того, как компактно разместить эти виджеты в блоке со вкладками: то есть встроенные комментарии wordpress и виджеты комментариев Вконтакте, Facebook и Google+ будут находится каждый на своей вкладке.

Виджет комментариев Вконтакте

  • Переходим на страничку vk.com/dev/Comments
  • В выпадающем списке «Сайт/приложение» выбираем пункт «Подключить новый сайт»
  • Заполняем поля:
    • Название сайта: пишем любое название
    • Адрес сайта: пишем url, я вписал «https://elims.org.ua»
    • Базовый домен: домен, я вписал «elims.org.ua»
    • Тематика: можно не выбирать
  • Жмем «Сохранить»и вводим капчу, в результате Вы увидите что-то вроде этого:

Виджет комментариев Вконтакте

  • Копируем код для вставки в файл comments.php в Вашем шаблоне в то место, где выводятся комментарии. Сам код состоит из двух частей:
    • Часть с «<!— Put this script tag to the <head> of your page —>» — объявление внешнего js-скрипта:
      • Вконтакте рекомендует установить между тегами <head></head>, то есть в файл header.php
      • Вы можете не парится и вставить весь код в одно место: в comments.php
      • Либо прислушаться к рекомендациям оптимизаторов и обьявить внешний скрипт в самом низу страницы, то есть в файле footer.php
    • Часть которая идет после текста «<!— Put this div tag to the place, where the Comments block will be —>» — код вывода блока комментариев — его нужно установить именно в то место файла comments.php, где вы хотите их выводить.

Виджет коментариев Facebook

  • Проходим по ссылке developers.facebook.com/apps
  • Создаем новое приложение: жмем зеленую кнопку «+ Add a New App» в правом верхнем углу
  • Среди предложенных платформ выбираем «Веб-сайт»
  • В поле ввода под надписью «Quick Start for Website» пишем что-то вроде: «комментарии для моего сайта»
  • Во всплывшем окне выбираем подходящую категорию для своего сайте и жмем кнопку Create App ID
  • В нижнем поле «Site URL» можем указать url сайта.
  • Далее переходим по ссылке developers.facebook.com/docs/plugins/comments
  • В поле URL to comment on указываем url-сайта и жмем кнопку «Get Code»
  • В результате должны увидеть что-то вроде этого:

Виджет коментариев Facebook

  • Как и с Вконтакте код состоит из двух частей: объявление внешнего js скрипта и сама форма комментирования.
    • Первая часть — объявление внешнего скрипта: можете вставить в header.php, в comments.php или в самый низ страницы — в footer.php
    • Вторую часть — форму комментирования прописывайте в файле шаблона, который отвечает за вывод комментариев: comments.php.

В facebook виджете есть один нюанс: с таким кодом у facebook виджета на всех страницах комментарии будут сливаться в один поток. То есть в виджете будут отображаться комментарии со всех страниц домена, а не для каждой страницы отдельно. Чтобы комментарии отображались для каждой страницы отдельно нужно во второй части кода, там где у меня

data-href="http://elims.org.ua"

вместо url главной страницы «http://elims.org.ua» писать url страницы на которой находится посетитель.

В результате для WordPress вторая часть кода будет выглядеть вот так:

<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-num-posts="5"></div>

или так для любого сайта:

<div class="fb-comments" data-href="http://<?php echo $_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>" data-num-posts="5"></div>

Виджет комментариев Google+

С виджетом комментариев от Google+ все просто, нужно лишь прописать в файл comments.php следующий код:

<script src="https://apis.google.com/js/plusone.js"></script>
<div class="g-comments"
 data-href="<?php the_permalink(); ?>"
 data-width="665"
 data-first_party_property="BLOGGER"
 data-view_type="FILTERED_POSTMOD">
</div>

Виджет комментариев Google+

Если эти три виджета добавить к себе на сайт, то это будет выглядеть вот так:

Размещение виджетов во вкладках используя jquery

"Размещение

Мне больше нравится вариант, если эти формы комментирования раскидать по вкладкам, чтобы это выглядело вот так:

Для этого сначала прописываем где-либо (например в header.php) вот этот javascript код:

<script type="text/javascript" 
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
 $(function(){
  $('dl.tabs dt').click(function(){
   $(this).siblings().removeClass('selected').end().next('dd').andSelf().addClass('selected');
  });
 });
</script>
Если jquery уже определен в шаблоне то можно прописать только вот это:
<script type="text/javascript">
 $(function(){
  $('dl.tabs dt').click(function(){
   $(this).siblings().removeClass('selected').end().next('dd').andSelf().addClass('selected');
  });
 });
</script>

Если не заработает, то вместо знака доллара «$» пишем «jQuery» вот так:

<script type="text/javascript">
 jQuery(function(){
  jQuery('dl.tabs dt').click(function(){
   jQuery(this).siblings().removeClass('selected').end().next('dd').andSelf().addClass('selected');
  });
 });
</script>

В файле style.css пишем этот код:

#page {width:70%;margin:10px auto;}
.tabs {width:100%;overflow:hidden;font-size:0.9em;margin:2em 0;zoom:1;padding:1px;position:relative;}
.tabs dt {float:left;line-height:2;height:2em;background:#e8f0f5;border:1px solid #e8f0f5;border-bottom:0;padding:0 1em;position:relative;left:35px;margin-right:1px;cursor:pointer;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;}
.tabs dt:hover {background-color:#bfdff4;}
.tabs dt.selected {border-color:#b0d0e9;background:#fff;z-index:3;cursor:auto;}
.tabs dd {background:#fff;display:none;float:right;width:100%;margin:2em 0 0 -100%;position:relative;z-index:2;}
.tabs dd.selected {display:block;}
.tabs .tab-content {border:1px solid #b0d0e9;padding:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;}

В  файле comments.php пишем вот это:

<div id="comments"> 
 <h3><font color="ff0000">Ваши комментарии к статье:</font></h3>
 <dl class="tabs">
  <dt>Wordpress</dt>
  <dd>
   <div class="tab-content">
    <?php if ( have_comments() ) : ?> 
     <h2 class="comments-title">
      <?php
       printf( _n( 'One thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', get_comments_number(), 'twentytwelve' ),
       number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
      ?>
     </h2> 
     <ol class="commentlist">
      <?php wp_list_comments( array( 'callback' => 'twentytwelve_comment', 'style' => 'ol' ) ); ?>
     </ol><!-- .commentlist --> 
     <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
      <nav id="comment-nav-below" class="navigation" role="navigation">
       <h1 class="assistive-text section-heading"><?php _e( 'Comment navigation', 'twentytwelve' ); ?></h1>
       <div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentytwelve' ) ); ?></div>
       <div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentytwelve' ) ); ?></div>
      </nav>
     <?php endif; // check for comment navigation ?>
     <?php if ( ! comments_open() && get_comments_number() ) : ?>
      <p class="nocomments"><?php _e( 'Comments are closed.' , 'twentytwelve' ); ?></p>
     <?php endif;?> 
    <?php endif; // have_comments() ?> 
    <?php comment_form(); ?> 
   </div>
  </dd>
  <dt>ВКонтакте</dt>
  <dd>
   <div class="tab-content"> 
    <div id="vk_comments"></div>
    <script type="text/javascript">
     VK.Widgets.Comments("vk_comments", {limit: 10, width: "580", attach: "*"});
    </script> 
   </div>
  </dd>
  <dt class="selected">FaceBook</dt>
  <dd class="selected">
   <div class="tab-content"> 
    <div class="fb-comments" data-href="<?php the_permalink(); ?>" data-num-posts="2" data-width="580"></div> 
   </div>
  </dd> 
  <dt>Google+</dt>
  <dd>
   <div class="tab-content"> 
    <script src="https://apis.google.com/js/plusone.js"></script>
    <div class="g-comments"
     data-href="<?php the_permalink(); ?>"
     data-width="580"
     data-first_party_property="BLOGGER"
     data-view_type="FILTERED_POSTMOD">
    </div> 
   </div>
  </dd> 
 </dl> 
</div>

Части с определением внешних js-скриптов для Вконтакте и Facebook в вышеуказанном скрипте не присутствуют, то есть их нужно описать отдельно, например в файле header.php

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

Размещение виджетов во вкладках без jquery

Выглядеть будет вот так:

Как установить социальные комментарии

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

Код для файла style.css:

.tabscomment {position:relative;margin:40px 0;} 
.tabscomment > label {
 display:block;float:left;font-family:Verdana;padding:5px 0;
 font-weight: bold;color:#5d7fa3;position:relative;text-align:center;z-index:1;
 background:#f5f5dc; /* Цвет фона кнопок */
 border-radius:6px 6px 0 0; /* Радиус закругления кнопок */
 cursor:pointer; /* Вид курсора при наведении на кнопки */
 top: 2px;/* Высота подъема кнопки при наведении курсора */
 width:100px; /* Длинна кнопок */
 margin:0 5px 0 0; /* Отступы от кнопок */ 
}
.tabscomment > input {position:absolute;left:-9999px;} 
.tabscomment > label:hover {font-family:Verdana;font-weight:bold;background:#E7E1DD;top:0;-webkit-transition: all 0.2s ease-in-out;} 
#tab_1:checked ~ #tab_l1, #tab_2:checked ~ #tab_l2, #tab_3:checked ~ #tab_l3, #tab_4:checked ~ #tab_l4 {
 font-family:Verdana;font-weight:bold;background:#5d7fa3;color:#fffffe;top:0px;
} 
.tabs_cont {
 background:#f7f7f7;border-radius:0 6px 6px 6px;padding:10px 15px;position:relative;z-index:2;
} 
.tabs_cont > div {position:absolute;left:-9999px;top:0;opacity:0;opacity .45s ease-in-out;} 
#tab_1:checked ~ .tabs_cont #tab_c1, #tab_2:checked ~ .tabs_cont #tab_c2, #tab_3:checked ~ .tabs_cont #tab_c3, #tab_4:checked ~ .tabs_cont #tab_c4 {
 position:static;left:0;opacity:1;
}
.comments-title {background:#577aa2;font-family:verdana;font-weight:bold;color:#fffffe;padding:5px;border-radius:10px 0 10px 0;}
.fb-mod {font-face:verdana;color:#5d7fa3;font-size:8pt;}
a {
 outline: none;
 color: #5d7fa3;
}
a:hover {
 color: #dae2e8;
}
Код для файла comments.php:

<h3><font size="5">Ваши комментарии к статье:</font></h3>
<section class="tabscomment">
 <input id="tab_1" type="radio" name="tab" checked="checked" />
 <input id="tab_2" type="radio" name="tab" />
 <input id="tab_3" type="radio" name="tab" />
 <input id="tab_4" type="radio" name="tab" />
 <label for="tab_1" id="tab_l1">Wp</label>
 <label for="tab_2" id="tab_l2">Вк</label>
 <label for="tab_3" id="tab_l3">Fb</label>
 <label for="tab_4" id="tab_l4">G+</label>
 <div style="clear:both"></div>
 <div class="tabs_cont">
  <div id="tab_c1">
   <div id="comments" class="comments-area">
    <?php if ( have_comments() ) : ?>
     <h2 class="comments-title">
      <?php
       printf( _n( 'One thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', get_comments_number(), 'twentytwelve' ),
       number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
      ?>
     </h2>
     <ol class="commentlist">
      <?php wp_list_comments( array( 'callback' => 'twentytwelve_comment', 'style' => 'ol' ) ); ?>
     </ol><!-- .commentlist -->
     <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
      <nav id="comment-nav-below" class="navigation" role="navigation">
       <h1 class="assistive-text section-heading"><?php _e( 'Comment navigation', 'twentytwelve' ); ?></h1>
       <div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentytwelve' ) ); ?></div>
       <div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentytwelve' ) ); ?></div>
      </nav>
     <?php endif; // check for comment navigation ?>
     <?php if ( ! comments_open() && get_comments_number() ) : ?>
      <p class="nocomments"><?php _e( 'Comments are closed.' , 'twentytwelve' ); ?></p>
     <?php endif; ?>
    <?php endif; // have_comments() ?>
    <?php comment_form(); ?>
   </div>
  </div>
  <div id="tab_c2">
   <div id="vk_comments"></div>
   <script type="text/javascript">
    VK.Widgets.Comments("vk_comments", {limit: 10, width: "580", attach: "*"});
   </script>
  </div>
  <div id="tab_c3">
   <div class="fb-comments" data-href="<?php the_permalink(); ?>" data-numposts="5" data-width="580"></div>
  </div>
  <div id="tab_c4">
   <script src="https://apis.google.com/js/plusone.js"></script>
   <div class="g-comments"
    data-href="<?php the_permalink(); ?>"
    data-width="580"
    data-first_party_property="BLOGGER"
    data-view_type="FILTERED_POSTMOD">
   </div>
  </div>
 </div>
</section>

Опять таки  в этом коде нет определения внешних скриптов для Вконтакте и Facebook, их нужно прописать отдельно

 

Источник

Вам также может понравиться

Оптимизируем WordPress header и удаляем лишние элементы

admin 2

Оптимизация изображений в формате GIF

admin 0

Css анимация при скролле в обе стороны

admin 0

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.