Создаем блок подписчиков и фолловеров в сайдбаре

Каждый более-менее профессиональный блоггер отслеживает количество своих подписчиков. Это, во-первых, может быть интересно ему самому дабы понимать насколько большая или не очень аудитория блога. Во-вторых, информация может использоваться при формировании цены для размещения рекламы.

Обычно эти данные (как и кратную информацию о блоге) размещают в сайдбаре ближе к верху страницы. Так, например, у меня вы можете видеть счетчик Feedburner, который показывает число подписчиков по RSS. Но есть и другие сервисы, отдающие подобную статистику - Facebook, твиттер, социальные сеть Google+, Вконтакте, Pinterest и т.п. Сегодня рассмотрю небольшой прием для отображения количества подписчиков по всем ним в одном блоке. За подсказку спасибо этой статье. Кроме числа фолловеров напротив каждого сервиса будет кнопка подписки. Выглядеть это все будет приблизительно так.

1. Первым делом заходим в админку блога и выбираем пункт меню "Шаблон". После этого кликаем по кнопке "Изменить HTML".

2. В открывшемся окне с кодом шаблона находим строку ]]> и перед ней добавляем:

 
/* The CSS Code for the menu starts here bloggertrix.com */

div#socialbox, div#socialbox ul, div#socialbox ul li, div#socialbox ul li p, div#socialbox ul li p img, div#socialbox ul li p span, #socialbox ul li p a{

background: none;border: none;margin: 0;padding: 0;}
div#socialbox{

color: #768a96;

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;

width:300px;}
div#socialbox ul{

background: url() repeat;

border: 1px solid #d8dcdf !important;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: 0px 2px 4px #dfe4e7;

-moz-box-shadow: 0px 2px 4px #dfe4e7;

box-shadow: 0px 2px 4px #dfe4e7;

list-style: none;

margin: 0 !important;

padding: 0;}
div#socialbox ul li{

background-image: none;

border-bottom: 1px solid #d8dcdf;

height: 59px;

list-style: none;}
div#socialbox ul li:last-child{

border-bottom: none;}
div#socialbox ul li p{

padding: 19px 9px 0 9px;}
div#socialbox ul li p img{

border: none;

margin-right: 10px;

position: relative;

top: 3px;

vertical-align: baseline;}
div#socialbox ul li p span{

color: #425763;

font-weight: bold;}
div#socialbox ul li p a.socialbox-button{

background: url(http://1.bp.blogspot.com/-E5QRdIByVg0/ULOer7YwB7I/AAAAAAAAF0Y/V5hNb7e7XLE/s1600/bloggertrix-button.png) no-repeat;

border: 1px solid #d8dcdf;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

color: #425763;

float: right;

font-size: 11px;

font-weight: bold;

line-height: 11px;

padding: 6px 10px;

position: relative;

text-decoration: none;

text-transform: uppercase;

top: -2px;}
div#socialbox ul li p a.socialbox-button:hover{

background: url(http://1.bp.blogspot.com/-E5QRdIByVg0/ULOer7YwB7I/AAAAAAAAF0Y/V5hNb7e7XLE/s1600/bloggertrix-button.png) 0 -27px no-repeat;}
div#socialbox ul li p a.socialbox-button:active{

background: url(http://1.bp.blogspot.com/-E5QRdIByVg0/ULOer7YwB7I/AAAAAAAAF0Y/V5hNb7e7XLE/s1600/bloggertrix-button.png) 0 -54px no-repeat;}

Это все CSS стили оформления нашего блока.

3. Дальше нужно создать соответствующий элемент. Для этого заходим в меню "Дизайн". Кликаем по ссылке "Добавить гаджет" и располагаем его в том месте шаблона, где вам захочется. Тип гаджета - HTML/Javascript. В него вставляем следующий код:

2,563 Fans 

Like


5,365 Followers 

Follow



1,094 Subscribers 
Subscribe



1,151 Followers 

Follow



112 Pinterest 

Pinterest

Внимание! Здесь используется логин bloggertrix для всех социальных сервисов - его нужно заменить на свой. Когда все сделали, сохраняете гаджет. Если вам не нужно выводить какой-то из сервисов, просто убираете его код.

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