Доброго времени суток. Вчера нашел один замечательный плагин для WordPress, который добавляет на Ваш ресурс кнопки для социальных сетей — Sociable RE. Пример работы данного плагина Вы можете увидеть на моем блоге.
Вот и решил я в этом посте описать плагин Sociable RE, как настроить, как его вписать в Ваш дизайн.

[adsense][/adsense]

Почему я выбрал данный плагин? Он прост в настройке и поддерживает такие социальные сети, как:

1. Вконтакте
2. Одноклассники
3. Twitter
4. Мой мир
5. Facebook
6. и др. популярные социальные сети

Скачать данный плагин можно с репозитория плагинов  Установка не вызывает каких-либо сложностей поэтому останавливаться на ней не будем. Одно отмечу на WordPress 3.4.1 и на WordPress 3.3.1 работает отлично.

Настройка Sociable RE

Плагин мы установили и активировали. Теперь перейдем к настройке: Парамнтры->Sociable RE

Первое, что нам надо сделать — это отметить какие кнопки социальных сетей мы хотим добавить на Ваш ресурс. И простым перетаскиванием мы можем изменить порядок показа социальных кнопок.

Следующее мы настраиваем отображение нашего плагина.

• В поле “Отключить спрайт для значков?” мы можем отключить спрайт. Что такое спрайт я обьяснять не буду. Но, если Вы не используете свои картинки, то не отключайте спрайт — это немного ускорит работу Вашего ресурса.
• В поле “Отключить прозрачность?” поставив галочку мы отключаем прозрачность нашего плагина.

Пример с прозрачностью:

Пример без прозрачности:

• В поле “Заголовок” мы можем поменять заголовок нашего плагина Sociable RE

• В поле “Разместить” указываем где будет размещен наш плагин
• В поле “Использовать CSS?” если мы поставим галочку, то наш плагин будет использовать свои CSS-стили.
• Если Вы не хотите использовать ссылки на социальные сети в виде картинок, то в поле “Использовать текстовые ссылки?” поставьте галочку.

• В поле “Каталог картинок” указываем каталог, где расположены картинки социальных сетей, если Вы используете свои картинки для социальных сетей
• В поле “Использовать всплывающее окно для ссылок?”, если Вы хотите, чтобы ссылки на социальные сети находились в всплывающем окне, то поставьте галочку и укажите размер данного окна.
• В поле “Открывать в новом окне”, если поставить галочку, то социальные сети будут открываться в новом окне (т.е. к ссылкам на социальные сети будет добавлен атрибут target=”_blank”)
• В поле “awe.sm” если Вы используете данный сервис в качестве сокращения ссылок, то тут Вам нужно включить данную возможность и указать API ключ для данного сервиса.

После ввода всех настроек нажмите “Сохранить изменения”, если Вы в чем-то ошиблись и хотите вернуть все настройки по умолчанию, то нажмите “Восстановить стандартные настройки”.

Изменение дизайна Sociable RE

Ссылки на социальные сети вставляются следующим кодом:

<div>
<div>
<strong>Понравилась статья? Поделись с друзьями.</strong>
</div>
<ul>
<li><a rel="nofollow"  target="_blank" href="...." title="Добавить ВКонтакте заметку об этой странице"><img src="http://myblog/wp-content/plugins/sociable-re/images/services-sprite.gif" title="Добавить ВКонтакте заметку об этой странице" alt="Добавить ВКонтакте заметку об этой странице" style="width: 16px; height: 16px; background: transparent url(http://myblog/wp-content/plugins/sociable-re/images/services-sprite.png) no-repeat; background-position:-1px -91px" /></a></li>
</ul>
</div>

Тут я рассмотрел только одну ссылку на социальную сеть в Вконтакте.
Все ссылки спрятаны в div с class = “sociable”, заголовок находиться в div с class=”sociable_tagline” и обрамлен тегом strong
А сами ссылки находятся в списке. Изменять html разметку плагина для социальных закладок можно менять в файле sociable.php
А все css стили находятся в файле sociable.css. И наш плагин берет их оттуда, если Вы не отключили данную функцию в настройках (поле “Использовать CSS?”). Так, что Вы можете данный плагин легко адаптировать под Ваш дизайн.
Вот в принципе и все.

А, да еще теперь при добавлении поста Вы можете отключить данный плагин для данной статьи. В поле “Sociable отключен?” поставьте галочку.

Вот теперь точно все:)