Куда нажимать

В поисках оптимального плагина социальных закладок я наткнулся на минималистичный и при этом очень просто масштабируемый плагин Sociable.

К сожалению, поддержка плагина несколько раз переходила из рук в руки, поэтому теперь не ясно, поддерживает его кто-либо или нет. Последнее обновление обозначено 28-го октября 2009.

Я взял на себя смелость добавить к плагину популярные российские социальные сети и сервисы закладок. Все в рамках лицензии GPL второй версии.

Встречайте итог работы — Sociable Russian Edition (русская версия)

На данный момент, помимо массы иноземных сайтов, можно добавлять закладки в следующие отечественные:

• ВКонтакте
• Мой Мир @mail.ru
• Яндекс.Закладки
• БобрДобр
• Memori.ru
• МоёМесто.ru
• Сто закладок
• MisterWong.RU
• Google Buzz, он же «Живая лента Google»
• Google Orkut
• Live Journal, он Живой Журнал

Плюс я перевёл интерфейс админки.

Ответы на вопросы

Как вывести кнопки вертикально, в столбик?
Как вставить вывод кнопок в произвольное место шаблона?
Как поставить вместо стандартных иконок свои произвольного размера?

Как вывести кнопки вертикально, в столбик?

Ответ: Необходимо отключить свойство inline. Для этого:

1. Скопируйте содержимое sociable.css в файл стилей текущей темы;
2. Удалите правила display: inline; из стилей Sociable. Получится такой набор:

   /* sociable */
    
   div.sociable { margin: 16px 0; }
    
   span.sociable_tagline { position: relative; }
   span.sociable_tagline span { display: none; width: 14em; }
   span.sociable_tagline:hover span {
   	position: absolute;
   	display: block;
   	top: -5em;
   	background: #ffe;
   	border: 1px solid #ccc;
   	color: black;
   	line-height: 1.25em;
   }
   .sociable span {
   	display: block;
   }
   .sociable ul {
   	margin: 0 !important;
   	padding: 0 !important;
   }
   .sociable ul li {
   	background: none;
   	list-style-type: none;
   	margin: 0;
   	padding: 1px !important;
   }
   .sociable ul li:before { content: ""; }
   .sociable img {
   	float: none;
   	width: 16px;
   	height: 16px;
   	border: 0;
   	margin: 0;
   	padding: 0;
   }
    
   .sociable-hovers {
   	opacity: .4;
   	-moz-opacity: .4;
   	filter: alpha(opacity=40);
   }
   .sociable-hovers:hover {
   	opacity: 1;
   	-moz-opacity: 1;
   	filter: alpha(opacity=100);
   }

3. Отключите в настройках плагина использование стилей Sociable.

Собственно, редактированием стилей можно добиться любого вида отображения.

Как вставить вывод кнопок в произвольное место шаблона?

Ответ: Разместить кнопочки в любом месте шаблона можно с помощью кода:

<?php if (function_exists('sociable_html')) {
    echo sociable_html();
} ?>

Можно вручную указать, какие именно кнопки выводить, перечислив их названия:

<?php if (function_exists('sociable_html')) {
    echo sociable_html(Array("ВКонтакте", "del.icio.us", "Мой Мир"));
} ?>

Работать это будет только в пределах стандартного цикла loop:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Как поставить вместо стандартных иконок свои произвольного размера?

1. Заливаем иконки этого размера в папку
2. Указываем папку в настройке «Каталог картинок»
3. Открыть файл sociable.css (для удобства используйте EmEditor или другой редактор, но не блокнот)
Находим:

.sociable img {
    float: none;
    width: 16px;
    height: 16px;
    border: 0;
    margin: 0;
    padding: 0;
}
div.sociable { margin: 16px 0; }

Заменяем на:
16 меняем на 32.

Открываем sociable.php
Найти кусок кода:

alt=\"$description\" style=\"width: 16px; height: 16px

Заменяем 16 на 32 (или другой размер, согласно размеру ваших иконок)

Тоже самое проделываем с (в двух случаях)

echo "<img src=\"$imgsrc\" width=\"16\" height=\"16\"

4. Иконки увеличили на страницах, но в админке ситуация не из приятных.
Для превью иконок и их названий отведено мало места
Открываем sociable-admin.css

В блоке

#sociable_site_list li {

Находим

height: 20px;

И 20 меняем на 50 например.

Выглядит это дело, например, так:

(c) TAIFUN
—–

Плагин доступен на WordPress.org