Главная›CSS-верстка

Красивый счетчик FeedBurner-подписчиков и Twitter-фолловеров на CSS3

57 комментариев

Ранее я предлагал вашему вниманию статьи о том, как с помощью небольших функций, не прибегая к плагинам, вывести на WordPress-сайте текстом количество RSS-подписчиков по данным сервиса FeedBurner и количество Twitter-фолловеров.

В сегодняшнем посте я дополню данные статьи информацией о том, как красиво оформить эти счетчики с помощью технологии CSS.

Примеры

  • Живой пример счетчиков вы можете наблюдать прямо на моем блоге в сайдбаре.
  • Я подготовил примеры на отдельной странице с разными вариантами оформления счетчика.

HTML + PHP код

Код, который необходимо вставить в WordPress-шаблон в место вывода счетчика:

  • для RSS-счетчика:

    <div class="counter"><?php feedburner_counter('название_вашего_фида'); ?></div>

  • для Twitter-счетчика:

    <div class="counter"><?php twitter_followers('имя_вашего_аккаунта'); ?></div>

CSS-код

Теперь займемся непосредственно оформлением с помощью CSS. Его я делал по подобию стандартного счетчика FeedBurner, который отображается в виде картинки.

Рассмотрим код на примере коричневого счетчика (.brown). Основные стили выглядят следующим образом:

.counter {
	display: inline-block;
	overflow: hidden;
	padding: 0 5px 0 0;
	margin: 0 15px 15px 0;
	font: bold 11px/22px Arial, Tahoma, sans-serif;
	*display: inline; /* IE6, IE7 */
	*zoom: 1; /* IE6, IE7 */

	color: #FFF;
	background: #CA0000;
  border: 1px solid #B90000;
}
.counter .count {
	float: left;
	padding: 0 3px;
	margin: 1px 6px 0 1px;
  font-size: 13px;
	height: 17px;
	line-height: 18px;

	background: #E37979;
  border: 1px solid #B90000;
  border-right-color: #ECC0BD;
  border-bottom-color: #ECC0BD;
}

Пустой строкой я отделил стили, который отвечают за цветового оформление счетчика. У нас получается вот такой счетчик:

Счетчик подписчиков

Для придания счетчику красивости и объемности добавим легкую тень и закругления углов с помощью соответствующих CSS3-свойств:

.counter {
	border-radius: 3px;
	box-shadow: inset 0 0 2px #FFF, 1px 1px 1px rgba(0,0,0,0.15);
}

И конечный результат будет выглядеть следующим образом:

Счетчик подписчиков

Как видите, мы написали совсем немного CSS-стилей и получили приятный глазу счетчик.

Что на счет браузеров?

Конечно же, всю гламурность, т.е. закругления и тень, можно будет увидеть только в современных браузерах, в список которых не попадают версии Internet Explorer ниже 9-й. В них вы увидите лишь плоский прямоугольник.

* * *

Вам нужно провести полный анализ сайта, проанализировать его внутренние и внешние ссылки, посмотреть на сайта глазами поискового робота? Эти и множество других полезных инструментов доступны бесплатно на сайте для веб-мастеров WebMasta.org.

Смотрите также

Обновил дизайн моего блога WPhacks.name

31 комментарий

Благодаря технологии CSS3, сегодня можно творить потрясающие дизайнерские вещи, причем не прибегая даже к помощи Photoshop или других дизайнерских программ. В частности, в этом помогают такие замечательные CSS3-свойства, поддерживаемые современными ...

Стилизация чекбоксов и радиокнопок на чистом CSS с фолбеком для старых браузеров

105 комментариев

Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем ...

Верстка красивых тегов для сайта + бонус

25 комментариев

Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала ...

Зеленый свет CSS-свойствам при верстке под IE8 и выше

26 комментариев

Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную ...

Комментарии (57)

  1. jkeks
    13 сентября 2011 г. в 12:10

    ну и зря, очень зря, полно очень простых плагинов, сейчас это хак получается такой.

  2. mifist_666
    16 сентября 2011 г. в 12:54

    Отличная вещь, плагин тут не нужен вовсе! Если все делать только с помощью плагинов, блог будет вечность грузится)

  3. Amoralis
    16 сентября 2011 г. в 18:10

    Вот где ж ты раньше был с этой статьей, когда я себе дизайн на блог делал :) Понравились твои счетчики, пришлось ковырять твой код :-D Но всеравно тебе благодарен))

  4. utb
    18 сентября 2011 г. в 02:26

    Спасибо, как раз использовал. Как сделаю новый дизайн покажу;)

  5. seoeffector
    20 сентября 2011 г. в 14:14

    Фух наконец то нашел что искал давно хотел себе так сделать, но не мог дойти до этого. Спасибо.

  6. Babloman
    25 сентября 2011 г. в 02:36

    Спасибо. Попробуем.

  7. xager
    26 сентября 2011 г. в 09:51

    Спасибо за закругления. А как сделать чтобы и RSS подписчики были и твитер-фоловеры, а то функции конфликтуют?

    1. Dimox
      26 сентября 2011 г. в 10:10 / ответ на коммент xager

      Нужно сделать вот так:

      function plural_form($number, $after) {
  $cases = array (2, 0, 1, 1, 1, 2);
  echo '<span class="count">'.$number.'</span> '.$after[ ($number%100>4 && $number%100<20)? 2: $cases[min($number%10, 5)] ];
}

function feedburner_counter($account) {
  $rss = get_option("feedburnercounter");
  if (!isset($rss['lastcheck'])) $rss['lastcheck'] = 0;
  if (!isset($rss['count'])) $rss['count'] = 0;
  if (!isset($rss['account'])) $rss['account'] = '';
  if ($rss['lastcheck'] < (mktime() - 3600) || $rss['account'] != $account) {
     $xml = file_get_contents('http://feedburner.google.com/api/awareness/1.0/GetFeedData?uri='.$account);
     preg_match('/circulation="(\d+)"/', $xml, $match);
     if ($match[1] != 0) {
       $rss['count'] = $match[1];
       $rss['lastcheck'] = mktime();
       $rss['account'] = $account;
       update_option("feedburnercounter",$rss);
     }
  }
  plural_form(
    $rss['count'],
    /* варианты написания для количества 1, 2 и 5 */
    array('подписчик','подписчика','подписчиков')
  );
}

function twitter_followers($account) {
  $tw = get_option("twitterfollowers");
  if (!isset($tw['lastcheck'])) $tw['lastcheck'] = 0;
  if (!isset($tw['count'])) $tw['count'] = 0;
  if (!isset($tw['account'])) $tw['account'] = '';
  if ($tw['lastcheck'] < (mktime() - 3600) || $tw['account'] != $account) {
    $xml = file_get_contents('http://twitter.com/users/show.xml?screen_name='.$account);
    preg_match('/followers_count>(.*)</', $xml, $match);
    if ($match[1] !=0 ) {
      $tw['count'] = $match[1];
      $tw['lastcheck'] = mktime();
      $tw['account'] = $account;
      update_option("twitterfollowers",$tw);
    }
  }
  plural_form(
    $tw['count'],
    /* варианты написания для количества 1, 2 и 5 */
    array('фолловер','фолловера','фолловеров')
  );
}
      1. xager
        28 сентября 2011 г. в 06:54 / ответ на коммент Dimox

        Ок, заработало. Теперь всё красиво. Большое спасибо. Мелочь, а приятно.

  8. Василий
    22 октября 2011 г. в 14:28

    Dimox (и знающие комментаторы), счетчик почему-то не обновляет кол-во подписчиков. Собственно и на feedburner’ре показывает все по нулям. Вчера подключил к сайту. Теста ради, сам подписался с двух аккаунтов и товарища попросил. Есть какой-то тайм-аут обновления кол-ва подписчиков?

    1. Dimox
      22 октября 2011 г. в 14:42 / ответ на коммент Василий

      В статье с функцией написано, где меняется периодичность обновления.

      1. Василий
        22 октября 2011 г. в 15:01 / ответ на коммент Dimox

        Это да. Но функция ведь просто получает значение с feedburn’а? А на фидберне кол-во равно нулю. При том, что с момента подписки прошло уже более полусуток

        1. Dimox
          22 октября 2011 г. в 16:13 / ответ на коммент Василий

          Feedburner обновляет показатели раз в сутки. Поэтому только завтра он изменится.

  9. black0wolf
    9 ноября 2011 г. в 12:41

    У меня почему то не применяется никакой стиль. Выводится количество подписчиков, а стиля нет. Уже и кеш чистил и ничего не происходит.

    1. Dimox
      9 ноября 2011 г. в 19:39 / ответ на коммент black0wolf

      Значит куда-то не туда вставляете стили.

      1. black0wolf
        9 ноября 2011 г. в 20:18 / ответ на коммент Dimox

        Стили вставлял и в конец, и в начале и все равно ничего. Пробовал сменить тему, и тоже нет результата.

        1. Dimox
          9 ноября 2011 г. в 20:26 / ответ на коммент black0wolf

          Где можно посмотреть?

          1. black0wolf
            9 ноября 2011 г. в 23:17 / ответ на коммент Dimox

            Уже отображается. После создания статьи почему то начало отображаться.
            Есть еще вопрос: как сделать так что бы картинка была на одном уровне с счетчиком. Вот скриншот http://goo.gl/kl4ND

            1. Dimox
              10 ноября 2011 г. в 11:15 / ответ на коммент black0wolf

              Не видя код страницы, не могу сказать.

              1. black0wolf
                10 ноября 2011 г. в 11:41 / ответ на коммент Dimox

                Тестирую пока на локали по этому адрес не могу дать. Вот часть кода:

                <img src="http://thewebsite.in.ua/wp-content/uploads/2011/11/rss.png" alt="rss" /> <div class="feedburner_counter"><?php feedburner_counter('TheWebSiteInUa'); ?></div>
<img src="http://thewebsite.in.ua/wp-content/uploads/2011/11/twitter.png" alt="twitter" /> <div class="twitter_followers"><?php twitter_followers('TheWebSiteInUa'); ?></div>

                Стиль счетчика ваш. Картинку наверное надо влить в css.

                1. Dimox
                  10 ноября 2011 г. в 12:16 / ответ на коммент black0wolf

                  Можно попробовать так:

                  <img style="vertical-align: middle" src="http://thewebsite.in.ua/wp-content/uploads/2011/11/rss.png" alt="rss" /> <div class="feedburner_counter"><?php feedburner_counter('TheWebSiteInUa'); ?></div>
<img style="vertical-align: middle" src="http://thewebsite.in.ua/wp-content/uploads/2011/11/twitter.png" alt="twitter" /> <div class="twitter_followers"><?php twitter_followers('TheWebSiteInUa'); ?></div>
                  1. black0wolf
                    10 ноября 2011 г. в 13:11 / ответ на коммент Dimox

                    Спасибо, но работает только в Хроме.

  10. Серж
    10 ноября 2011 г. в 19:57

    Надо к себе на сайт добавить – полезная штука. Видил на многих сайтах – а вот прочитать что-то не попадалось!

    Удачи в развитии!!!

  11. Prince
    13 ноября 2011 г. в 14:21

    спасибо Дима, позже поставлю, очень красиво.

  12. Пётр
    16 ноября 2011 г. в 04:54

    Давно хотел поменять счетчики, но предложенный вами код отказывается работать:”Fatal error: Call to undefined function twitter_followers() in /home/p/petruxa110/moi-tarakany.ru/public_html/wp-content/themes/jarrah/jarrah/sidebar.php on line 20″. Что это может быть?

    1. Dimox
      16 ноября 2011 г. в 10:33 / ответ на коммент Пётр

      Это означает, что вы не вставили код функции twitter_followers() в файл functions.php. Читайте статью внимательно.

      1. Пётр
        16 ноября 2011 г. в 11:00 / ответ на коммент Dimox

        Спасибо, сразу не обнаружил этого кода. Решение нашел в другом месте. Оно заключалось в создании подобного кода, в самостоятельно созданный PHP файл.

  13. romka
    21 ноября 2011 г. в 00:10

    Счетчик действительно краше. Спасибо за код, сейчас и себе поставить попробую

  14. Alex
    2 января 2012 г. в 04:56

    Спасибо Dimox за это замечательное решение по видоизменению счётчика. Сделал у себя всё отлично. Правда про функцию сразу недопонял. Прочитал предыдущий пост и всё стало ясно.
    Вопрос не в тему поста: есть ли на Вашем блоге описание того как реализовать выпадающие правила комментирования, как у Вас? я так понимаю это через JQuery сделано?

    1. Dimox
      2 января 2012 г. в 11:22 / ответ на коммент Alex

      Есть, только там способ без jQuery – http://dimox.name/adding-comments-rules/

      1. Alex
        2 января 2012 г. в 23:01 / ответ на коммент Dimox

        Спасибо ещё раз. Прочёл пост, реализовал у себя на блоге. Отличный у Вас сайт, много чего можно узнать.

        1. Dimox
          2 января 2012 г. в 23:05 / ответ на коммент Alex

          Спасибо за отзыв!

  15. Михаил Аглиуллин
    12 января 2012 г. в 22:33

    Оп, прямо сейчас сделаю себе на сайт. Красиво.

  16. Alex Pro
    26 января 2012 г. в 12:03

    Может быть прикручу себе такой на блог…

  17. Островитянин
    5 марта 2012 г. в 23:13

    странно, но почему то у меня на сайте отображается Ваше количество подписчиков, хотя в функции

    <div class="counter"><?php feedburner_counter('название_вашего_фида'); ?></div>

    прописан мой фид ((

  18. mikl
    5 апреля 2012 г. в 04:10

    Поставил себе на блог -клевый дизайн =)

  19. Alex Vi Key
    2 мая 2012 г. в 19:56

    Очередная фича;))) прикольно, надо будет внедрить и себе

    P.S.: надеюсь когда-нибудь количество моих подписчиков через FB поднимется выше “4”;)))

  20. Алексей
    14 ноября 2012 г. в 09:33

    С недавнего времени почему то перестал работать счётчик. Цифра остановилась на 157, хотя уже намного больше на самом деле. В коде давно уже ни чего не менял. Что может быть?

    1. Dimox
      14 ноября 2012 г. в 12:03 / ответ на коммент Алексей

      Счетчик от FeedBurner больше обновляться не будет, т.к. Гугл в октябре закрыл API.

      1. Алексей
        14 ноября 2012 г. в 14:11 / ответ на коммент Dimox

        Т.е. теперь нет нужды в счётчике?

        1. Dimox
          14 ноября 2012 г. в 15:10 / ответ на коммент Алексей

          Ну это вам виднее. Актуальный показатель теперь можно вывести только с помощью официального информера.

          1. Алексей
            14 ноября 2012 г. в 15:47 / ответ на коммент Dimox

            А понял. А как у вас работает или нет?

            1. Dimox
              14 ноября 2012 г. в 16:38 / ответ на коммент Алексей

              Странный вопрос. Естественно нет.

              1. Алексей
                14 ноября 2012 г. в 17:28 / ответ на коммент Dimox

                Да))) точно странный:)) Просто подумал, если не работает то почему не поменян ещё.

Ваш комментарий

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код

© 2006–2024 Dimox.name. Все права защищены. Перепечатка запрещена.