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

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

Более того, появились сторонние сервисы, обеспечивающие объединение инструментов публикации ссылок в различных социальных сетях. Взять, к примеру, блок «Поделиться», который предлагает сервис Яндекс 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>

Послесловие

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