Доброго времени суток, уважаемые читатели. Не так давно, 11 октября, я публиковала кнопки социальных сетей в виде единого блока. Однако упоминание социальной сети Одноклассники сыграло злую шутку, и многие пользователи приходят из поисковых систем именно в надежде найти эту кнопку.
Я решила исправиться и посвятить отдельную статью размещению кнопки Класс! от Одноклассников. С одной стороны установить кнопку не сложно, но есть ряд условий, которые необходимо выполнить.
Поэтому я посчитала, что лучше подробнее об этом рассказать.
Сразу оговорюсь:
Код кнопки Класс, описанный в этой статье уже адаптирован под платформу Blogger/Blogspot.
Если вы хотите, чтобы кнопка была расположена сразу в конце статей, то, как правило, код кнопки мы помещаем сразу после строки:
Если вы хотите, чтобы кнопка отображалась только на внутренних страницах, и их не было видно на главной, тогда код кнопки должен быть внутри кода:
Перед добавлением кода кнопки в шаблон всегда ставим галочку "Расширить шаблоны виджетов"
У Одноклассников есть возможность установить 4 разных вида кнопок.
Я решила исправиться и посвятить отдельную статью размещению кнопки Класс! от Одноклассников. С одной стороны установить кнопку не сложно, но есть ряд условий, которые необходимо выполнить.
Поэтому я посчитала, что лучше подробнее об этом рассказать.
Сразу оговорюсь:
Код кнопки Класс, описанный в этой статье уже адаптирован под платформу Blogger/Blogspot.
Если вы хотите, чтобы кнопка была расположена сразу в конце статей, то, как правило, код кнопки мы помещаем сразу после строки:
<data:post.body/>но в силу того, что у кого-то уже установлены какие-то кнопки, у кого-то в том месте находятся рекламные блоки с Google Adsense, каждый в индивидуальном порядке подбирает место, в которое установить кнопку. Самый главный помощник в этом Firebug, более подробно о том, как им пользоваться в статье Как удалить внешние ссылки из шаблонов Blogger/Blogspot.
Если вы хотите, чтобы кнопка отображалась только на внутренних страницах, и их не было видно на главной, тогда код кнопки должен быть внутри кода:
<b:if cond='data:blog.pageType == "item"'> тут будет код кнопки </b:if>
Перед добавлением кода кнопки в шаблон всегда ставим галочку "Расширить шаблоны виджетов"
У Одноклассников есть возможность установить 4 разных вида кнопок.
| Кнопка счетчик | Большая обычная кнопка | Маленькая обычная кнопка | Собственная кнопка |
 |  |  |  |
И так, как добавить кнопку Класс в виде счетчика в Blogger/Blogspot
Шаг первый.
Открываем шаблон блога, находим:
</head>Перед этой строкой вставляем код:
<link href='http://stg.odnoklassniki.ru/share/odkl_share.css' rel='stylesheet' type='text/css'/>
<script src='http://stg.odnoklassniki.ru/share/odkl_share.js' type='text/javascript'/>
Шаг второй. Чтобы велся подсчет "голосов", находим код:
<body>и полностью меняем его на этот:
<body onload="ODKL.init();">или лично у меня в шаблоне тег body был такой:
<body class='loading'>в таком случае заменяем код в таком порядке:
<body class='loading' onload='ODKL.init();'>Обратите внимание, мы оставили и прежнее значение class='loading' и добавили новое значение onload='ODKL.init();'
Шаг третий. Установка кода кнопки Класс.
Находим место, в которое вы хотите установить кнопку Класс и вставляем код кнопки:
<a class='odkl-klass-stat' expr:href='data:post.url' onclick='ODKL.Share(this);return false;'><span>0</span></a>В этом коде ни в коем случае ничего нельзя менять. Сохраняем шаблон.
Если вы хотите такую кнопку
Чтобы ее установить, проделываем Шаг первый, описанный выше (вставляем ссылки на необходимые файлы в заголовок шаблона), второй шаг пропускаем, он не нужен. Переходим к третьему шагу – размещение кода кнопки Класс.
<a class="odkl-klass" expr:href='data:post.url' onclick="ODKL.Share(this);return false;" >Класс!</a>Если же вы хотите такую кнопку
, то код будет такой: <a class="odkl-klass-s" expr:href='data:post.url' onclick="ODKL.Share(this);return false;" ></a>Как видите, сложного ровным счетом ничего нет. В принципе, все эти коды ничем сильно не отличаются, кроме значения class, которое сообщает нам, как должна выглядеть кнопка.
Если же вам не нравится стандартная кнопка Класс, в таком случае можно ее заменить на свою картинку. И в таком случае, выбираем, например, вид кнопки из второго варианта, где class="odkl-klass", и сразу после кода кнопки вставляем:
<style type="text/css"> .odkl-klass {background: url(адрес вашей картинки) no-repeat; } </style>Т.е. все вместе это должно выглядеть так:
<a class="odkl-klass" expr:href='data:post.url' onclick="ODKL.Share(this);return false;" >Класс!</a>
<style type="text/css"> .odkl-klass {background: url(адрес вашей картинки) no-repeat; } </style>
Так же вы можете дополнить этот код другими стилями, расширение FireBug вам поможет экспериментировать, чтобы кнопка органично вписалась в ваш блог. По идее, все стили необходимо указывать в шаблоне там же, где и все остальные стили CSS, но кнопка так реализована, что, чтобы перебить ее настройки внешнего вида, необходимо разместить код CSS под кодом кнопки.
По акции для блоггеров - обмен постовыми, хочу порекомендовать вам блог своего читателя и активного комментатора SwaEgo. В его блоге вы найдете уроки по фотошопу, и один из них, Как сделать из черно-белой фотографии цветную в Photoshop. Научиться работать в фотошоп нужно, как минимум для того, что бы уметь отредактировать неудачно снятые фотки для семейного альбома, ну а как максимум, рисовать собственные картинки к своим статьям. Попробуйте, а вдруг понравится.
P.S. Все, кто ставил себе блок кнопок социальных сетей, и хочет вставить кнопку Одноклассников в этот блок, как у меня, то вам нужно будет проделать:
1. Шаг первый,
2. открыть этот файл,
3. Вставить код из файла в то место, где хотите, чтобы находилась кнопка.
Сохранить шаблон.
P.S. Все, кто ставил себе блок кнопок социальных сетей, и хочет вставить кнопку Одноклассников в этот блок, как у меня, то вам нужно будет проделать:
1. Шаг первый,
2. открыть этот файл,
3. Вставить код из файла в то место, где хотите, чтобы находилась кнопка.
Сохранить шаблон.
