17 октября 2017

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

Уроки

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

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

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

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

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

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

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

vkontakte: function(purl, ptitle, pimg, text) {
    url  = 'http://vkontakte.ru/share.php?';
    url += 'url='          + encodeURIComponent(purl);
    url += '&title='       + encodeURIComponent(ptitle);
    url += '&description=' + encodeURIComponent(text);
    url += '&image='       + encodeURIComponent(pimg);
    url += '&noparse=true';
    Share.popup(url);
},

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

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

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

popup: function(url) {
    window.open(url,'','toolbar=0,status=0,width=626,height=436');
}

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

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

$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 href="http://vk.com/share.php?url=$Link&title=$Title&description=$Description&image=$ImageUrl&noparse=true" onclick="return Share.me(this);" rel="nofollow">ВКонтакте</a>

<!-- Facebook  -->
<a href="http://www.facebook.com/sharer/sharer.php?s=100&p%5Btitle%5D=$Title&p%5Bsummary%5D=$Description&p%5Burl%5D=$Link&p%5Bimages%5D%5B0%5D=$ImageUrl" target="_blank" rel="nofollow">Facebook</a>

<!-- Mail.Ru  -->
<a href="http://connect.mail.ru/share?url=$Link&title=$Title&description=$Description&imageurl=$ImageUrl" rel="nofollow">Mail.Ru</a>

<!-- Одноклассники  -->
<a href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st.comments=$Description&st._surl=$Link" rel="nofollow">Одноклассники</a>

<!-- Twitter  -->
<a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Ffiddle.jshell.net%2F_display%2F&text=$Title&url=$Link" rel="nofollow">Twitter</a>

<!-- Telegram  -->
<a href="https://telegram.me/share/url?url=$Link&text=$Title" rel="nofollow">Telegram</a>

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

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

<script type="text/javascript">
function setOnclick(a) {
    a.setAttribute("onclick","popupWin = window.open(this.href,'contacts','toolbar=0,status=0,width=626,height=436'); popupWin.focus(); return false");
    }
function externalLinks() {
    var links = document.getElementsByTagName("a");
      for (i=0; i<links.length; i++) {
        if (links[i].getAttribute("href") && links[i].getAttribute("rel") == "nofollow") {
          setOnclick(links[i])
        }
      }
    }
window.onload = externalLinks;
</script>

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

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

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

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

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

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

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