четверг, 1 июля 2010 г.

Социальные кнопки для Blogger.

Меня некоторое время назад заинтересовала тема - а как поставить на Blogspot кнопки внизу постов типа "сохранить вконтакте", добавить в Facebook и т.п.
То есть кнопки, нажав на которые ваш читатель может легко опубликовать ссылку на ваш материал в своём аккаунте какой-нибудь популярной социальной сети.
Но в Blogger как обычно возникли сложности: например родной java-скрипт предложеный на сайте вконтакте - на Blogger отчего-то не действует.
Пришлось искать другие пути. И они были найдены.

Дело в том, что на иностранных кнопках вроде "AddThis" или "ShareThis" предложено много сервисов, популярных в Европе и Америке. Но у нас-то в России своя специфика.
У нас популярны "вконтакте", "Я.ру", "мой мир и т.п. Вот для этого-то и надо поставить кнопки, которые актуальны для русскоязычного читателя.
Я нашёл способ сделать кнопки для Livejournal, вконтакте, Blogger, Facebook, Мой Мир, Я.ру, GoogleBuzz и Twitter.
Возможно позже список расширится.
К Liveinternet пока способа не нашёл.
Как это выглядит можно посмотреть у меня в блоге внизу сообщений. Значки кнопок можно ставить разные, смотря какие подходят к вашему дизайну.

Способы были найдены с помощью постов двух людей: sovety и artinblog. Спасибо этим людям!
Долго расписываться не хочу, публикую код сразу ко всем кнопкам. Кто хочет может взять только то, что нравится.
Надо нажать "расширить шаблоны виджета" в разделе "изменить html".
не забудьте на всякий сделать резервную копию своего шаблона.
Код следует вставлять после строки <data:post.body/> (Хотя если хотите можете вставить куда-нибудь ещё).

Код:
<b:if cond='data:blog.pageType == &quot;item&quot;'><noindex><div class='sharebuttons'><span style='color: #999999;'><b>Понравилось? опубликуй у себя:</b></span>
<div align='right'><p>


<a class='shareme' expr:href='&quot;http://www.livejournal.com/update.bml?subject=Ссылка: &quot; + data:post.title + &quot;&amp;event=&quot; + data:post.title + &quot;: &quot; + data:post.url' rel='nofollow'><img src='PICTURE' style='border: 0pt none;' title='TEXT'/></a>

<a class='shareme' expr:href='&quot;http://vkontakte.ru/share.php?url=&quot; + data:post.url' rel='nofollow'><img src='PICTURE' style='border: 0pt none;' title='TEXT'/></a>

<a class='shareme' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url ' rel='nofollow'><img src='PICTURE' style='border: 0pt none;' title='TEXT'/></a>

<a expr:href='&quot;http://www.blogger.com/blog_this.pyra?t&quot; + &quot;&amp;u=&quot; + data:post.url + &quot;&amp;n=&quot; + data:post.title + &quot;&amp;pli=&quot; + 1' target='_blank' title='В Blogger!'><img alt='TEXT' src='PICTURE' style='border: 0pt none;'/></a>

<a class='shareme' expr:href='&quot;http://connect.mail.ru/share?share_url=&quot; + data:post.url ' rel='nofollow'><img src='PICTURE' style='border: 0pt none;' title='TEXT'/></a>

<a class='shareme' expr:href='&quot;http://my.ya.ru/posts_add_link.xml?title=&quot; + data:post.title + &quot;&amp;URL=&quot; + data:post.url' rel='nofollow'><img src='PICTURE' style='border: 0pt none;' title='TEXT'/></a>

<a class='shareme' expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcURL=&quot; + data:blog.homePageUrl + &quot;&amp;srcTitle=&quot; + data:title' rel='nofollow'><img src='PICTURE' style='border: 0pt none;' title='TEXT'/></a>

<a class='shareme' expr:href='&quot;http://twitter.com/home?status=RT @ваш_ник_в_твиттере + &quot; + data:post.url + &quot; &quot; + data:post.title' rel='nofollow'><img src='PICTURE' style='border: 0pt none;' title='TEXT'/></a>

</p></div></div></noindex></b:if>
То что выше выделено зелёным - это тег, который делает так, чтобы кнопки появлялись только на самой странице поста, а не прямо на первой странице блога после каждого сообщения. Если вы этого не хотите - уберите его.
Где написано PICTURE - впишите адрес картинки для своей кнопки.
Где TEXT - впишите пояснительную фразу, которая будет появляться при наведении мышки на кнопку.

UPD! О том, как добавить к этим кнопкам кнопку "Google +1" написано в моём посте "Кнопка Google +1 для Blogger".

Чтобы кнопки немного "ожили" и меняли цвет при наведении на них - вставьте в свой CSS следующий код, придуманный artinblog:
.sharebuttons{
font-size: 13px;            /* размер шрифта */
font-weight: bold;         /* стиль текста: жирный */           
padding:5px;               /* отступ от границ */
border: none;   /* толщина и цвет рамки */
background: #FFFFFF;   /* фоновый цвет */
}

.sharebuttons a img{
border: none;
opacity:1.0;                 /* непрозрачность: 100% */
}

.sharebuttons a:hover img{
border: none;
opacity:0.7;                 /* непрозрачность: 70% */
}
Я вставил этот код себе перед строкой /* Footer
Пояснения в коде имеются, можно менять цвета, степень прозрачности и т.п.
Надеюсь, что это будет вам полезно.
Да, и ещё: чтобы незалогиненый в Я.ру пользователь при нажати на вашу кнопку вначале попадал на страницу с предложением залогиниться - вставьте себе в код перед тегом </head> следующий java-скрипт, который придумал sovety:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("a.shareme[href^='http://my.ya.ru']").attr("href", function() {
      return "http://passport.yandex.ru/passport?mode=auth&amp;retpath=" + escape(this.href);
  });
});
</script>
За подробностями ещё раз приглашаю всех в посты sovety и artinblog.

50 комментариев:

  1. Как раз искал способ сделать такие кнопки, а тут в ридере как по заказу статья на эту тему. Спасибо!

    ОтветитьУдалить
  2. Отлично! То, что нужно!
    Буду пробовать!

    ОтветитьУдалить
  3. Спасибо.

    Воспользуюь в своей новой теме

    ОтветитьУдалить
  4. Ну надо же недавно только думала о том, как себе такое сделать на блоге.. Спасибо большое за информацию! Если будут вопросы, можно обратиться?

    ОтветитьУдалить
  5. Получилось! Спасибо! Только не очень понятно, как сделать кнопки живыми и где этот css найти :)

    ОтветитьУдалить
  6. Nadezda, вставьте код перед строкой

    /* Footer

    должно будет заработать.

    ОтветитьУдалить
  7. я не могу эту строку найти почему-то... может я не там ищу?

    ОтветитьУдалить
  8. Ребята, гляньте у меня на сайте как я сделал. С кнопочками красивыми. Если понравится, спрашивайте. Расскажу как сделать.

    ОтветитьУдалить
  9. Медик - круто сделано. Расскажешь как добился?

    ОтветитьУдалить
  10. А не поделитесь кодом для самого blogger, как в вашем примере с девушкой в очках? Пытаюсь сама сделать, страница открывается, а в поле сообщения автоматом ссылка не встает. Уже голова дымится, а так хочется так же сделать.

    ОтветитьУдалить
  11. SEO-Дилетант'ка так я об этом пост и написал вроде, или я чего-то не понял в вашем вопросе.

    ОтветитьУдалить
  12. В вашей статье есть код для жж, я.ру, вконтакте, мейл, фейсбук, гугл биз, твиттер. А по ссылке, где вы показываете пример (девушка в очках) есть кнопка добавления в blogger. Здесь, в этой статье именно кода для добавления в блоггер нет. Вроде везде код похожий, я пыталась своими мозгами дойти, но что-то не получилось у меня.

    ОтветитьУдалить
  13. В общем, я разобралась сама, все получилось. Спасибо.

    ОтветитьУдалить
  14. спасибо огромное. Очень полезно!

    ОтветитьУдалить
  15. Большое спасибо! Поставил себе такие кнопочки. Только модернезировал маленько, чтобы в отдельном окне открывались. Кому интересно заходите.

    ОтветитьУдалить
  16. Спасибо огромное!
    Еще бы кнопку "Класс!" от Одноклассников также вставить.
    У меня самого никак не получается.

    ОтветитьУдалить
  17. А где брать ссылки на PICTURE ?
    И как в блоге МТ Вы добавили категорию похожие посты после основного поста.

    ОтветитьУдалить
  18. Volos_86, ссылка на picture - это адрес фотографии в сети. Обычно его легко узнать, кликнув по фото правой кнопкой мыши.

    О втором вопросе я писал тут:
    http://seorussian.blogspot.com/2008/11/ssylki-na-shozhie-soobwenija-v-konce.html

    ОтветитьУдалить
  19. еще такой момент: ссылка на твиттер выдает ошибку в ИЕ - это как-то можно подправить?

    ОтветитьУдалить
  20. Огромное спасибо за кнопки.
    На основе вашего кода и на ответе на этот (http://otvety.google.ru/otvety/thread?tid=57a1b18150c55db8&pli=1)вопрос, попытался сделать код для кнопки Класс!

    Но кнопочка при нажатии на неё приводит на страницу с ошибкой. Да и сама кнопка немного выше остальных получается. Думаю не я один буду благодарен если получится такую кнопку сделать.
    Так как код не получается вставить вот ссылка на страницу с кодом http://nokiabooks.ru/p/buttons.html

    ОтветитьУдалить
  21. Evgen, спасибо!
    Надеюсь ваш комментарий кому-нибудь пригодится.
    Что касается меня - я не поддерживаю "Одноклассников".

    ОтветитьУдалить
  22. А у меня вот какая проблема:http://mixajluta.blogspot.com/2010/09/blog-post_24.html#links
    Мета-код нужно вставлять в том же окне, что и вышеуказанные, но ничего не получается. Так хочется, что бы кто-то подсказал: в каком месте и в каком виде его вставлять.

    ОтветитьУдалить
  23. Не знаю, по-моему всё подробно и доступно, даже для дилетантов понятно. Автору спасибо! :-)

    ОтветитьУдалить
  24. Evgen, спасибо, но почему-то не работает(
    дизайн рвет (съезжает все влево) и выкидывает из одноклассников (если уже авторизован там)

    ОтветитьУдалить
  25. ...и всё-таки - дайте народу одноклассников, хоть вы и не поддерживаете. Вам только спасибо скажут)))

    ОтветитьУдалить
  26. буду признателен, если кто-нибудь выложит код на кнопку в одноклассники для Блоггер.сом! Стандартная форма не проходит.

    ОтветитьУдалить
  27. огромное спасибо, кнопки получились :)
    респект вам

    ОтветитьУдалить
  28. Здравствуйте, а как добавить доп. кнопочки в стандартную панель "post-share-buttons" ? Нравиться дизайн и компактный размер вместо огромных кнопищ. Пытался сам добавить вконтакте - получилось, но иконка отображается как "поделиться по почте", только в наведенном на нее режиме и переход не выполняется.

    Мои контакты:
    http://vkontakte.ru/the_kin
    Skype: kin_winnie

    Мой блог:
    http://yourdread.blogspot.com

    Буду рад вашей помощи

    ОтветитьУдалить
  29. Спасибо,хорошая статья.Обязательно воспользуюсь.

    ОтветитьУдалить
  30. спасибо большое, но не понимаю как "оживить кнопки"(((Footer не нашла

    ОтветитьУдалить
  31. Я дура)))Но я разобралась, огроомное спс)

    ОтветитьУдалить
  32. Отлично! То, что нужно!
    Буду пробовать!

    ОтветитьУдалить
  33. Спасибо вам, за такие кнопки, то что надо для моего блога...

    ОтветитьУдалить
  34. А чем вам от яндекса кнопочки не нравяться
    см. http://lovedfilms.blogspot.com/2011/08/blog-post_22.html#more
    поделиться

    ОтветитьУдалить
  35. Спасибо за столь полезную информацию. Доступно и полезно!

    ОтветитьУдалить
  36. Спасибо, осталось немного подмудровать и будет всё очень красиво выглядеть.

    ОтветитьУдалить
  37. А если вот это нету ???? куда тогда вставлять ???

    ОтветитьУдалить
  38. Только ваше подробное описание помогло. Спасибо. Мучилась наверное часа 3-4 пока не нашла Вас))

    ОтветитьУдалить
  39. Этот комментарий был удален автором.

    ОтветитьУдалить
  40. Большое спасибо! все получилось=)

    ОтветитьУдалить
  41. Здраствуйте я всталяю код а он пищет Ошибка при синтаксическом анализе XML (строка 2190, столбец 2): The markup in the document following the root element must be well-formed

    Что делать?

    ОтветитьУдалить