Социальные кнопки для Blogger

Улучшить дизайн блога

Меня некоторое время назад заинтересовала тема - а как поставить на Blogspot кнопки внизу постов типа "сохранить вконтакте", добавить в Facebook и т.п. То есть кнопки, нажав на которые ваш читатель может легко опубликовать ссылку на ваш материал в своём аккаунте какой-нибудь популярной социальной сети.

Но в Blogger как обычно возникли сложности: например родной java-скрипт предложеный на сайте вконтакте - на Blogger отчего-то не действует. Пришлось искать другие пути. И они были найдены.

Дело в том, что на иностранных кнопках вроде "AddThis" или "ShareThis" предложено много сервисов, популярных в Европе и Америке. Но у нас-то в России своя специфика. У нас популярны "вконтакте", "Я.ру", "мой мир и т.п. Вот для этого-то и надо поставить кнопки, которые актуальны для русскоязычного читателя.

Я нашёл способ сделать кнопки для Livejournal, вконтакте, Blogger, Facebook, Мой Мир, Я.ру, GoogleBuzz и Twitter. Возможно позже список расширится. К Liveinternet пока способа не нашёл.

Как это выглядит можно посмотреть у меня в блоге внизу сообщений. Значки кнопок можно ставить разные, смотря какие подходят к вашему дизайну. Способы были найдены с помощью постов двух людей: sovety и artinblog. Спасибо этим людям!

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

Надо нажать "расширить шаблоны виджета" в разделе "изменить html". Не забудьте на всякий сделать резервную копию своего шаблона. Код следует вставлять после строки <data:post.body/> (Хотя если хотите можете вставить куда-нибудь ещё).

Код:

Понравилось? опубликуй у себя:

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

Где написано PICTURE - впишите адрес картинки для своей кнопки. Где TEXT - впишите пояснительную фразу, которая будет появляться при наведении мышки на кнопку.

Чтобы кнопки немного "ожили" и меняли цвет при наведении на них - вставьте в свой CSS следующий код, придуманный artinblog:

.sharebuttons{

font-size: 13px;            /* размер шрифта */

font-weight: bold;         /* стиль текста: жирный */

padding:5px;               /* отступ от границ */

border: none;   /* толщина и цвет рамки */

background: #FFFFFF;   /* фоновый цвет */

}

.sharebuttons a img{

border: none;

opacity:1.0;                 /* непрозрачность: 100% */

}

.sharebuttons a:hover img{

border: none;

opacity:0.7;                 /* непрозрачность: 70% */

}

Я вставил этот код себе перед строкой /* Footer

Пояснения в коде имеются, можно менять цвета, степень прозрачности и т.п.

Надеюсь, что это будет вам полезно.

Да, и ещё: чтобы незалогиненый в Я.ру пользователь при нажати на вашу кнопку вначале попадал на страницу с предложением залогиниться - вставьте себе в код перед тегом </head> следующий java-скрипт, который придумал sovety:

<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&retpath=" + escape(this.href);

});

});

</script>