Как создать простой плагин для добавления на Pinterest при помощи jQuery


Как известно, Pinterest сегодня вырос из обычного сервиса и стал популярным настолько, что стал, пожалуй, одной из самых известных социальных составляющих средств массовой информации. Сервис Pinterest позволяет нам собирать, организовать и делиться с другими всеми красивыми и интересными вещами, которые мы находим в Интернете. Очень полезный сервис, особенно когда собираешь изображения одной тематики в коллекции.

Что такое Pinterest?

Pinterest— это социальный сервис, позволяющий пользователям добавлять в режиме онлайн изображения и помещать их в тематические коллекции. После того, как изображения загружены на Pinterest, они называются Пинами (англ. Pins), а коллекции, к которым они принадлежат, — это Доски (англ. Boards).

Но как вы понимаете, чтобы обрести такую популярность и сделать для обычного пользователя процесс добавления понравившихся ему вещей очень простым, нужен был особый механизм или кнопка, позволяющая одним кликом добавлять все найденное в Pinterest.

Как вы могли заметить, в настоящее время кнопки для добавления контента в Pinterest можно найти на большинстве веб-сайтов. К тому же существует специальный скрипт, который сканируют веб-страницы на наличие изображений, и позволяет найденные изображения легко прикрепить к вашим коллекциям. Однако, иногда такой скрипт может стать очень неудобным, например когда страница содержит более 30 изображений. Сканирование всех этих изображений займет некоторое время, а иногда совсем неудобно ждать пока найдутся все изображения.

Как альтернативным решением проблемы может служить скрипт, который сразу позволяет прикрепить изображения к коллекции.
Это очень простой плагин. Он ищет изображения внутри обозначенного контейнера, и когда курсор мыши находится над определенным изображением, просто выводит кнопку PinMe.

Как это выглядит

Как создать простой плагин для добавления на Pinterest при помощи jQuery
Как создать простой плагин для добавления на Pinterest при помощи jQuery
Посмотреть демо

HTML

В самом документе никакого кода вообще нет, достаточно просто подключить два файла CSS и Javascript или если вы используете уже свои собственные файлы стилей и скриптов, то можете просто добавить содержимое в свои файлы. И не забудьте инициализировать плагин.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.pinit.js"></script> <script type="text/javascript"> $(function () { $('img').pinit(); }); </script> 

 

CSS

Вы можете изменять внешний вид как всегда при помощи  CSS. Я сделал 2 полупрозрачных изображения (светлое и темное). Стили как видите максимально простые.

.pinit { position:relative; display:inline-block; } /* pin it overlay style */ .pinit .pinit-overlay { position:absolute; top:0; left:0; width:100%; height:100%; z-index:200; display:none; background:transparent url('../images/semi-white.png') repeat 0 0; text-align:center; } /* button style, and center it */ .pinit .pinit-overlay a { position:relative; top:50%; left:50%; margin:-10px 0 0 -21px; display:block; width:43px; height:20px; background:transparent url('../images/pinit-button.png') no-repeat 0 0; text-indent:-9999em; } .pinit .pinit-overlay a:hover { background-positon: 0 -21px; } .pinit .pinit-overlay a:active { background-position: 0 -42px; } 

 

Javascript

Здесь мы делаем простой плагин, который обрабатывает изображение в контейнере с классом .pinit.

(function($){ //Attach this new method to jQuery $.fn.extend({ pinit: function(options) { var defaults = { wrap: '<span class="pinit"/>', pageURL: document.URL } var options = $.extend(defaults, options); var o = options; //Iterate over the current set of matched elements return this.each(function() { var e = $(this), pi_media = e.data('media') ? e.data('media') : e[0].src, pi_url = o.pageURL, pi_desc = e.attr('title') ? e.attr('title') : e.attr('alt'), pi_isvideo = 'false'; bookmark = 'http://pinterest.com/pin/create/bookmarklet/?media=' + encodeURI(pi_media) + '&url=' + encodeURI(pi_url) + '&is_video=' + encodeURI(pi_isvideo) + '&description=' + encodeURI(pi_desc); var eHeight = e.outerHeight(); e.wrap(o.wrap); e.after('<span class="pinit-overlay" style="height: ' + eHeight + 'px"><a href="' + bookmark + '" class="pinit-button">Pin It</a></span>'); $('.pinit .pinit-button').on('click', function () { window.open($(this).attr('href'), 'Pinterest', 'width=632,height=253,status=0,toolbar=0,menubar=0,location=1,scrollbars=1'); return false; }); $('.pinit').mouseenter(function () { $(this).children('.pinit-overlay').fadeIn(200); }).mouseleave(function () { $(this).children('.pinit-overlay').fadeOut(200); }); }); } }); })(jQuery); 

 

А потом просто используем ссылку:

http://pinterest.com/pin/create/bookmarklet/?media={MEDIA_URL}'&url={URL}&is_video={IS_VIDEO}&description={DESC}

 Заключение

На этом все. Простой плагин, и сделан с помощью JQueryвсего за полчаса. Я испытывал его в различных браузерах (Chrome, Firefox, IE 7 +), и они прекрасно работали с ним. Удачного пиннинга :)

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

Один отзыв

  1. SeeGang13/01/2014

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

18 − 7 =