Главная / Сайтостроение / Лучшие коды кнопок для расшаривания в соцсетях

Лучшие коды кнопок для расшаривания в соцсетях

 Лучшие коды кнопок для расшаривания в соцсетяхУ меня на блоге уже есть две статьи о том, как самостоятельно сделать и поставить на сайт кнопки «поделиться» для разных соцсетей. Но за прошедшие полтора года у меня появились дополнения к ним, которые могут заинтересовать читателей. Сложился и более ясный и спокойный взгляд на этот вопрос. Которым спешу поделиться со своими читателями.

Зачем блогу свои кнопки соцсетей

Этот вопрос мне задают нередко. Ведь вокруг столько сервисов, которые предлагают отличные наборы «Поделиться», ставить которые, в чем-то, легче, чем возиться с размещением собственных кнопок! — Их действительно много и некоторые, действительно, хорошие.

Также, есть какие-то плагины. Эта сфера мной вообще не изучалась, так как я просто не вижу смысла ставить еще один плагин, когда все можно сделать самостоятельно. Те, кто читает Блоготея постоянно, знают, что я стараюсь минимизировать количество плагинов, работающих на блоге.

Но у кнопок от сторонних сервисов есть и минусы:

  • эти сервисы иногда «виснут» — соответственно «виснут» и кнопки. И,всегда, это происходит совсем не вовремя;
  • мы ограничены в возможности настраивать внешний вид и расположение кнопок;
  • вместе с кнопками мы получаем и ссылку на сервис, откуда их взяли;

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

Вообще, я думаю, что стоит поставить на блог и самодельные кнопки, и кнопки от сервиса. Например, блок «Поделиться» от Яндекса. Свои, например, поставить под статью, а Яндексовские — в сайдбар. Кнопок много не бывает!

А вот плавающие кнопки я, при всей моей любви к эффектам, теперь ставить не советую — так как доля мобильного интернета все больше. А если пользователь открывает сайт с плавающими кнопками на маленьком экранчике… бывает, что эти кнопки налезают прямо на текст. В общем, этих красот я теперь опасаюсь.

Коды для расшаривания в разных соцсетях

Поделиться в Твиттере

<a rel="nofollow" target="_blank" href="http://twitter.com/intent/tweet?text=RT @ВАШ_НИК <?php the_title(); ?> <?php the_permalink(); ?> %23ВАШ_ХЕШТЕГ" title="Твитнуть!"><img src="АДРЕС КАРТИНКИ"></a>

То, что написано большими русскими буквами — требует замены. Например, нужно вписать ваш ник в Твиттере. Далее будет следовать название статьи, потом — ссылка на нее. После ссылки прописан хештег (смотрите подробнее о Твиттере и хештегах тут http://blogotey.ru/twitter-bloggerou/ ). Это будет хештег, который появится во всех ретвитах, которые сделают при помощи этой кнопки.

Теоретически, можете дописать хоть 10 хештегов, но помните о 140 символах, допустимых в твите. Поэтому я ограничилась одним. Весь твит будет выглядеть так:

RT @Ваш_ник Название_статьи ссылка_на_статью #Ваш_хештег

Поделиться в LiveInternet или Ли.ру

<a rel="nofollow" target="blank" href="http://www.liveinternet.ru/journal_post.php?action=n_add&cnurl=<?php the_permalink(); ?>&cntitle=<?php the_title(); ?>" title="Поделиться в Ли.ру!"><img src="АДРЕС КАРТИНКИ"></a>

В коде для Ли.ру ничего, в общем-то, не изменилось. Он прекрасно прописывает ссылку, тайтл и краткую цитату в форму для публикации в дневнике на LiveInternet. У меня он берет цитату из анонса, который отделен от текста тегом more.

Поделиться в Фейсбук

<a rel="nofollow" target="blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" title="Поделиться в Фейсбуке!"><img src="АДРЕС КАРТИНКИ"></a>

На фейсбук достаточно закинуть ссылку. И уж он сам выведет и заглавие, и картинки на выбор (хотя иногда этот выбор очень странный smile ) В открывающемся окошке можно определить, расшаривать ссылку на личную стену, в группу или на страницу, которую вы администрируете. В общем, удобно и просто.

Поделиться в LiveJournal или ЖЖ

<a rel="nofollow" href="http://www.livejournal.com/update.bml?event=<?php echo urlencode(strip_tags(get_the_excerpt(), '<a><strong>'));
echo urlencode('<br/><a href="' . get_permalink() . '">Прочитать целиком</a>');
?>&amp;subject=<?php the_title(); ?>" target="_blank" title="Поделиться в ЖЖ"><img src="АДРЕС КАРТИНКИ"></a>

Вот во всем этому живому журналу нуЖЖно выперндриться. Видите, код не совсем такой, как для остальных сервисов! Но это не мешает ему нормально вставлять в форму для публикации название статьи и выдержку из нее. В отличие от Ли.ру, он берет часть текста под тегом more — около 380 символов (с пробелами). А все дальнейшее отрезает и ставит ссылку на статью с анкором «Прочитать целиком». Кстати, его можете поменять на свой.

Поделиться в Mail.ru или Мой Мир

<a rel="nofollow" target="blank" href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>" title="Отправить в Мой Мир!"><img src="АДРЕС КАРТИНКИ"></a>

Мой Мир не мудрит со своим коротельким кодом. Но он открывает удобное окошко, где есть и ссылка, и тайтл, и краткая цитата (из текста над тегом more), и картинки. Здесь есть и поле, в котором можно дописать что-то от себя.

Поделиться в Яндекс.Закладки и Я.ру

<a rel="nofollow" target="blank" href='http://zakladki.yandex.ru/newlink.xml?url=<?php the_permalink() ?>&name=<?php the_title(); ?>&descr=<?php the_excerpt(); ?>' title="Поделиться в Яндекс-Закладках и Я.ру (просто добавьте внизу формы галочку!)"><img src="АДРЕС КАРТИНКИ"></a>

Вот тут я произвела масштабные изменения!

Во-первых, я изменила добавление в блог на Я.ру на добавление в сервис Яндекс.Закладки. Почему? — Потому что Яндекс.Закладки ну очень важны для продвижения блога. А мы как-то ими не пользовались почти. При этом, из этой формы можно одновременно автоматически поделиться в блог на Я.ру! Для этого нужно просто поставить галочку внизу:

добавить в Яндекс.Закладки

А если развернуть вкладку «Больше» (отмечена справа в кружочке) — то можно добавить ссылку и в клуб на Я.ру, выбрать, кому будет видна ваша ссылка. Согласитесь, что такое расшаривание значительно выгоднее для продвижения блога, чем простая отправка ссылки в Я.ру!

Мало того. Этот код кнопки заполняет для вас почти всю форму:

  • Название
  • Ссылка
  • Описание

Сознаюсь, что в описание почему-то добавляются теги p — такой вот баг. Как пофиксю — напишу здесь апдейт. Но я думаю эти теги сильно не мешают. Текст берется из-под тега more. Длина выдержци около 380 знаков.

Ну а для традиционалистов, вот код прямого расшаривания на Я.ру:

<a rel="nofollow" target="blank" href="http://my.ya.ru/posts_share_link.xml?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>"><img src="АДРЕС КАРТИНКИ" title="Поделиться в Я.ру"></a>

Поделиться во Вконтакте

<a rel="nofollow" target="blank" href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" title="Поделиться Вконтакте!"><img src="АДРЕС КАРТИНКИ"></a>

Здесь все стандартно, как в Фейсбуке или Мейл.ру. Открывается своя форма с картинкой, ссылкой и кратким текстом, взятым над тегом more.

Поделиться в Одноклассниках

<a rel="nofollow" target="blank" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&amp;st.s=1&amp;st._surl=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Отправить в Одноклассники!"><img src="АДРЕС КАРТИНКИ"></a>

Вот пишу это и думаю: «А мне-то зачем эта кнопка?!» — Конечно, есть тематики, в которых расшаривание в Одноклассники будет весьма эффективно. Но не для Блоготея… В общем, форма там стандартная с картинкой, названием, ссылкой и краткой выдержкой из текста над тегом more.

Хотела я, было, поменять содержание этой своей кнопки. Например, на «Добавить в закладки». Даже иконку поменяла… Но — облом-с! Эта функция работает только в Мозилле и Опере, а в Хроме и Сафари не работает. А все-таки кнопка должна работать везде и всегда…

Поэтому я заменила эту кнопку на

Поделиться в Tumblr

<a rel="nofollow" target="blank" href="http://www.tumblr.com/share" title="Поделиться в Tumblr"><img src="АДРЕС КАРТИНКИ"></a>

При расшаривании этой кнопкой открывается специальная форма Tumblr, в котором можно выбирать, каким типом контента делиться — картинкой, цитатой, ссылкой и так далее. Все красиво и удобно.

Хотя, я продолжаю поиски более полезного использования этой моей последней кнопки — предлагайте варианты!

Кнопка, которую лучше ставить отдельно

Мой любимый Гугл+ — весьма капризен и не желает, чтобы в него расшаривали ссылки при помощи всяких самодельных кнопок. Раньше он просто не учитывал такие плюсы, а потом и вовсе отказался воспринимать контент, отправляемый таким способом.

Ну и ничего — поставить официальную кнопку совсем нетрудно!

Как оформлять кнопки для расшаривания в соцсетях

Во-первых, нужно «обернуть» нужные кнопки в какой-то контейнер. Например, в контейнер div. И ему можно приписать класс CSS. Выглядеть это будет, примерно, так:

<div class="ИМЯ КЛАССА">
код кнопки 1
код кнопки 2
код кнопки 3
</div>

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

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

<img src="АДРЕС_КАРТИНКИ" width="30" height="30">

Меняя эти числовые значения, вы сможете подогнать размеры иконок под желаемые.

Читайте также

Как оптимизировать картинки для блога?

Как оптимизировать картинки для блога?

Недавно мы обсуждали, как важен для блога качественный графический контент. В комментах к статье было ...

Один комментарий

  1. Вячеслав

    Реанимированные комменты

    Блогобабушка:
    03.03.2014 в 15:24
    Напиши больше о закладках Яндекса, чем они привлекли твое внимание

    Katyaru:
    03.03.2014 в 15:28
    smile Заказ принят!

    tanichka:
    04.03.2014 в 22:33
    Раньше я регулярно добавляла свои статьи в я-закладки, но у меня там хранятся нужные закладки и список как-то разбух, надо будет специальные папки для блогов сделать.

    Katyaru:
    04.03.2014 в 22:36
    Разумно. Еще можно по тегам сортировать… Сделать для нужных ссылок отдельный тег

    Зоя-путешественница:
    04.03.2014 в 21:17
    Подтверждаю: есть у меня и самодельные кнопки (авторские, от Блоготея), и от ресурса. Удобно, красиво. Вот с закладками Яндекса я не в курсе: чем так интересны? У меня они есть, жму всегда и свои, и там, где вижу кнопочку, а отдачи не замечаю. В чем?

    Katyaru:
    04.03.2014 в 22:34
    Напишу подробно, когда сама проясню некоторые вопросы. Но вообще, закладки Яндекс тоже учитывает при расчете авторитетности. И ведь так мы «убиваем двух зайцев» — делимся и в закладках, и в Я.ру.

    tanichka:
    04.03.2014 в 22:35
    Надо будет с хештегами в фиде разобраться.

    Katyaru:
    04.03.2014 в 22:37
    Если у тебя трансляция через фидбернер в твиттер, то там стоит поставить опцию «добавлять хештеги из категорий». Мне показалось, это самый удобный путь.

    Сергей:
    11.05.2014 в 18:45
    а где же Google+

    Katyaru:
    26.05.2014 в 11:33
    Про Гугл+ я неоднократно писала, что рекомендую ставить родной код, так как это влияет на статистику Гугла

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

Ваш e-mail не будет опубликован.