вход

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

Как создать простой плагин для добавления на 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 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
Один комментарий :

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

  1. SeeGang:

    Здравствуйте.
    Хочу применить Ваш плагин для добавления на Pinterest при помощи jQuery на сайт под управлением CMS Joomla 2.5.
    Прописал в CSS Ваш стиль, но не понимаю как и куда добавить код Javascript и инициализировать плагин.
    Подскажите как это реализовать на Joomla.
    Спасибо, отличный плагин.

Оставить комментарий

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

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.