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

среда, 4 сентября 2013 г.
привет! я тут стала таким активным юзером 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 = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/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 = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/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" (право низ)





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

_________________________________________________________________________________

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


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


58 комментариев on "что такое Pinterest и как легко Pin it картинки с инета и как создать кнопку Pin it на фотках в вашем блоге"
  1. О, спасибо, давно хотела узнать как это сделать!

    ОтветитьУдалить
  2. Спасибочки! Уже поставила. Все понятно и доступно. Респект!

    ОтветитьУдалить
  3. Катя, спасибо огромное!!!! а то на Пинтересте давно, а как кнопочку на каждую фотку поставить не знала, как раз поиском занималась! Все вовремя! уже сделала!

    ОтветитьУдалить
  4. Спасибо за информацию, но на моём браузере так и не получилось "пнуть" картинки - вроде бы с закладкой сделала всё как по описанию, но когда её нажимаю - ничего не происходит...

    ОтветитьУдалить
    Ответы
    1. и ещё - а как настроить ссылку, куда будет переходит кнопочка? не могу найти, как её изменить...

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

      Удалить
  5. Катерин, спасибо за полезный пост!

    ОтветитьУдалить
  6. Катя, спасибо большое!!! а то я так и не поняла как пользоваться:)))

    ОтветитьУдалить
  7. Спасибо, Катя, у меня всё замечательно получилось!))

    ОтветитьУдалить
  8. Учишь всех пинаться:))) Это есть глобальный Pinfluence от самой быстрорастущей социальной сети в мире

    ОтветитьУдалить
    Ответы
    1. А еще можно установить кнопку «пнуть» через приложение Chrome extension http://blog.pinterest.com/post/50102341262/easy-pinning-from-google-chrome
      работает не только с гугл браузером, но и с яндексом:)

      Удалить
  9. Первый раз о такой штуке вижу. Спасибо,сейчас опробую)

    ОтветитьУдалить
  10. Катя, спасибо огромное! Хотела себе кнопочку на фотки прикрепить, попробовала в пинтересте разобраться и, увидев, что там с html нужно разбираться, отложила до лучших времен))) В твоем посте все предельно ясно разложено по полочкам- спасибо ещё раз!

    ОтветитьУдалить
  11. Катюша, спасибки!!! Все получилось, ты Умничка!

    ОтветитьУдалить
  12. Катя, спасибо! Я наконец реанимировала свой пинтерест, буду наполнять. И кнопочку в блог добавила. Так что мерси за вдохновение.

    ОтветитьУдалить
  13. Спасибо большое!!! Все получилось!!! УРААА!!!

    ОтветитьУдалить
  14. Катя, большое спасибо, что все так понятно написано!

    ОтветитьУдалить
  15. Катюш, спасибо за код для блога.
    А кнопочка "пнуть" есть в приложениях Chrome, (для тех кто ним пользуется).

    ОтветитьУдалить
  16. СПАСИБО!) давно ищу такую информацию)

    ОтветитьУдалить
  17. Катюня,спасибо,недели две пыталась сама сделать,так и недокумекала) хорошо что есть ты)

    ОтветитьУдалить
  18. Катя, спасибо Вам огромное за Ваш подробный инструктаж! Я пыталась по Вашему алгоритму поставить себе пинарик в блог. Все остальное у меня уже было сделано. Но по непонятной причине, у мея пины на фотках в блоге не появились. Я восстановила шаблоны всх виджетов по умолчанию и попробовала снова. Но опять тишина...
    Пожалуйста, если можете, помогите разобраться. Что я сделала не так?

    ОтветитьУдалить
    Ответы
    1. Светлана:))) я написала весь алгоритм:) поэтому думаю что если у вас что то не вышло, то возможно вы пропустили что то из мк:) делайте все все как в мк:) у всех все работает:)))

      Удалить
    2. Катя, извините меня за беспокойство! У меня все заработало, только почему-то не сразу.

      Удалить
  19. Катя, спасибо!!
    Сама бы не разобралась! Установила себе в блог и в Хомячок.
    А размер значка Р как-то можно менять?

    ОтветитьУдалить
    Ответы
    1. Поменять размер не получилось, поставила маленькую кнопку - заменила к коде шаблона ссылку на кнопку.

      Удалить
  20. Спасибо огромное! Наконец то разобралась)

    ОтветитьУдалить
  21. ухтыш! ухтыш! Спасибо большое! Все работает, все здорово!)

    ОтветитьУдалить
  22. Спасибо! Это просто находка, очень Вам благодарна))))))

    ОтветитьУдалить
  23. Спасибо огромное! Я уже пробовала несколько раз вставлять кнопку по разным источникам и через месяц она исчезала и оставалась только но тех фотах когда она была вставлена. Надеюсь ваша информация поможет окончательно сохранить чудо кнопульку :) Спасибо еще раз!

    ОтветитьУдалить
  24. Огромное спасибо за информацию!!!

    ОтветитьУдалить
  25. спасибо Сeрафима, очeнь люблю пинтeрeст, стал моeй слабостью))) Тeпeрь-то я знаю как eго связать с моими работами!

    ОтветитьУдалить
  26. Cпасибо Огромное!!! то что нужно!!! ))) Заходите в гости http://graphika-at.blogspot.com/

    ОтветитьУдалить
  27. Катя, спасибо тебе большое прибольшое!!!

    ОтветитьУдалить