В этой статье я покажу, как добавить призыв к действию Pinterest поверх изображения, когда пользователь активно взаимодействует с ним.
Во-первых, давайте посмотрим, почему вы хотели бы это сделать.
Делиться заботой
То, что составляет хороший контент, часто во многом зависит от конкретных потребностей и интересов конечных пользователей. Хороший контент может быть привлекательным, эффективным, простым, функциональным, информативным, вдохновляющим… и так далее.
Мы привыкли добавлять кнопки социальных сетей или ссылки, чтобы делиться страницей (в идеале, с помощью кнопок без жира ). Facebook, Twitter и Google+ часто являются основными необходимыми.
Мы также можем захотеть, чтобы пользователи могли делиться частями нашей страницы. Содержимое страницы часто состоит из чанков, и каждому из этих чанков может быть предоставлена своя предпочтительная функция совместного использования в социальных сетях.
Например, цитата может быть нацелена на ограничение в 140 символов Twitter, а картинка может быть нацелена на Pinterest.
Давайте посмотрим, как вы настраиваете свои изображения для публикации в Pinterest.
Анатомия булавки URL
URL-адрес Pinterest Pin состоит из четырех компонентов:
- часть URL Pinterest:
https://www.pinterest.com/pin/create/button/ - параметр
url: адрес страницы для ссылки, закодированный в URL - параметр
media: адрес картинки для обмена, закодированный в URL - параметр
description: описательный текст, отображаемый на Pinterest, в кодировке URL, не более 500 символов, но 200 символов, кажется, лучший выбор .
Некоторые элементы данных HTML могут быть добавлены, если вы добавите собственный JavaScript data-pin-do Pinterest, особенно data-pin-do и data-pin-config , но в этом случае он не понадобится, так как это метод без жира, в котором мы полагаемся строгое минимальное количество кода.
Трудно закодированный путь
Код, который мы хотим получить, выглядит следующим образом:
<a href="http://www.pinterest.com/pin/create/button/?url=<page url (encoded)>&media=<picture url (encoded)>&description=<HTML-encoded description>" target="_blank" class="pinterest-anchor pinterest-hidden"> <div class="pinterest-logo"> </div> </a> <img src="<picture url>" data-pin="pinIt" alt="<description>">
Каждое пригодное для дробления изображение (помеченное атрибутом data-pin ) имеет префикс с привязкой к странице общего pinIt Pinterest с правильными атрибутами в ее URL-адресе, а также pinIt div для отображения логотипа.
Здесь используются три CSS-класса: pinterest-anchor , который абсолютно устанавливает позицию логотипа Pinterest в верхнем левом углу изображения; pinterest-hidden , который устанавливает статус видимости логотипа, и pinterest-logo , сам логотип, 40 × 40 пикселей, закодированный в base64 в CSS.
.pinterest-anchor { margin-left:10px; margin-top:10px; position:absolute; z-index:42; width:40px; height:40px; } .pinterest-hidden { display:none; } .pinterest-anchor:hover { display:block !important; } .pinterest-logo { background: url("data:image/png;base64,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") no-repeat center center; background-size: 40px 40px; height: 100%; width: 100%; }
Анимационная часть — показ и скрытие логотипа при наведении на изображение — обрабатывается в JavaScript с использованием нотации jQuery:
$("img[data-pin='pinIt']").each(function() { $(this).hover(function() { $(this).prev().css("display", "block") }, function() { $(this).prev().css("display", "none") }); });
Автоматизация — твой друг
Но я не хочу раздувать свой контент-код тем конкретным фрагментом HTML, который ставит префикс для разделяемой картинки. Одна только его часть обслуживания будет иметь определенную стоимость, если что-то изменится, такую как URL ресурса Pinterest, параметры и поддержка других социальных сетей.
Поскольку JavaScript уже используется для управления взаимодействием с мышью, давайте сделаем еще один шаг и сгенерируем этот код для любого изображения на странице.
Используя jQuery снова, мы получаем:
$("img[data-pin='pinIt']").each(function() { $(this).before('<a href="http://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent($(location).attr("href")) + '&media=' + encodeURIComponent($(this).attr("src")) + '&description=' + encodeURIComponent($(this).attr("alt")) + '" target="_blank" class="pinterest-anchor pinterest-hidden"><div class="pinterest-logo"> </div></a>'); $(this).hover(function() { $(this).prev().css("display", "block") }, function() { $(this).prev().css("display", "none") }); });
Для каждого изображения с атрибутом data-pin установленным на pinIt , мы pinIt в pinIt префикса к pinIt привязки, получая URL-адрес страницы непосредственно из атрибута location страницы, URL-адрес изображения из href изображения и описание из его alt текста, при этом должным образом кодирование компонентов URI.
Это продемонстрировано в следующем CodePen
Но нужен ли нам jQuery?
Дело в том, что jQuery может и не понадобиться . Если вам это не нужно, вам подойдет простой старый ванильный JavaScript. На самом деле, я считаю хорошим упражнением время от времени переводить фрагменты кода jQuery в обычный JavaScript. Это напоминание о том, как все работает за кулисами.
var pinables = document.querySelectorAll('img'); Array.prototype.forEach.call(pinables, function(el, i){ data = el.dataset; if (data.pin=='pinIt') { el.insertAdjacentHTML('beforebegin', '<a href="http://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent(window.location.href) + '&media=' + encodeURIComponent(el.src) + '&description=' + encodeURIComponent(el.alt) + '" target="_blank" class="pinterest-anchor pinterest-hidden"><div class="pinterest-logo"> </div></a>'); el.onmouseover = function(){ this.previousSibling.style.display='block'; } el.onmouseout = function(){ this.previousSibling.style.display='none'; } } });
Селектор изображений — $("img[data-pin='pinIt']").each — теперь представляет собой массив всех изображений, для которых мы проверяем значение атрибута данных. Остальная часть кода является прямым переводом реализации jQuery.
Как вы можете видеть в этой ручке, она работает точно так же.
Куда пойти оттуда?
В веб-дизайне и пользовательском опыте простота — путь. Мы не хотим загромождать наши интерфейсы логотипами социальных сетей. В этом смысле этот подход очень чистый: логотип появляется только тогда, когда пользователь наводит курсор на изображение; и логотип Pinterest достаточно известен, поэтому нам не нужно добавлять текстовую ссылку рядом с ним, чтобы объяснить его значение.
Однако форма совместного доступа открывается в новом окне, которое выводит пользователя за пределы текущей страницы. Как утверждает Крэйг Баклер в своей статье , «это слишком далеко для самого нетерпеливого менеджера по социальным медиа». Небольшое всплывающее окно, чтобы показать, что это может быть жизнеспособной альтернативой, для которой он дает ванильную реализацию JavaScript.
Для интересующихся небольшая подсказка: в нашем случае у цели нет атрибута href , но у его родительского узла он есть. (Вы можете проверить реальную реализацию этого.)
Итак, что вы думаете о кнопках социальных сетей? Вы предпочитаете подход без жира или предпочитаете использовать все функции, которые может предложить JavaScript? Дайте нам знать об этом в комментариях!