Делаем боковую панель социальных сервисов со статистикой к ним

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

Лавинообразный рост популярности соцсетей привел к тому, что сейчас днем с огнем не сыщешь сайта, так или иначе не связанного с ними. Любой материал можно быстро сохранить на свою страничку «контакта», поделиться в твиттере, опубликовать в ЖЖ. И чем удобнее располагаются социальные кнопки, тем чаще и охотнее ими пользуются.

Сегодня я расскажу, как сделать простую, но в то же время приятную и не назойливую боковую панель социальных сервисов. Более того, вы сможете получать подробную информацию по кликам ваших посетителей. Когда, сколько, откуда, какую страницу и даже сколько по ссылке вернулось обратно на ваш сайт – все это можно будет проконтролировать и принять меры в случае чего.

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

Тем сайтом оказался addthis.com. Это гораздо более функциональный аналог русской «одной_кнопки» с открытым кодом, большим сообществом и возможностью ведения статистики.

Самым простым вариантом было выбрать платформу веб-сайта, вид кнопки и сгенерировать код, но мы не ищем легких путей, потому как они обычно приводят к краху. И это правильно.

План урока следующий:

• Подготовка;
• HTML-код;
• Оформление панели (CSS);
• «Привязываем» статистику.

Подготовка

Первым делом нужно определиться с сервисами, которые вам нужны на будущей панели. Советую не засорять ее различными буржуйскими сетями, а выбрать только самые популярные для русскоязычной аудитории. Лично я остановил свой выбор на Вконтакте, Facebook, Twitter, Мои Мир (mail.ru), Google Buzz и дневники ЖЖ. ИМХО, шесть – это более чем достаточно и удовлетворит потребности подавляющего числа посетителей.

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

HTML-код

В теле (body) вашего шаблона вставляем следующий код. Он состоит из блока кнопок и скрипта, с помощью которого происходит переадресация на социальные сервисы.

<div class="addthis_toolbox">  
   <div class="custom_images">
<noindex>
<a rel="nofollow" class="addthis_button_twitter" title="Добавь в Twitter"><img src="images/stories/icon/twitter-32.png" /></a><br>
<a rel="nofollow" class="addthis_button_facebook" title="Добавь в Facebook"><img src="images/stories/icon/facebook-32.png" /></a><br>
<a rel="nofollow" class="addthis_button_vk" title="Добавь в Вконтакте"><img src="images/stories/icon/vkontakte-32.png" /></a><br>
<a rel="nofollow" class="addthis_button_mymailru" title="Добавь в Мой Мир"><img src="images/stories/icon/mailru-32.png" /></a><br>
<a rel="nofollow" class="addthis_button_googlebuzz" title="Добавь в Google Buzz"><img src="images/stories/icon/google-buzz-32.png" /></a><br>
<a rel="nofollow" class="addthis_button_livejournal" title="Добавь в Livejournal"><img src="images/stories/icon/livejournal-32.png" /></a></noindex>
    </div>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=YOUR-ACCOUNT-ID" charset="windows-1251"></script>

Тут есть два нюанса: во-первых, правильно прописывайте путь к залитым иконкам и их название. Во-вторых, в addthis не нашлось русскоязычного сервиса Одноклассники, но так как он довольно популярен, то пропустить его я не мог. Как вставлялась эта кнопка - читайте тут . Увы, клики на нее не будут проходить через addthis и в статистике она участвовать не будет.

Оформление панели

Вставляем в CSS-файл следующий код:

/* Fixed Positioned AddThis Toolbox */
.addthis_toolbox {
position: fixed;
top: 30%;
left: -5px;
border: 1px solid #ddd;
padding: 5px 5px 4px;
width: 32px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

.addthis_toolbox .custom_images a {
width: 32px;
height: 32px;
cursor: pointer;
}
.addthis_toolbox .custom_images a img { border: 0; margin: 2px 0; opacity: 0.6; }
.addthis_toolbox .custom_images a:hover img { margin: 2px 0; opacity: 1.0; }

Это оформление моей панели.

Класс addthis_toolbox отвечает за сам блок. Остальные за кнопки в обычном состоянии и при наведении. Пусть служит, как ориентир.

Я уже говорил, что нужно найти золотую середину между привлечением внимания к панели и ее назойливостью. Думаю, это удалось с помощью подобранных размеров кнопок и прозрачности в «спокойном» положении. Кстати, «поиграв» с параметрами margin можно добиться эффекта нажатия кнопок. Мне не подошло, но кому-то наверняка понравится.

Статистика

На этом можно было бы и успокоиться, но обожаю я статистику и ее анализ… Так что идем опять на сайт addthis.com  и проходим простую регистрацию. Подтверждаем ее. Никнейм, который вводили при регистрации вписываем в скрипт, приведенный выше (вместо YOUR-ACCOUNT-ID).

Затем, вслед за первым скриптом вставляем еще один:

<script type="text/javascript">var addthis_config={data_track_clickback:true}</script>

Он будет собирать информацию о трафике, который пришел по ссылкам, сохраненным с вашей панели «социалок»

Всё готово! Подробную статистику переходов и возвращений можно будет наблюдать все там же - на сайте addthis.com . Она обновляется раз в сутки, что более чем достаточно.

Эпилог

Урок завершен. Как видите, я расширил свою боковую панель ссылками на список RSS-лент, Youtube-канал и виджет в Яндексе. Получилось не очень громоздко и гораздо удобнее прежнего.

Копируйте, модернизируйте, экспериментируйте и социализируйте свои проекты. Эффект есть и моя статистика это доказывает.