Кнопка Класс! Кнопка постинга в Одноклассники для Blogger Blogspot

Доброго времени суток, уважаемые читатели. Не так давно, 11 октября, я публиковала кнопки социальных сетей в виде единого блока. Однако упоминание социальной сети Одноклассники сыграло злую шутку, и многие пользователи приходят из поисковых систем именно в надежде найти эту кнопку.

Я решила исправиться и посвятить отдельную статью размещению кнопки Класс! от Одноклассников. С одной стороны установить кнопку не сложно, но есть ряд условий, которые необходимо выполнить.
Поэтому я посчитала, что лучше подробнее об этом рассказать.
Сразу оговорюсь:

Код кнопки Класс, описанный в этой статье уже адаптирован под платформу Blogger/Blogspot.

Если вы хотите, чтобы кнопка была расположена сразу в конце статей, то, как правило, код кнопки мы помещаем сразу после строки:

<data:post.body/>

но в силу того, что у кого-то уже установлены какие-то кнопки, у кого-то в том месте находятся рекламные блоки с Google Adsense, каждый в индивидуальном порядке подбирает место, в которое установить кнопку. Самый главный помощник в этом Firebug, более подробно о том, как им пользоваться в статье Как удалить внешние ссылки из шаблонов Blogger/Blogspot.

Если вы хотите, чтобы кнопка отображалась только на внутренних страницах, и их не было видно на главной, тогда код кнопки должен быть внутри кода:

<b:if cond='data:blog.pageType == &quot;item&quot;'> тут будет код кнопки </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. Вставить код из файла в то место, где хотите, чтобы находилась кнопка.
Сохранить шаблон.


Запись опубликована автором в рубрике Как создавать сайты с метками , .

Кнопка Класс! Кнопка постинга в Одноклассники для Blogger Blogspot: 62 комментария

  1. Дмитрий

    ооо супер, спасибо, я долго думал — почему никто еще не писал для блогера об этой кнопке? Спасибо, завтра буду ставить :-)

  2. SEO-Дилетант'ка

    Да, наверно, кто-нибудь да писал, но я тоже пока не встречала:)
    Кстати, я в статье об этом не написала, если будете вставлять четвертый вариант кнопки в блок с кнопками, как у меня в конце статьи, то напишите мне, я дам готовые стили именно для блока.
    Отдельно об этом не писала, т.к. на днях собираюсь внести изменения непосредственно в ту статью, где про этот блок кнопок рассказываю.

  3. Marii♕Capizzi

    Здравствуйте! Простите, я совершенно не в тему со своим вопросом, но я уже замучалась с поиском… как сделать разделы как у вас («главная», «о блоге», «об авторе») Буду очень признательна за ответ!

    http://mylittleblacksketch.blogspot.com/

  4. Дмитрий

    странно работает сам скрипт — если я залогонен в однокл, все равно по нажатию на кнопку просит ввести логин пароль, — ввожу — перегружает форму входа и опять просит :)

  5. SEO-Дилетант'ка

    Я не знаю, что ответить по этому поводу. Кнопку я проверяла, у меня проблем не было. Даже не знаю, что это вообще может быть.
    А в другом браузере пробовали?

  6. SEO-Дилетант'ка

    В инструментах блога, на вкладке Отправка, есть вкладка «Изменить страницы». На этой вкладке создаются статические страницы, можно создать 10 разных страниц. В блог верхнее меню выводится с помощью гаджета «Страницы» через вкладку Дизайн — Элементы страниц — Добавить гаджет.

  7. Lena Rat

    За материал спасибо:) кнопку на блог в целом я поставить смогла. А вот на конкретное сообщение поставить не могу. В чем загвоздка??

  8. SEO-Дилетант'ка

    Lena, как вы понимаете, о загвоздках можно только догадываться:). Ведь вы же не описали в чем именно заключается проблема установки кнопки на конкретное сообщение.
    Во-первых, в коде самой кнопки указа код, который подходит только для блогов на платформе Blogger, вы же оставили комментарий через Facebook и я даже не могу посмотреть, на какой блог вы ставили. Во-вторых, проблема, конечно, может быть в выбранном вами месте, т.е. установкой в конкретное место в шаблоне вы нарушаете целостность кода, который там уже находится, и в таком случае можно попробовать найти другое место. Третья причина может быть в том, что вы выполнили не все шаги, описанные мною в статье. Да мало ли что ещё может быть. Пожалуйста, объясните подробнее, и я постараюсь вам помочь.

  9. SEO-Дилетант'ка

    Геннадий, с одной стороны вы попытались мне подробно объяснить, с другой же стороны, если честно, я запуталась. Последний вариант — это то, что в самом конце статьи после PS?
    Там написано, что нужно повторить Шаг первый, т.е. вставить в head шаблона код. Вы это сделали?

  10. Геннадий

    Я не совсем внимательно прочел инструкцию и не проделал «Шаг первый». Теперь все сделал(понял после Вашего ответа на мой комментарий)!
    Вы знаете, но я бы посоветовал(извините за нескромность) Вам в этой записи: «Шаг первый,
    открыть этот файл,
    вставить код из файла в то место, где хотите, чтобы находилась кнопка.
    Сохранить шаблон.» кое что изменить. Как то не ясно выделена последняя инструкция…
    Я бы написал так: » …проделать: 1) Шаг первый; 2)открыть этот файл; 3)вставить код из файла в то место, где хотите, чтобы находилась кнопка.»
    Большое спасибо за этот пост!
    Очень хотелось бы узнать, как Вы умудряетесь созданный файл размещать на странице браузера. Файл я создать могу, но чтобы он мог так вот открываться и «зависать» для использования читателем — не умею(((.
    Но я хоть понял, как с помощью копирования этой ссылки на файл, можно открывать его в своем сообщении( я теперь подправил в своем посте кое-что :))
    Не против обмена постовыми. Сегодня напишу коротенький пост наподобии этого со ссылкой на Ваш.
    Предлагаю обращаться на ты.

  11. SEO-Дилетант'ка

    Пронумеровать что ли? В этом смысл исправления?:) Подправлю.
    По-поводу файла, у меня в блоге есть статья, как загрузить файл на блог blogger, поищи. Естественно, в сам блог загрузить невозможно, но решения есть. Прочитай в комментариях к той статье есть даже предложение лучшее, чем описанное непосредственно в статье.
    По-поводу постового — напиши мне на почту.

  12. Геннадий

    Дело не в нумерации, просто я воспринял в послених стороках поста так: Шаг первый — это «открыть этот файл», а затем вставить код, а не тот еще «Шаг первый». Я ведь не последний, кто не поймет, а потом будет приставать с расспросами.

  13. SEO-Дилетант'ка

    Да поправлю я… завтра. сегодня уже устала, даже открывать не хочу. А вообще, Геннадий, я заметила, ты во всем очень торопишься. Все быстро, на лету. И видно, все в руках горит, все спорится, только вот постоянно из-за этого невнимательный и маленькие недочеты всплывают… В последней статье опять ссылка на меня не совсем точная и в анкоре ошибка:)

  14. Nblame

    у меня такой вопрос подключил вашу кнопку все показывает но перестает работать скрипт jquery на сайте
    сайт работает на joomla (если это важно)

  15. SEO-Дилетант'ка

    Очень хотелось бы вам помочь, но я не сильна в скриптах, и не представляю, с чем это может быть связано. Можно предположить, что скрипт кнопки вступает в конфликт с уже имеющимся кодом на сайте, в таком случае, нужно выяснить, в каком именно месте происходит конфликт. У меня была проблема, например, на WordPress, когда я пыталась вставить в тег body команду onload для кнопки с учетом статистики, потом нашла готовый плагин.
    В общем, лучше, наверно, где-нибудь на форуме программистов задать вопрос.

  16. SEO-Дилетант'ка

    Я исходному коду страницы я вижу, что вы не выполнили все шаги по установки кнопки, а именно, в вашем случае, шаг первый. Да и кода самой кнопки вообще в шаблоне не видно. перечитайте внимательней статью и повторите все действия, которые необходимо.

  17. LesyaK

    Спасибо за подсказку. Кнопку почти установила. Она появилась в блоке моих соц. кнопок, но при нажатии на нее ничего не происходит. Что я опять не так сделала ? :(

  18. SEO-Дилетант'ка

    Смотрела, смотрела, что-то даже не знаю, в чем может быть проблема. Не вижу. Все, что могу посоветовать, это ещё раз все перепроверить, уделить особое внимание первому шагу, т.к. за работу кнопки отвечают именно те ссылки, которые вы указываете до тега , и может попробовать проделать шаг 2. У меня хоть и нет счетчика, но команду из второго шага я себе установила. Конечно, в этом не может быть проблема, а вдруг… Больше просто ничего не знаю:(

  19. LesyaK

    Ух, ну наконец-то. Проблема действтельно была в шаге №2. Спасибо огромнейшее.

  20. SEO-Дилетант'ка

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

  21. LesyaK

    Не получается добавить в блог кнопок социальных сетей. Пробовала и перед
    и в середину между другими кнопками и в начало. Нажимаю «сохранить шаблон», заожу в блог и никаких изменений. Можете подсказать в чем ошибка? posmotri-vokrug.blogspo…

  22. SEO-Дилетант'ка

    Шошана, спасибо за анализ моих статей, но хочу заметить, что при внимательном прочтении любой статьи и при четком соблюдении инструкций, у всех читателей все получается. Не надо искать проблемы в моих статьях. Если что-то не получилось у вас — ищите проблему в себе.
    Извините за резкость, но согласитесь, я же не обязана подстраиваться под всех. Очень сомневаюсь, что вы вообще найдете столько полезной и понятной информации для новичков в одном месте.
    Вы даже эту статью не прочитали внимательно, в которой написано, что если не можете найти , то поищите , а вы почему то ищите .
    Я спокойно отношусь к любой критике, но прежде, чем высказывать свое мнение, убедитесь в том, что вы действительно правы!

  23. Adam

    На вашем блоге есть кнопка одноклассники. Какой код добавить не подскажете? Хочу с одноклассниками.

  24. Adam

    Извините не там написал, но решение нашел в этом посте. Большое спасибо вам.

  25. Zarembavalera

    Кнопку поставил все работает . Только не могу разобраться как ее поставить на другую страницу сайта, что бы она была уже обновлена и счетчик сочетал уже с этой страницы ?
    Например кнопка Мне нравиться в контакте там нужно поставить параметр paga_ip то есть поставить ид страницы ! А вот с Одноклассниками не получается =(

  26. SEO-Дилетант'ка

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

  27. Zarembavalera

    Мне нужно что бы на каждой странице кнопка работала индивидуально ! а у меня получается что если в одной статье человек нажимает на кнопку то результат появляется +1во всех статьях где стоит кнопка

  28. SEO-Дилетант'ка

    В кнопке из этой статьи стоит идентификатор страницы, которая открыта в данный момент, т.е. кнопка считает только те клики, которые были сделаны на каждой конкретной странице, в общем то, что вы и хотите.
    Если у вас это не получается, то варианта два:
    1. Либо вы неправильно установили кнопку.
    2. Либо это глюк кнопки.
    Перепроверьте, пожалуйста, все что вы сделали, почитайте комментарии.
    Ещё раз повторю — код кнопки, приведенный в этой статье, адаптирован для учета голосов для каждой страницы индивидуально, и никак иначе. Именно эта кнопка не может показывать для всех страниц одинаковое количество голосов и не может показывать сумму голосов разных страниц.

  29. KIN_YourDread

    Здравствуйте, кнопку добавил, но вот раздражает одно — рамка, когда наводим мышь. пробовал шаманить, получилось что вообще сообщение не отображалось %)

    Быть может поможете с этим вопросом?

    http://yourdread.blogspot.com — мой блог, там же и контакты.

    а, и еще: как сделать (так для себя), что бы кнопки отображались после еще «нераскрытых» сообщениях, т.е. на главной ?

  30. SEO-Дилетант'ка

    Я так понимаю, шаманство закончилось удачно:). Заходила на блог, рамки не увидела.
    По-поводу второго вопроса. В той статье, из которой вы установили все кнопки эта тема (как открыть кнопки на главной) просто вся обмусолена. Почитайте комментарии, пожалуйста.

  31. KIN_YourDread

    Я шаманством в опере занимался — вообщем в ней кнопка не отображается, пока не наведешь на место для нее. а в мозиле — все хорошо. дошаманился, что рамка пропала.

    Спасибо Вам :)

    Время нет сесть поччитать подробно все и комментарии тоже =\

    Вот думаю добавить Disqus еще, можно оставлять комментарии под facebook, twitter и других? хотелось бы покрасивей, социальнее и удобней.

  32. SEO-Дилетант'ка

    А у меня в блоге кнопка одноклассников отображается в Опере?
    Последнее время Опера стала глючить, что касается верстки.
    За спасибо — спасибо, а вот фраза про время поражает. Значит свое время вы цените, а мое нет! Так нельзя. И потом про условные теги написано не только в комментариях, но и в самой статье. А про дискус у меня есть статья, ссылка на нее чуть выше начала комментариев. Цените мое время тоже, пожалуйста:).

  33. SEO-Дилетант'ка

    Тут в двух словах не скажешь, как так сделать. Самый простой способ — это нужно все кнопки поместить в контейнер div, а потом каждую отдельную кнопку поместить в span. Но придется каждую кнопку регулировать, чтобы они встали по одной линии. Можно также использовать таблицу, но там тоже придется регулировать кнопки, чтобы вставали в одну линию. Есть более изящное и чистое решение, вместо span использовать div, но при этом каждому div’у прописать float. Все это термины из HTML и CSS, т.е. без этих знаний самостоятельно не справиться. можете поискать готовые решения, уверена, где-то что-то есть.
    Я в ближайшее время собираюсь на форуме опубликовать статью об этом, если не найдете решения, можете позже заглянуть туда (на форум), может уже будет готовый вариант.

  34. Ktn Kvi

     Подскажите, пожалуйста, как кнопка «Класс» устанавливается в самих Одноклассниках.

  35. SEO-Дилетант'ка

    Я не знаю ответа на этот вопрос. Но вы подумайте, во-первых, разработчики Одноклассников сами должны об этом позаботиться, т.е. в любом случае от пользователей не требуется устанавливать какие-то кнопки. Во-вторых, в Одноклассниках же есть инструменты позволяющие поделиться найденной ссылкой с друзьями? Вот это и является реализацией кнопки Класс в Одноклассниках.

  36. SEO-Дилетант'ка

    Когда кто-нибудь отправит ссылку на вашу статью в одноклассники, тогда на кнопке появится 1, показывая, что один человек поделился в одноклассниках вашей статьей. Если это будет два человека, то будет цифра 2.

  37. Евгений Илясов

    Здравствуйте! По Вашим публикациям сделал у себя на блоге кнопки социальных сетей и добавил к ним кнопку «Одноклассники». Но почему-то кнопка «Одноклассники» становится невидимой, «прячется». когда курсор мышки наводится на любую из других, соседних кнопок. Как с этим бороться? Помогите, пожалуйста. Пример, как это выглядит, здесь: _http://21jvek.blogspot.com/2011/05/dizajn-bloga-master-klass-ot.html_

  38. Евгений Илясов

    Приношу извинения, ложная тревога. Это только в Опере кнопка себя так ведёт, на это уже указывали в комментариях. В других браузерах кнопки отображаются нормально. Спасибо.

  39. Руслан Бахарчиев

    body expr:class='»loading» + data:blog.mobileClass’

    Это и и есть злополучный body???Я дилетант в этих вопросах, но поиск этой штучки меня уже довел до белого каления.

  40. Евгений Илясов

    Да, только в Опере. В Windows или в Linux — без разницы. Все другие браузеры отображают кнопку «ОК» нормально. Хотел набросать сюда скриншотов, но передумал. Смирился с этим.
    Самое занятное, что на Вашем сайте я прекрасно вижу эту кнопку и в Опере.

  41. antony007

    Теперь даже заядлые любители одноклассников могут чувствовать себя в блогах «как дома», ведь этот виджет не засоряет,а идеально дополняет страницу блога. Очень полезный виджет. Спасибо!

  42. Владимир

    Спасибо. Не мог разобраться как изменить кнопку, помогла статья, спасибо. Пример можете глянуть на photorecipe.ru

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *