Установка социальных кнопкок со счетчиками на главной

На днях обнаружил что Яндекс доработал свой сервис «Поделиться» в соцсетях - api.yandex.ru/share/ : теперь можно устанавливать социальные кнопки со счетчиками. Такой блок будет отображать сколько раз поделились вашей записью в той или иной социальной сети. Сразу же решил установить себе такой вид кнопок на один из своих подблогов.

Яндекс поделиться в соцсети: счетчики

Мало того мне захотелось чтобы на главных страницах, где одновременно отображается 10 постов, тоже были установлены такие блоки социальных кнопок со счетчиками. При этом хотелось чтобы эти счетчики показывали данные не о странице на которой они находятся, а о постах возле которых они размещены.

То есть на главных страницах отображаются 10 постов, под каждым постом находится по одному блоку социальных кнопок (итого 10 блоков) и каждый блок социальных кнопок должен показывать счетчики о том посте, возле которого находится. При клике должна публиковаться в социальной сети ссылка не на страницу, на которой находиться этот блок, а именно на тот пост, возле которого этот блок размещен, вместе с изображением миниатюры поста. Проблема в том, что по умолчанию такие блоки при клике публикуют ссылку на страницу, на которой был произведен клик.

Зачем такое нужно? Например у вас есть блог посвященный изображениям. 1 пост = 1 изображение. Посетители скорее всего будут просматривать ваш блог не заходя в посты, а просто листая главные страницы. Но чтобы поделиться этими изображениями в социальных сетях придется заходить внутрь поста - это не удобно.

Ниже даю код для WordPress'а, который позволит реализовать задуманное:

<?php /* start: Яндекс блок со счетчиками */ ?>
  <?php 
  /* start: получаем url миниатюры для шаринга */
    if ( has_post_thumbnail()) {
      $image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'thumbnail');
    }
  /* end: получаем url миниатюры для шаринга */ 
  ?>
  <div id="yandex-share" style="float:left;">
    <script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
    <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="small" 
      data-yashareQuickServices="vkontakte,facebook,twitter,gplus,odnoklassniki,yaru" 
      data-yashareTheme="counter" data-yashareLink="<?php the_permalink(); ?>" 
      data-yashareTitle="<?php the_title(); ?>" data-yashareImage="<?php echo $image_url[0]; ?>" >
    </div> 
  </div>
<?php /* end: Яндекс блок со счетчиками */ ?>

Я вставил этот код в php-файл шаблона который отвечает за генерацию главных страниц, у меня в шаблоне он назывался loop-full.php, но в большинстве случаев за вывод главных страниц отвечает файл index.php.

Вышеуказанный код вставляется сразу после кода подобного рода:

<div class="post-content">
   <?php the_content(__('Продолжить чтение притчи &rarr;', 'minimaltheme')); ?>
</div>

или

<div class="entry">
   <?php the_content('<strong>Читать далее &raquo;</strong>'); ?>
</div>

Результат можете посмотреть на моем подблоге о притчах: https://elims.org.ua/pritchi/

Что я добавил к стандартному коду блока "яндекс поделится"?

Я добавил три параметра:

  • data-yashareLink - указывает ссылку на страничку которой мы хотим поделится
  • data-yashareTitle - указывает текст который будет публиковаться, обычно это Title страницы которой мы делимся
  • data-yashareImage - указываем ссылку на изображение которое будет  публиковаться при нажатии кнопки поделится, так как изображение в социальных сетях публикуется маленькое, то лучше и ссылку указывать на миниатюру изображения.

Стоит учитывать что  установка такого блока социальных кнопок повлекла за собой около 100 дополнительных запросов на главных страницах, что естественно сказывается на скорости загрузки страницы, страница стала грузиться на 200 миллисекунд дольше. Это после того как я при помощи сервиса tools.pingdom.com заметил что счетчик кнопки социальной сети МойМир был особенно "медленный" и добавлял к времени загрузки страницы чуть менее 1 секунды, я перестал отображать кнопку МоегоМира на главных страницах.

 

Понравилось? =) Поделись с друзьями:

Обсуждение записи “Установка социальных кнопкок со счетчиками на главной”

  1. Feanor184 (feanor184.ru) says:

    Делал такую весчь) Вставлял тупо в код хедера — вполне отлично работает — для каждой отдельной открытой страницы — генерирует свои значения.

  2. Владимир Демянович (elims.org.ua) says:

    Feanor184, приветствую на своем блоге. Надеюсь и у меня почерпнете для себя что-то полезное =)
    Кстати добавил Ваш блог в свой список dofollow блогов: elims.org.ua/blog/chto-takoe-dofollow-blogi-i-spisok-dofollow-blogov/ ну и подписался заодно =)

  3. Роман says:

    А можно чтобы для всех страниц общий счетчик был?

Обсудить