Веб-Острова Анатолия Куликова

Собственные социальные кнопки

Собственные социальные кнопки

В этом небольшом уроке мы создадим простые и кастомные кнопки для шаринга в социальные сети.

Зачем нужны такие кнопки? Главная задача — возможность оформить их так, как необходимо под конкретный дизайн. Существуют разные сервисы для создания кнопок социального шаринга — типа pluso.ru, блок «Поделиться» от Яндекс и многие другие. Количество достаточное. Но их главный минус — дизайн. Я не говорю, что их дизайн плох, даже наоборот — сделаны они универсальны и подойдут почти под все проекты. Но их внешний вид поменять практически невозможно, а все попытки сводятся к построению костыльно-велосипедной системы, что не есть хорошо. К тому же зачастую ресурсы (типа скрипта и изображений) подгружается с сервера сервиса — сейчас всё работает достаточно стабильно, но раз в год и Google падает (но это не точно).

Предлагаемый мной вариант лишен этих недостатков — все файлы будут на вашем сервере (то есть упадёт вместе с сайтом), ничего не подгружая извне, и к тому же очень хорошо кастомизируется. Кроме того, у нас будет небольшой плюс — обыкновенно в состав социальных кнопок входит большая тройка (ВКонтакте, Facebook и Twitter). В нашем случае в обойме присутствует Mail.Ru, Одноклассники и Telegram, чтобы никто не ушёл с нашего сайта нерасшаренным.

Единственный существенный минус: количество нажатий на кнопки считаться не будет. Мы уходим за рамки простоты и гибкости.

Впервые вопрос о собственных кнопках соц.сетей меня посетил в тот момент, когда для страницы на сайте социальный шаринг был очень нужен, но все ресурсы не подходили по дизайну. И не меня одного — сама идея кастомных кнопок далеко не новая. Самое интересное решение, на мой взгляд, было мной обнаружено на Хабре и после непродолжительных поисков привела на GitHub. Я взял за основу логику работы таких кнопок шаринга и творчески их доработал.

Решение простое как валенок — делаются ссылки для социальных сетей, внутри которых передаются понятные им параметры. Поскольку для этого используется тег <a>, то в него можно завернуть практически всё, что угодно — простор для кастомизаций (ради чего всё это и делается) огромный.

Но у этого скрипта есть один недостаток — скрипт, который обрабатывал поведение браузера при нажатии на одну из кнопок. Привожу его часть, в которой вы сами легко увидите две проблемы:

Первая проблема небольшая и многие могут сказать мне: “Эй, чувак написал это в 2012 году! Просто поменяй строчку и всё”. И я с вами соглашусь, что можно просто поменять vkontakte.ru на vk.com и просто закрыть вопрос.

Вторая — под каждый сервис нужно писать новый блок. Который тоже сделать не очень-то проблемно, просто скопипастив и убрав/добавив нужные параметры.

Но что делает этот скрипт в итоге? Он просто создаёт всплывающее окно, в которое передаёт перечисленные параметры. Вот эти строчки:

Вот именно работу этого скрипта я немного видоизменил. Но об этом чуть ниже. Рассмотрим сами кнопки и принцип их работы.

Вначале нам необходимо иметь несколько переменных для кнопок шаринга:

  • $Title — Заголовок (название) страницы
  • $Description — Описание страницы
  • $ImageUrl — путь к изображению страницы
  • $Link — прямая ссылка на страницу

Я назвал их условно, чтобы было наглядно понятно, сколько их необходимо и что они из себя представляют. Каким способом они будут браться на вашем сайте — вручную или автоматически — зависит только от приложения, на котором это будет исполнено. Например, в CMS WordPress это будет выглядеть так:

  • $Title — это <?php the_title(); ?>
  • $Description — <?php the_excerpt(); ?>
  • $ImageUrl — <?php $thumb_id = get_post_thumbnail_id(); $thumb_cover_url = wp_get_attachment_image_src($thumb_id, ‘og-image’, true); echo $thumb_cover_url[0]; ?>
  • $Link — <?php the_permalink();?>

Теперь в нужном нам месте вставляем следующий код, где на место переменных подставляем нужные значения (если необходимо):

Кнопку для каждой социальной сети я подписал.

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

Что происходит — скрипт следит за всеми нажатиями на <a>, у которого атрибут rel=”nofollow”. Можно поставить любой, но этот ещё подсказывает роботам, что по этим ссылкам ходить не нужно — делаем комбо одним приёмом. При нажатии он открывает окно размером 626 на 436 пикселов (параметры width=626,height=436), которые можно поменять на свой вкус.

Вот и всё! Результат работы вы можете увидеть в конце этой статьи.

Конечно, у этого скрипта есть существенный недостаток — он не умеет считать количество нажатий. Но как лёгкое, быстрое и легко кастомизируемое решение просто незаменим. В тег <a> можно запихнуть всё что угодно — текст, картинки, svg-графику — больше вас ничто не ограничивает (кроме фантазии, разумеется).

Анатолий Куликов

Анатолий Куликов

Автор блога, дизайнер, веб-разработчик