20100114

Кнопки твиттера, жуйки, я.ру и ЖЖ для Blogger

Приятно, когда на тебя ссылаются, поэтому любой заядлый блоггер любит всякие кнопки вроде «retweet» и «в делишез». «Retweet» особенно: в микроблогах ссылаются охотнее. Однако кроме твиттера, у нас есть ещё и ЖЖ, и Я.ру, и juick. А вот каким-нибудь stumbleupon никто не пользуется.

Никакие готовые кнопки мне не понравились: 1) большинство из них неправильно работает, если заметка находится на главной странице, 2) они почти все требуют установки чужих скриптов, часто тормозных 3) многие кнопки игнорируют популярные в России (и среди моих читателей) ЖЖ, Я.ру и juick. Вот и пришлось сделать самому.

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

Что получилось

Первая версия выглядит примерно так (это просто картинка, не кликать! — настоящие кнопки внизу заметки):

Кнопки подписал по-русски. Для надёжности расшифровал. Проверил, точно работают «пожужжать |жж», «двумЯ.РУками |я.ру» и «расчирикать |twi». Кнопка для жуйки по идее должна работать, только я её проверить не смог, потому что у меня обработчик XMPP URI не настроен. Пожалуйста, проверьте, кто пользуется, отпишитесь и скажите, как надо поправить, если что.

Как установить себе

В шаблоне блога «раскрыть виджеты», найти подходящее место (например, я выбрал post-footer-line-2) и добавить туда такой код:

<div class="sharemebuttons">
<a class="shareme" expr:href='"http://www.livejournal.com/update.bml?subject=Ссылка: "
+ data:post.title + "&amp;event=" + data:post.title + ": "
+ data:post.url'>пожужжать |жж</a>

<a class="shareme" expr:href='"http://my.ya.ru/posts_add_link.xml?title="
+ data:post.title + "&amp;URL=" + data:post.url'>двумЯ.РУками |я.ру</a>

<a class="shareme" expr:href='"xmpp:juick@juick.com?message;body="
+ data:post.title + " " + data:post.url'>перетереть |juick</a>

<a class="shareme" expr:href='"http://www.google.com/reader/link?url="
+ data:post.url + "&amp;title=" + data:post.title + "&amp;srcURL="
+ data:blog.homePageUrl + "&amp;srcTitle=" + data:title'>побузить |buzz</a>

<a class="shareme" expr:href='"http://twitter.com/home?status="
+ data:post.url + " " + data:post.title'>расчирикать |twi</a>
</div>

Для ЖЖ бы хорошо в event помещать уже HTML-код, но у меня пока не получилось.

Надо, наверное, добавить красивые графические иконки (не знаю, дойдут ли руки, но собственноручно нарисованный чижик для твиттера у меня уже есть; нет ничего для жуйки и жж). Пока довольствуюсь вот таким фрагментом CSS (тоже черновой вариант, вставлять в таблицу стилей в верху шаблона):
div.sharemebuttons {
  margin-top: 1em;
  margin-bottom: 1em;
}
a.shareme, a.shareme:visited {
  text-decoration: none;
  padding: 3px 8px;
  margin: 0em 8px 0em 0px;
  background-color: #94cc32;
  color: white;
}
a.shareme:hover {
  background-color: #aced3a;
  color: white;
}

Всякие улучшения приветствуются. Ну и ссылки, конечно :-)

Доп. 1: добавил кнопку для «Я.ру».

Доп. 2: исправление для кнопки «Я.ру» — чтобы при нажатии на кнопку незалогинненному пользователю вначале предлагалось войти в «Я.ру», добавить в шаблон блога такой Javascript-код (например, перед </head>):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("a.shareme[href^='http://my.ya.ru']").attr("href", function() {
      return "http://passport.yandex.ru/passport?mode=auth&amp;retpath=" + escape(this.href);
  });
});
</script>
Без этого скрипта кнопка тоже работает, но только для залогинненых пользователей «Я.ру».

Доп. 3: добавил кнопку для Google Buzz (через Reader).
Ярлыки: ,