Как сделать кнопку Поделиться со счётчиком и настроить её дизайн?




Эта статья — продолжение темы «Как сделать кнопку Поделиться?». Если вы хотите добавить счётчик для кнопки Поделиться и полностью настроить его внешний вид, то в этой статье вы найдёте примеры, как это можно сделать.

Стандартные кнопки Facebook со счётчиком (button_count и box_count) часто глючат и не могут менять дизайн. Сейчас мы эту ситуацию исправим.

Шаг 1.

Создаём на компьютере файл social.php и вставляем в него шаблонный код:

<?php

    $title=urlencode('Как сделать кнопку Поделиться со счётчиком и настроить её дизайн?');
    $url=urlencode('http://bit.ly/FBshareCounterArticle');
    $summary=urlencode('Узнайте, как создать кнопку Поделиться Facebook со счётчиком и полностью настроить их дизайн.');
    $image=urlencode('http://www.masterskayafanstranic.com.ua/wp-content/uploads/2012/05/sharecnt.png');

?>

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

Шаг 2.

Теперь в этот же файл до знака ?> нужно вставить код, который будет подсчитывать количество шарингов.

<?php

    $parser = file_get_contents('http://api.facebook.com/restserver.php?method=links.getStats&urls='.$url);
    $fbbegin = '<share_count>'; $fbend = '</share_count>';
    $fbpage = $parser;
    $fbparts = explode($fbbegin,$fbpage);
    $fbpage = $fbparts[1];
    $fbparts = explode($fbend,$fbpage);
    $fbcount = $fbparts[0];

    if($fbcount == '') { $fbcount = '0'; }

?>

Этот код является шаблонным. Его можно полностью скопировать и вставить. Файл social.php готов. Загружайте его на хостинг в отдельную папку.

Шаг 3.

Создаём файл index.php и в его коде подключаем файл social.php (оба файла должны быть в одной папке на хостинге):

<?php

    require("social.php");

?>

Шаг 4.

Вставляем сам код кнопки «Поделиться»:

<a onClick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title;?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo $url; ?>&amp;p[images][0]=<?php echo $image;>', 'sharer', 'toolbar=0,status=0,width=680,height=380');" href="javascript: void(0)">

  Вставьте текст или картинку здесь

</a>

Этот код вызывает всплывающее окно, которое будет содержать все необходимые дынные для «шаринга». Код ссылки менять не нужно. Вам надо только вставить код картинки или текст, который и будет представлять собой кнопку «Поделиться».

Сразу после кода кнопки вставьте код счётчика:

<div id="fbcount">

  <?php echo $fbcount; ?>

</div>

Данные для переменной $fbcount подгружаются из файла social.php. Так как эти данные будут выводиться внутри контейнера div с идентификатором id=″fbcount″, то у вас есть неограниченные возможности по настройке внешнего вида счётчика с помощью CSS.

Привожу весь код файла index.php. CSS подключается через отдельный файл style.css.

<?php
    require("social.php");
?>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Как сделать кнопку Поделиться со счётчиком и настроить её дизайн</title>
  <link href="style.css" media="screen" />
</head>

<body>
  <div id="container">
    <a onClick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title;?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo $url; ?>&amp;p[images][0]=<?php echo $image; ?>', 'sharer', 'toolbar=0,status=0,width=680,height=380');" href="javascript: void(0)">
      Будь другом. Поделись с другом.
    </a>

    <div id="fbcount">
      <?php echo $fbcount; ?>
    </div>

  </div>

</body>
</html>

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

Пример 1. Скачать код.

Пример 2. Скачать код.

Пример 3. Скачать код.

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

Поделитесь с друзьями

Комментарии Facebook: