Привет всем читателям моего скромного блога.

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

Конечно можно воспользоваться всякими плагинами для блога, а можно и самому добавить социальные закладки на блог при помощи простого скрипта, код скрипта расположен на сайте http://share42.com/ .

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

На сайте всё подробно описано, но для наглядности смотрим на скрин. Картинка кликабельна.

1. Выбираем размер кнопок.

2. Выбираем кнопки, которые нам нужны.

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

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

5. Качаем скрипт на компьютер.

6. Переходим в вкладку «Установка».

социальные закладки

Далее в вкладке «Установка».
1. Заходим на хостинг и в корневую папку вашего блога распаковываем скрипт, который мы только что скачали на компьютер. Папка у нас называется share42.
Директория куда вы распаковали скрипт должна выглядеть так http://mysite.ru/share42/ — (значение mysite.ru -меняем на своё).

Смотрим скрин для наглядности. Картинка кликабельна.

социальные кнопки

2. Далее на сайте кнопок, в вкладке «Установка», в поле Укажите путь до этой папки — вместо адреса, который там стоит вставляем путь к вашему сайту. Т.е. пишем вместо http://site.ru/share42/ — пишем свой сайт (например для этого сайта путь был бы такой http://blogmami.ru/share42/). Надеюсь понятно объяснила.

3. Далее выбираем для какого сайта нам нужен скрипт. В нашем случае я выбрала Wordpress.

4. Вставляем скрипт на блог. Для этого идём в консоли управления блогом в вкладку «Дизайн», затем «Редактор», и выбираем файл single.php. Вставляем код в нужное место. В моём случае я установила скрипт после меток.

Мой код выглядит так.

1234<div class=»zakladki»>Понравилась статья? Расскажи другим!</div><script type=»text/javascript» src=»http://site.ru/share42/share42.js»></script><script type=»text/javascript»>// <![CDATA[share42(‘http://site.ru/share42/’)// ]]></script>

Если копируете код отсюда, то не забывайте поставить название своего сайта в скрипте.

Я добавила текст перед выводом социальных закладок и заключила его в div, который обозвала zakladki. После этого сохраняем всё. Выглядит это так. Я обвела для наглядности кусок вставленного кода.

социальные кнопки

5. Далее добавляем предложенный код для добавления в файл стилей. Но я немного изменила код и добавила небольшой текст. И код для вставки в файл стилей выглядит так.

12345678910111213141516171819202122232425.zakladki {font-size:18px;font-family:Georgia, «Times New Roman», Times, serif;padding:5px 5px 0px ;} #share42 { display: inline-block; padding: 6px 0 0 6px; background: #FFF; border: 1px solid #E9E9E9; border-radius: 4px;}#share42:hover { background: #F6F6F6; border: 1px solid #D4D4D4; box-shadow: 0 0 5px #DDD;}#share42 a { opacity: 0.5; vertical-align: bottom;}#share42:hover a {opacity: 0.7}#share42 a:hover {opacity: 1}}

Файл стилей находится также в вкладке «Дизайн» — «Редактор» — «style.css»
Пожалуй на этом закончим. Если будут вопросы обращайтесь.
Пример работающего скрипта можно посмотреть на сайте «Домашние-маски».