Установка социальных кнопок без плагина

Выбор способа установки иконок для быстрого цитирования в социальные закладки зачастую представляет сложность для новичков.

Мне очень понравился функционал сервиса Share42.com. Сайт представляет собой бесплатный генератор скрипта размещения кнопок социальных сетей и закладок от Dimox. Результат работы этого модуля можно увидеть на моем сайте слева от текста статьи.

Из представленного на сервисе многообразия иконок можно легко составить свою панель кнопок для выбранных социальных сетей. Причем предлагается три варианта размеров иконок. Я остановилась на среднем – 24х24. Выбранные иконки можно перетащить в одну строку и установить в том порядке, в котором Вы хотите видеть их на своем сайте. Все кнопки будут находиться в одном изображении, что уменьшит число обращений к серверу. Определившись с выбором, следует нажать кнопку «скачайте готовый скрипт» и получить архив, содержащий файл изображения и код скрипта.

Теперь немного об установке. Она тоже достаточно проста. Извлеченную из архива папку «share42» загружаете в корень сайта любым доступным способом. А в соответствующий файл WordPress добавляете строку:

<script src=»http://site.ru/share42/share42.js»></script>
<script type=»text/javascript»>share42()</script>

Я добавляла в файл single.php, т.к. вывожу панель только внутри постов.

Положение блока на странице можно изменить с помощью таблицы стилей. Для этого добавляемую строку нужно поместить внутрь блока div, стиль которого следует определить в файле style.css (для различных шаблонов WordPress имя таблицы стилей может отличаться).

У меня код для вставки в single.php выглядит так:

<div id=»share42″>
<script src=»http://site.ru/share42/share42.js»></script>
<script type=»text/javascript»>share42()</script>
</div>

Не забудьте заменить site.ru на имя своего домена.

А для style.css – так:

#share42 {position: fixed;

top: 200px;left: 7px;}

* html #share42 {position: absolute;}

#share42 a {display: block !important;

margin: 0 0 7px !important;}

_____________________________________

Хочу обратить внимание на преимущества этого варианта установки иконок по сравнению с использованием плагинов или «фирменных» кнопок, предоставляемых социальными сетями.

Во-первых, быстрая загрузка, благодаря установке оптимизированного скрипта на сайте, и кэшированию его браузером.

Во-вторых, отсутствие добавочных внешних ссылок, т.к. все ссылки выводятся через JavaScript.

Вот и все. Блок установлен и готов к работе!

Опубликовал 31st Декабрь 2010.
Размещено в Блоггеру на заметку.
Метки: ,

К записи 12 комментариев

ОООООО EEEEEE.
Во-первых, меня переслал к вам на блог sidash. Он сказал, что вы знаете как сделать вкладки в сайдбаре (ибо места мало).
Во-вторых, так совпало, я искал именно такое расположение соц закладок, огромное спасибо за статью 🙂 уже установил у себя.
И жду, если не сложно, информации насчет закладок.

Russkii
Коротко об установке блока с закладками в сайдбаре написано в статье «Моддинг» сайдбара. Если есть необходимость могу расписать подробнее. Если есть вопросы, обращайтесь, постараюсь помочь:)

пока попробую разобраться сам. думаю все получится. если же нет то обязательно обращусь за помощью 🙂

Спасибо за сервис! Очень давно искал 🙂

Сюда показал дорогу Russkii, за что ему тоже большое спасибо 🙂

Рада, что мой опыт пригодился 🙂

🙂
Сегодня 2 человека спрашивали в комментах, как я сделал такие закладки — отправлял их на вас 🙂 на эту статью 😉

Да, я видела, спасибо 🙂

жаль для блога на блогспот не подходит((

Советую поискать на сайте http://dimox.name, у автора сервиса, может и для себя сможете подобрать 🙂

На своем сайте уже установил такие

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

share42('js/')
между тегами боди или иначе? у меня так как нету домена просто указал папку js туда закинул ява файл и пнж иконку, я что делаю не прафильно скрипт пробовал между тегами head все так же, заранее благодарен!!!

Дело в том, что без хостинга вы не сможете установить этот скрипт. Он не работает даже на локальном сервере (Денвер).

Нужна помощь?