Пилим счётчик Twitter

Этот простой рецепт направлен на доводку счётчика Twitter.

Во первых, в оригинальном виде счётчик отдаётся с неправильным заголовком. Во вторых, содержимое скрипта, находящегося на их сервере, тупо дублирует строку запроса.

Ошибка не грубая, но лично меня она раздражала, поэтому я решил залезти «под капот» и посмотреть: «что же там такое?».

Стандартный код кнопки для показа количества фоловеров:

<script type="text/javascript" language="JavaScript" src="http://twittercounter.com/embed/ShiftSG/ffffff/111111"></script>

Идём глубже:

<!--
		drawTREmbed( '<div id="TwitterCounter"><a href="http://twittercounter.com/ShiftSG?from=button" title="TwitterCounter for @ShiftSG" target="_blank"><img src="http://srv2.twittercounter.com/counter/ani/ShiftSG/ffffff/111111" width="88" height="26" style="border:none;" alt="TwitterCounter for @ShiftSG" /></a></div>' );
		function drawTREmbed(s){
			document.write(s);
		}
// -->

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

<div id="TwitterCounter">
<a href="http://twittercounter.com/ShiftSG?from=button" title="TwitterCounter for @ShiftSG" target="_blank">
<img src="http://srv2.twittercounter.com/counter/ani/ShiftSG/ffffff/111111" width="88" height="26" style="border:none;" alt="TwitterCounter for @ShiftSG" />
</a>
</div>

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

Создаём файл twitter.js и копируем в него следующий фрагмент, вырезав комментарии <!-- // -->:

drawTREmbed('<div id="TwitterCounter"><a href="http://twittercounter.com/ShiftSG?from=button" title="Twitter cчётчик проекта" target="_blank"><img src="http://srv2.twittercounter.com/counter/ani/ShiftSG/ffffff/111111" width="88" height="26" style="border:none;" alt="Twitter cчётчик проекта" /></a></div>' );
function drawTREmbed(s){
document.write(s);
}

Для примера я использовал свой код счётчика. Обарите внимание на то, что здесь переведены подсказки. Если будете копипастить этот код, замените цвета в хвосте адреса картинки и имя Twitter аккаунта на свои.

Сохраните файл в кодировке UTF-8, заливайте к себе на сервер, например в директорию js, и подключите, как в примере:

<script type="text/javascript" language="JavaScript" src="/misc/twitter.js"></script>.

Если используете xHTML, можете опустить language="JavaScript". Теперь наш скрипт будет стабильно кэшироваться браузером и ошибка с передачей скрипта как текстового файла пропадёт.

Далее, мы можем предусмотреть показ счётчика для пользователей с отключенным JavaScript. Например так:

<script type="text/javascript" language="JavaScript" src="/misc/twitter.js"></script>
<noscript>
<a href="http://twittercounter.com/ShiftSG?from=button" title="Twitter cчётчик проекта" target="_blank"><img src="http://srv2.twittercounter.com/counter/ani/ShiftSG/ffffff/111111" width="88" height="26" style="border:none;" alt="Twitter cчётчик проекта" /></a>
</noscript>

Чтобы не плодить ссылки, Вы можете заменить ссылку счётчика на прямую ссылку к Вашему Twitter профилю. Так же вы можете ознакомиться со способом установки кнопки твита Tweet button Drupal без использования модуля.

Успехов в оптимизации!