Как поделиться ссылкой в социальных сетях?

Самыми распространенными гаджетами в наше время являются социальные кнопки. Что это такое? Это инструмент, позволяющий пользователю поделиться понравившимся материалом с друзьями. При этом вариантов его реализации достаточно много. Начиная с простой ссылки на скрипт публикации и заканчивая динамической кнопкой.

Как поделиться ссылкой в социальных сетях?

Более того, появились сторонние сервисы, обеспечивающие объединение инструментов публикации ссылок в различных социальных сетях. Взять, к примеру, блок «Поделиться», который предлагает сервис Яндекс API. Простой и удобный, он выполняет всего одну функцию – share (с англ. делиться). Вот только получается слишком много кода и мало возможностей для индивидуального оформления. В своей статье я хочу предложить вам более интересное решение. При этом будет использоваться стандартный: share.yandex.ru/go.xml. Если с этим разобрали, давайте копнём глубже?

Для публикации ссылки используется специальный скрипт социальной сети. Например, для того чтобы опубликовать ссылку в Twitter используется следующий URL:

https://twitter.com/intent/tweet?text={текс сообщения}&url={url к сообщению}

Понятно, что у каждой социальной сети имеется свой скрипт шаринга, со своими нюансами. Но стоит ли с этим разбираться? Яндекс всё сделает за нас. Ссылка шаринга Яндекс имеет следующий формат:

http://share.yandex.ru/go.xml?service={идентификатор сервиса}&url={адрес страницы}&title={заголовок страницы}&description={краткое описание}&image={адрес картинки}

Полный список идентификаторов и подробное описание Яндекс API блока «Поделиться» вы можете найти здесь. Нам же необходимо лишь сгенерировать требуемый набор ссылок. Ничего сложного здесь нет, но вариантов реализаций достаточно много.

Основная проблема, которая смущает меня в данном вопросе, это наличие самих ссылок. Отмечу, что чем больше ссылок на странице, тем меньше передаётся веса по каждой из них. Это основы SEO и тут не обойтись без JavaScript и обработки события click, а потом дальнейшего перенаправления через тот же document.location. С учётом использования JavaScript библиотеки jQuery код обработчика может иметь вид:

$('.clickme').click(function(){
  if( $(this).is('[title]') ) document.location = $(this).attr('title');
});

В данном случае, HTML элемент с CSS-классом .clickme станет псевдоссылкой, которая будет перенаправлять пользователя по адресу указанному в атрибуте title. Можно поступить и несколько иначе: например, открывая страницу в новом окне через тот же window.open(). Для публикации ссылки в социальных сетях это оптимальный вариант, т.к. скрипт шаринга может потребовать от пользователя авторизации, правки вводимых данных и т.д.

jQuery плагин ShareButtons

Если с теоретической частью разобрались, можно приступить и к готовым решениям. Первое моё решение представляет собой простенький jQuery плагин создающий набор li элементов, выступающих в роли псевдоссылок для шаринга. При этом он в состоянии самостоятельно получить требуемые данные. В частности, плагин считывает URL текущей страницы, содержание тега title, описание страницы из метатега description и адрес картинки из атрибута href тега link c rel="image_src". Вы также можете заменить эти параметры и своими значениями.

Я не буду вдаваться в подробности и объясню лишь как использовать плагин ShareButtons. Это действительно очень просто. Приступим?

Шаг 1. Для начала вам нужно подключить библиотеку jQuery. О том, что это такое и как её подключить я подробно рассказывал в посте о создании бокового выезжающего виджета Facebook. Сейчас же напомню лишь код строки, который надо (если он отсутствует) разместить в секции head.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Шаг 2. Теперь вам нужно подключить мой плагин ShareButtons. Бесплатно скачать его вы можете по ссылке ниже. Далее вставьте в секцию head следующих код:

<script src='http://sitename.ru/path/to/plugin/sharebuttons.js' type='text/javascript'></script>

Понятно, что здесь нужно прописать свой адрес в атрибуте src.

Шаг 3. Следующим шагом будет вставка кода активации плагина, который тоже надо разместить в секции head, например:

<script>
$(document).ready(function(){
  $("#sharebuttons").sharebuttons();
});
</script>

В данном случае мы дожидаемся полной загрузки документа и обрабатываем элемент с id="sharebuttons" в который и будет помешен список псевноссылок в виде тегов li. Как я и говорил, при активации плагина вы можете прописать свои настройки, например:

<script>
$(document).ready(function(){
  $("#sharebuttons").sharebuttons({
    services: 'vkontakte,facebook,twitter,gplus,blogger', /* идентификаторы кнопок */
    url: 'http://sitename.ru/path/to/file.html', /* URL-адрес страницы */
    title: 'Заголовок', /* заголовок страницы */
    description: 'Краткое описание.', /* краткое описание содержания страницы */
    image: 'http://sitename.ru/path/to/image.jpg', /* URL-адрес картинки */
    width: 400, /* ширина открываемого окна шаринга */
    height: 300, /* высота открываемого окна шаринга */
  });
});
</script>

Шаг 4. Использование плагина имеет один небольшой нюанс. Всё оформление кнопок производится через CSS. Напомню, ShareButtons генерирует только список тегов li. Поэтому следующим нашим шагом будет подключение соответствующей таблицы стилей, который вы можете найти в архиве плагина, например:

<link href='http://sitename/path/to/sharebuttons.css' rel='stylesheet' type='text/css'/>

В своём решении я использовал картинку с яндекса, включающая в себя иконки сервисов: http://yandex.st/share/static/b-share-icon.png. Она дублируется для всех «кнопок» в виде фона.

Шаг 5. Осталось лишь создать элемент с id="sharebuttons" в том месте документа, где должен выводиться список кнопок, например:

<ul id="sharebuttons"></ul>

Послесловие

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

sharebuttons

Twitter Facebook ВКонтакте Одноклассники Google+

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

Надежда Хачатурова
Наверное, с Вашей помощью я когда-нибудь постигну эти премудрости. Главное - начать, а потом пойдет как по маслу. Вопрос по статье. Меня интересует кросспостинг в LI. Встречала кнопку только на одном блоге, но автор меня послал куда подальше. Поняла, что сам редактировал. Я не обиделась. :) Ищу дальше.
Мирослав
мне от яндекса ну вот ниграмма не нравятся, хотя они элементарно ставятся
Константин Кирилюк
Для журналов на LiveInternet:

https://www.liveinternet.ru/journal_post.php?action=n_add&cnurl={адрес страницы}&cntitle={заголовок страницы}
Константин Кирилюк
Мирослав, аналогично, мне яндексовые кнопки не нравятся, мне нравится одна ссылка для шаринга в разные сервисы, а кнопки я оформляю так как того хочу сам, что и продемонстрировано в посте. Более того, в моём решении вообще ссылок нет, только псевдо ссылки, по которым вес не распределяется :)
Иван Шипилов
Любопытно, как же ты порекомендуешь мне оптимизировать статьи?
Константин Кирилюк
Иван, об основах оптимизации текста вы можете почитать тут.
Максим Булавинов
Константин, не в курсе, что за фигня с одноклассниками происходит - их кнопка ни в одном блоге на blogspot не работает сейчас. Сначала думал, что только у меня траблы - клацнуд "ОК" у тебя - то же самое.
Константин Кирилюк
Да, действительно, существует такой трабл, он ещё с марта кажись проявился. В тоже время, эта фишка касается видно только шаринга... надо будет в коде плюсо Одноклассники убрать, а вот стандартная кнопашка вполне работает... я говорю о сдвоенной мейловой. Впрочем, я эту кнопку ставить не хочу. Вообще Одноклассники не та соц.сеть с которой можно получить реальный траф... имхо :)
Максим Булавинов
Если блог нормальный и индексируется поисковиками, то да - без одноклассников можно обойтись. Однако, один из моих блогов вообще только за счет одноклассников жил - я туда тупо анекдоты копипастил из сети и лайкал. :) Со сдвоенной мэйловой тоже самое - работает только мэйловая часть. Одноклассники не дают даже напрямую ссылку кинуть на blogspot. Насчет марта - да, давно глючит, но периодически у меня это начинало работать, потом опять отрубалось. Например, неделю назад все работало.
Vitaly024
Константин, спасибо хороший код.
на статичной странице работает отлично, однако при попытке вставить в шаблон Jommla - кнопки перестали отбражаться

я смотрю времени прошло прилично - может быть уже готов плагин для Джумлы?
Константин Кирилюк
@Vitaly024 С джомлой я вообще никогда не работал, но если что свяжитесь со мной по e-mail и сообщите адрес сайта, я гляну.
Семен Муратов
А как осуществлен вывод блока "Поделиться" на текущей странице в настоящее время? Симпатично. Но сдается мне, что не совесм так, как описано здесь. Я не прав?
Константин Кирилюк
2Семен Муратов у себя на блоге я использую стандартный виджет Яндекс.Поделиться... если Вы об этом. Об этом подробней можете почитать тут.
Отправить комментарий