что такое Pinterest и как легко Pin it картинки с инета и как создать кнопку Pin it на фотках в вашем блоге

привет! я тут стала таким активным юзером pinterest что не могла не сделать кнопку Pin it (далее буду просто писать "пнуть", "пинать") на фотках в своем блоге! 

(немного отвлекусь, я называю кнопку pinterst не pin it а "пнуть" или  говорю "пинать" карттинки просто потому что мне так удобно, и даже так довольно прикольнее... хотя конечно так значение иное... но вот как-то так)

для начала напишу вам что такое pinterеst, ну вдруг кто-то не знает!

pinterest - это что-то типа вашей  онлайн - mood board (а муд боард - это что-то вроде пробковой доски на которую вы  крепите кнопкой (канцелярским гвоздиком) всякие полезные бумажки, фотки, записки, идеи и все такое... вот пинтерест - эта ваша муд боард в инете! когда вы серфите в инете и видите клевые картинки, фотки, мк и все такое вы легко можете все это дело "пнуть" к себе на онлайн-муд боард и у вас всегда будет ссылка на автора картинки, идеи (кстати очень актуальный пост в связи с последними событиями) (если вдруг интересна история пинтереста, читайте ее в википедии). для того чтобы завести свою онлайн-муд боард достаточно пройти легкую и бесплатную регистрацию.

1. про то как пинать картинки с любого ресурса

a) если у вас есть ipad или iphone то пинать картинки намного проще, достаточно скачать приложение вот тут (для мac  тоже есть, но мне оно не нравится, и я пинаю все картинки с сафарика (о том как это делать читайте в пункте 1. б)

в этом приложении есть прям типа свой браузер с уже встроенной кнопкой "пнуть" картинку

вот так там  выглядит муд боардс

вот к примеру я открыла свой сайт через приложение пинтерест в айпаде

нажала на красную кнопку в верхнем правом углу "пнуть" (pin it) и у меня вылезло окно с всеми картинками что есть на сайте чтобы их можно было "пнуть"

я выбрала картинку (нажала на нее) и вот всплыло такое окно с выбором муд боар

все довольно легко, а дальше я расскажу как сохранять картинки без приложения, прямо в любом бораузере

б) Пинать картинки с любого ресурса не имея модных дивайсов легко! делать это  можно прям с вашего браузера! для этого вам нужно сделать вот что:

зайдите в ваш браузер, откройте любую страницу, нажмите на кнопку добавить закладку

называете закладку PinIt  и добавляете (сохраняете) в панели закладок

потом просто находите эту закладку среди сохраненных, и выбираете правка адреса (или как там у вашего браузера называется изменения адреса закладки)

и вместо адреса (я просто для прмиера сохраняла закладку на старнице гугла, соответственно вместо адреса https://www.google.ru/) вставляете спец. код (он ниже, выделен серым)

вот этот код:

javascript:void((function(d){var%20e=d.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','//assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);d.body.appendChild(e)})(document));

сохраняете и получаете примерно вот такое : 

ВСЕ! теперь открываете любой сайт (я проверила на сайте  моего любимого движника), находите в закладках вашу PinIt, нажимаете на эту кнопку и ....

...и получаете все картинки которые есть на странице с возможностью "пнуть"

нажимаете на нужную картинку и вам открывается вот такое окно, в котором вы выбираете вашу муд боард и можете добавить описание

все! теперь вы можете пинать любые картинки с любого ресурса совершенно лего в свои муд боарды, и у вас всегда будет первоисточник работы или идеи!

2. про то как сделать в блоге на фотографиях кнопку Pin It

однозначно не все юзеры пинтереста знают хитрость с кнопкой пнуть картинку из закладки браузера, ну а для того чтобы любой заходящий к вам в блог мог сохранять картинки привязывая их к вашему адресу в инете в считанные секунды (тем самым всегда знать автора работы) можно сделать кнопку "пнуть" на каждой фотке вашего блога

делается это вот так: 

заходите в панель инстументов блоггера, выбираете Шаблон

потом нажимаете на кнопку изменить HTML

вам открывается вот такая вот фигня

щелкайет мышкой на поле где написан заумный текст программирования и зажимаете клавиши ctrl+F (у эпла это клавиши cmd+f) и в парвом углы появляется вот такое окно с поиском

вставляете в окно поиска вот этот тег </body>  нажимаете entr и тэг находится в тексте вот так:

теперь перед этим тэгом  вставляем вот этот код 

<script>
//<![CDATA[
var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPCZksV-dmVyWYpDAVl-fh49wn37DJmXX5ji6VgWgvB3CIfsVa0NM5eHsYmpdViz-56dfP0Zv4fbBrIkDPcMHm3kUYxy__aqfx3IoRTaQ8_g0e5aCW-1iC9LDL2YPpyaPVMH_CaWiQHdGI/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
</script>

очень удобно что каждая строка имеет свой номер

потом обязательно нажмите кнопку сохранить шаблон

ну и все можете любоваться вашими фотографиями в блоге, которые при наведении будут показывать вам красную кнопку "пнуть"

кнопку можно разместить в разных углах на фотке, я оставила посередине, а если вы хотите сделать в другом место то надо делать так:

в коде вам нужно найти строку которая у меня выделена красным

<script>
//<![CDATA[
var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPCZksV-dmVyWYpDAVl-fh49wn37DJmXX5ji6VgWgvB3CIfsVa0NM5eHsYmpdViz-56dfP0Zv4fbBrIkDPcMHm3kUYxy__aqfx3IoRTaQ8_g0e5aCW-1iC9LDL2YPpyaPVMH_CaWiQHdGI/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
</script>

и вместо тэга "center" вам нужно будет вставить один из след тэгов (без перевода конечно, только то что выделено серым!!) 

"topleft" (лево верх)

"topright" (право верх)

"bottomleft" (лево низ)

"bottomright" (право низ)

сохранить шаблон и все!

_________________________________________________________________________________

все эти хитрости не моя разработка, я просто адаптировала информацию!

и использовала вот эти источники (большое спасибо авторам за их труд!!):

1. Install the Pin It button on an iPhone or iPad

2. Pinterest Pin It button on image hover

а еще вот тут вы можете скачать прикольные кнопки pin it на фотографиях, например одну из таких: