Дизайн кнопки «закрепить» в pinterest для веб-сайтов, показанный на странице их полезных товаров призывает веб-дизайнера вставить специально помеченный тег привязки на свою веб-страницу. Затем страница должна вызывать шаблон pinit.js.
Специальный тег привязки должен быть таким:
<a href="http://pinterest.com/pin/create/button/?
url=http%3A%2F%2Fpage%2Furl
&media=http%3A%2F%2Fimage%2Furl"
class="pin-it-button" count-layout="horizontal"></a>
а шаблон pinit.js должен выглядеть так и должен располагаться после последней булавки.
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js">
</script>
Насколько я могу судить, код pinit.js делает следующее:
- сканирует страницу на наличие якорных тегов
- ищет специальные маркировки, в частности, класс "pin-it-button" и префикс href
- заменяет теги привязки переформатированными IFRAME. Атрибуты
srcдля этих iframe получают нормализованные URL-адреса, указывающие на другой сервер, а не на pinterest.com, а на сервер из CDN, который использует pinterest.
Это нормально на статической веб-странице, но:
- он не работает на динамической странице, где кнопки «закрепить» могут динамически генерироваться с помощью логики jquery и внедряться в разметку страницы в ответ на действия пользователя.
- для каждой кнопки «закрепить» требуется один iframe, что означает один HTTP GET для каждой кнопки «закрепить». Если у вас есть 10 фотографий, каждая с кнопкой pinit, то есть 10 HTTP GET для CDN pinterests. Все эти GET предназначены для ресурсов с одинаковыми именами, но все они немного отличаются в зависимости от URL-адреса изображения, которое нужно закрепить, и поэтому не могут быть кэшированы.
Что я хотел бы сделать, так это устранить чрезмерные GET. Есть идеи?
У меня была одна идея:
- вставьте ровно один тег привязки в div со стилем
display:none;. - вызовите pinit.js, что приведет к волшебной замене этого тега привязки и загрузке нового iframe. Он невидим, потому что все еще находится в невидимом элементе div.
- запустите дополнительную логику JS, чтобы проверить URL-адрес атрибута src для сгенерированного iframe, сохранив имя хоста для CDN pinterest.
- ?
Затем я могу сгенерировать «нормализованные» URL-адреса для CDN pinterest, но... если я просто использую их как src для iframe, сгенерированного моей логикой, у меня будет та же проблема с чрезмерными GET. Все, что я сделал, это исключил последовательные вызовы pinit.js (который в любом случае кэшируется).
Кто-нибудь сталкивался с этим?
Я должен верить, что этот дизайн изменится — он кажется не масштабируемым для Pinterest в том виде, в котором он работает сейчас.
ИЗМЕНИТЬ
Я прочитал где-то еще, что pinterest предоставляет «асинхронный» механизм для кнопок «закрепить» на странице, подходящий для использования, когда кнопок «закрепить» много. Не уверен, что это такое; Я не мог найти его.
