пятница, 12 июля 2013 г.

Как установить кнопку Pinterest на фото в Blogger

Здравствуйте, друзья!
Сегодня хотела бы поделиться с вами своими знаниями про очередную социальную сеть Pinterest. Попробую объяснить как она нам может помочь в поиске читателей и возможно даже покупателей.

Наверное, кто-то из вас уже знаком с этим "зверем" и активно "Pin It" понравившиеся картинки в любимых блогах. Особенно часто такой сервис попадается в зарубежной блогосфере и не зря. Давайте попробуем разобраться почему.

Социальная сеть Pinterest появилась только в 2012 году, но уже сейчас в ней десятки миллионов пользователей и тонны фотография. Правда в России она пока не столь популярна. Но все в наших руках. Да и потом, всегда приятно когда кто-то оценит ваше творчество, не правда ли ;) пусть это будет даже не потенциальный покупатель из США или Голландии.

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

Это справедливо как со своими картинками, так и с картинками с других блогов. При этом выгода очень ощутимая, т.к. всегда присутствует активная ссылка на автора.

Такого рода "сарафанное радио" очень полезное для наших с вами блогов. Оповещения в сети Pinterest очень развернутое. И многие смогут увидеть твои "пины" и поделиться ими с друзьями в свою очередь.
Чтобы иметь возможность просматривать картинки других и делиться своими для начала необходимо зарегистрироваться.
Pinterest  предлагает 2 способа регистрации - через e-mail или через аккаунт Facebook.
Оба способа вполне просты и каждый, разобравшийся в регистрации на Blogger, думаю справится ;)

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

А сейчас главное! Как установить кнопку Pin It на картинку, чтобы при наведении мышкой появлялся значок "P", позволяющий вашим читателям в любой момент опубликовать вашу фотографию в Pinterest, таким образом показав ее своим друзьям.


Пошаговая инструкция

1. Открываем Шаблон -> Изменить HTML
2. С помощью Ctrl+F ищем тег </body>
3. Перед ним вставляем код
<script>
//<![CDATA[
var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "topright";
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>

Все!
После этого на каждой картинке нашего блога, при наведении мышкой на фото, будет появляться такая кнопочка. Она будет появляться у всех наших читателей!

Если нам, по какой-то причине, не нужна кнопка "Pin It" на картинке, то ее можно просто убрать написав к тегу <img> инструкцию class='nopin' (делаем это в режиме HTML в окне редактирования сообщения).

Выглядеть в режиме HTML это должно примерно так:

<a href="http://3.bp.blogspot.com/-rfY2TVDd6_o/Udw7hH0veII/AAAAAAAAFxo/k4XLC9G8YK4/s1600/_MG_0234.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class='nopin' height="427" src="http://3.bp.blogspot.com/-rfY2TVDd6_o/Udw7hH0veII/AAAAAAAAFxo/k4XLC9G8YK4/s640/_MG_0234.jpg" width="640" /></a>

Еще можно поменять положение кружочка "P" на фото. Например, нам хочется видеть его в центре изображения. Не проблема!

В скрипте просто меняем var bs_pinButtonPos = "topright"; на var bs_pinButtonPos = "center";

Возможные значения этого параметра:  center, topleft , topright , bottomleft , bottomright.

Итак, мы установили кнопку. Теперь посмотрим, что она нам дает.

Когда мы нажимаем на кнопку "Р", то видим такое вот окошечко.

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

Давайте теперь еще раз подведем итог!
Что нам дает установка кнопки "Pin It" на фотографию?
Каждый читатель нашего блога может одним нажатием кнопки поделиться нашей фотографией со своими друзьями в сети Pinterest.
Вывод - чем больше вы имеете подписчиков, тем больше ваша аудитория - простая истина социальных сетей.
Давайте дружить и в Pinterest тоже! Тем более, что этот способ не требует от вас практически никакого времени.
Хотя в нем можно зависнуть очень надолго, разглядывая красивые фото других участников))) Но это уже совсем другая история!

UPD
Еще один урок Pinterest - Blogger "Как изменить внешний вид кнопки Pin It"
UPD 2 
Теперь можно не устанавливать отдельно кнопку в блог. Ее можно целиком встроить в браузер! Как это сделать читайте тут.
Но если вы хотите, чтобы пользователи любых браузеров могли приколоть пин с вашей страницы, то установить можно и этим способом. 

75 комментариев:

  1. Маша, спасибо за инфу. Буду иметь ввиду.

    ОтветитьУдалить
    Ответы
    1. Оксан, давайте уже все объединяться и тоже "наступать" на Pinterest) а то там русских почти нет, хотя не понятно почему!
      Я вот пост написала, потому что в рунете не нашла подробной инструкции о том, как сделать такую вот кнопочку поверх картинки, хотя их много у кого встречаю в зарубежных блогах. Пришлось покопаться в англоязычных "how-to", а потом попробовала предложить тему у Елены Гришиной в Клубе Друзей, а она меня поправила и дала ссылоки на девочек, которые уже тоже писали про Pinterest.
      Дам тоже, мне не жалко! У них много полезного http://igruchka.blogspot.com/2013/06/Pinterest.html и - http://www.sunkristy.ru/2013/07/blog-post_10.html
      А вообще появилась мысль, что как-то грустно яндексом индексируется Blogger. Статьи девочек не находятся(( Поэтому мне и пришла в голову мысль написать об этом!

      Удалить
  2. Маш, спасибо огромное за инструкцию, я тоже рыла интернет на эту тему, но хорошей инструкции не нашла, а дело-то, действительно, очень и очень нужное. Яндекс с Гуглом не в дружеских отношениях, а в конкурентных, так что надеяться, что Яндекс нас хорошо поиндексирует не стоит ;) Зато нас отлично ищет Гугл и, следовательно, любая иноземная аудитория. Вывод - писать двуязычные посты (кто может) и выходить на международный рынок :)

    ОтветитьУдалить
    Ответы
    1. Тонь, мне почему-то твой комментарий показался очень "пендальным"!!! Прямо захотелось уже со следующего поста начать двуязычность вводить))) пусть знают какие мы молодцы?!

      Удалить
  3. Маша, спасибо за статью! Я читала одну из указанных ссылок, завела аккаунт, но так и не стала пользоваться. А прочитав твою статью, полезла, стала разбираться, стала "пиннить", в общем, подсела :) Вернусь из отпуска, размещу свои фотки и буду активно использовать :)

    ОтветитьУдалить
    Ответы
    1. Ой, Катенька! Спасибо за столь приятные слова! Я искренне верю, что скоро мы уже все будем узнаваемы там! Ведь правда же интересно и красиво там! А главное полезно!!

      Удалить
  4. Маша, большое спасибо за подробное описание! Уже поставила себе кнопочки:) Кстати, твой замечательный блог я нашла, именно забив в поисковике: как поставить кнопку pin на фото.
    И очень рада, что нашла, очень красивый блог и изделия замечательные, фотографии потрясающие!
    Утащила эту статью в свою подборку Blogger уроков.

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

      Удалить
  5. Маша, спасибо!!! По утра промучелась и у меня получилось!!! Я бы сама в жизнь бы не доперла :)

    ОтветитьУдалить
  6. Вроде бы писала сообщение, а оно куда-то пропало. Маша, спасибо большое за инструкцию и за подробное объяснение. У меня правда не с первого раза получилось, но все-таки получилось! Ура!
    А ты не знаешь, как вместо круглой кнопочки на фото, сделать прямоугольную, маленькую?...

    ОтветитьУдалить
    Ответы
    1. Ага, Кать, я тоже в почте видела твой коммент, но под самим сообщением его уже почему-то не было!))

      По поводу кнопочки прямоугольной - в строчке
      var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";

      вместо "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png"

      надо вставить "//assets.pinterest.com/images/pidgets/pin_it_button.png"

      Вообще это тема для отдельного поста пожалуй! Напишу подробнее и дам ссылочки на всевозможные другие кнопки. И расскажу как их поставить.

      Удалить
    2. Супер! Спасибо! Теперь вообще идеально стало :) Прям спасибо-спасибо :)
      Я сначала с этим Пинтерестом не поняла в чем прикол, а потом когда разобралась, почувствовала все прелести этого сайта. Там можно хоть целый день картинки разглядывать. И свои картинки и ссылки удобно хранить.

      Удалить
    3. Спасибо! Рада, что пригодилось!
      Можно вот еще пойти прочитать про секрет один - может пригодится! Таким способом можно сделать любую кнопку
      http://lareshomedecor.blogspot.ru/2013/07/pin-it.html

      Удалить
  7. Большое спасибо за инструкцию, нашла через гугл не только туториал, но и блог,который интересно почитать ;)

    ОтветитьУдалить
    Ответы
    1. Светочка, спасибо! Я зашла к тебе и долго вздыхала и почти плакала от удовольствия! Такие бесподобные живые фотографии! Самая моя большая страсть - путешествия и великолепные фото! Плюсуюсь! и советую всем последовать моему примеру!

      Удалить
  8. Маша,Огромное спасибо!!! С первого раза получилось установить кнопку!:)

    ОтветитьУдалить
  9. Большое спасибо за инструкцию, все получилось! )

    ОтветитьУдалить
  10. Маша, привет!
    У меня возникают проблемы с сохранением шаблона выдает ошибку(

    ОтветитьУдалить
    Ответы
    1. Алена, привет! Прости что так долго.. а что за ошибка?

      Удалить
  11. Спасибо большое. Очень выручили. Теперь у меня в блоге тоже есть такие кнопочки.
    Еще раз спасибо.

    ОтветитьУдалить
    Ответы
    1. Возник вопрос.
      Кнопочки появились только в одном посте, я что-то не так сделала?

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

      Удалить
  12. Спасибо огромное за столь познавательный пост! Мне он очень помог :)

    ОтветитьУдалить
  13. Машенька, спасибо огромное за статью. Надо было очень. Зависаю на Пинтересте с головой. Теперь не буду захламлять свой компьютер разными хомячьими запасами. Большой плюс Пинтереста.

    ОтветитьУдалить
    Ответы
    1. Рада, что все получилось! И правда очень занятный ресурс ;))

      Удалить
  14. Спасибо большое! Замечательный у Вас блог! и объяснения очень понятные! Всё получилось.

    ОтветитьУдалить
  15. Этот комментарий был удален автором.

    ОтветитьУдалить
  16. Спасибо большое за урок, давно хотела чтобы изображения ссылались на Pinterest, но не знала как это сделать.

    ОтветитьУдалить
  17. оооооо....вот это я и искала! спасибо большое! то что нужно!

    ОтветитьУдалить
  18. У меня нет тега body в шаблоне, а кнопочку на фотки хочется :) Подскажите, как в этом случае шаблон изменить?

    ОтветитьУдалить
    Ответы
    1. Я его все-таки нашла. Почему-то с помощью ctrl+F его было не найти... Пришлось искать так, глазами :) Все получилось, спасибо!

      Удалить
  19. Маша! Спасибо огромнейшее за кнопку Pinterst. С ним я как раз дружу))), а вот как вставить в блог эту кнопку - только у тебя и нашла разборчиво и понятно! Спасибо!!!

    ОтветитьУдалить
  20. Оочень круто! А как сделать такую же кнопочку, если мой блог на движке Вордпресс не подскажете?

    ОтветитьУдалить
  21. Маша, спасибо! Так понятно написано, всё получилось!

    ОтветитьУдалить
  22. Огромное спасибо!!! Все получилось!

    ОтветитьУдалить
  23. Маша, добрый вечер!
    Я надеюсь, вы не будете против, что я сослалась на этот ваш пост с кнопкой Пинтереста. Я у себя устанавливала по инструкции на английском, и когда знакомая девочка спросила, как я это сделала, решила погуглить, есть ли что-то на русском языке - таким образом вышла на ваш блог :) И сразу подписалась заодно :)

    Приятных выходных!
    Наташа

    ОтветитьУдалить
  24. Большое Вам спасибо! Воспользовалась Вашими советами, все получилось))

    ОтветитьУдалить
  25. Спасибо большое, все получилось. Ваш пост находится в списке первых в google.

    ОтветитьУдалить
  26. спасибо большое! весь гугл взрыла, только вы помогли:)

    ОтветитьУдалить
  27. Огромное спасибо за такой полезный пост :)

    Yulia Vorobeva
    http://sv-sv.blogspot.com/

    ОтветитьУдалить
  28. Спасибо, Маша! Работает! Мне казалось, что надо будет потратить много времени, откладывала, а потратила в результате несколько минут. Спасибо!

    ОтветитьУдалить
  29. Этот комментарий был удален автором.

    ОтветитьУдалить
  30. у меня вместе с этим скриптом установилась и кнопка "наверх" с бабочкой, кнопка вообще нужная, а вот бабочку неустанно порхающую я бы отключила. но как?

    ОтветитьУдалить
  31. Спасибо за полезную информацию

    ОтветитьУдалить
  32. Девочки милые, может вы подскажете!Второй вечер бьюсь, не могу понять по какому принципу pinterest выдает фото при поиске? Например, я выкладываю фото, пишу к ним тэги. Потом по ним же ищу в поисковике- ничего не выдает. И наоборот- фотографии, у которых нет никаких хэштегов попадают при поиске в нужную категорию. Как так?
    P.S. спасибо за информативный пост :)

    ОтветитьУдалить
  33. Спасибо Вам огромное, очень помогли :)

    ОтветитьУдалить
  34. Маша, спасибо! Ваша статья очень помогла

    ОтветитьУдалить
  35. Здравствуйте! пост очень необходим, но я совсем чайник)))) в первый раз влезаю и меняю скрипт шаблона, может вы сможете мне помочь...у меня есть только первое встречающееся на моем пути такое <body......и еще два простых без всяких знаков)))) Не подскажите, перед каким именно ставить надо..? я очень боюсь влезть и что-то испортить окончательно))))

    ОтветитьУдалить
    Ответы
    1. Роми, привет! Если чувствуешь неуверенность, то перед изменением шаблона всегда можно сделать резервную копию (есть прям кнопочка такая перед входом в изменение HTML). Дальше, главная задача вначале установить курсов в поле, где начинается нумерация строк и только после этого нажимать CTRL F. и ищем конструкцию в точности как /body>. Она по идее должна быть одна, иначе у тебя сайт работать не будет.

      Надеюсь совет поможет!

      Удалить
    2. Спасибо огромное преогромное!!!!!!!!!! Все получилось:)

      Удалить
  36. огромнейшее спасибо за интсрукцию!

    ОтветитьУдалить
  37. Спасибо большое, все получилось с первого раза!
    Всего вам доброго!

    ОтветитьУдалить
  38. У меня все получилось с первого раза, но через несколько дней все пропало и теперь, как ни вставлю пин не появляеться( не подскажете почему? Спасибо за полезный пост!

    ОтветитьУдалить
  39. огромное спасибо! вы мне очень помогли!
    mary2be.blogspot.com

    ОтветитьУдалить
  40. Спасибо Вам большое!
    Очень полезный пост :)

    ОтветитьУдалить
  41. Спасибо!
    И еще за то, как ясно и красиво все оформлено! Приятно не только читать, но и смотреть!

    ОтветитьУдалить
  42. Ура!! Я обожаю пинтерест и мне очень нравится их логотип, и вот, вуаля - на моих страничках тоже проявляются эти волшебные кружочки! Спасибо!

    ОтветитьУдалить
  43. Спасибо за полезную информацию! Коротко и ясно!

    ОтветитьУдалить
  44. Здравствуйте! У меня блог совсем перестает открываться, когда вставляю этот код! Хотя вставляю куда надо... Что делать?((

    ОтветитьУдалить
    Ответы
    1. Странно конечно... Возможно у Вас в блоге есть какой-то ещё элемент, который не совместим с этим скриптом. Или обратите внимание все же, что при поиске нужного куска кода нужно обязательно, чтобы курсор был активен и находился внутри окна с кодом. Удачи!

      Удалить
    2. Даже не знаю( Буду еще пытаться! Спасибо!)

      Удалить
  45. Спасибо вам большое за такой урок!)

    ОтветитьУдалить
  46. Спасибо за кнопку! Очень понравился урок! Установила в блог, долгое время всё работало, а сейчас почему-то перестала работать кнопка... Не знаете, в чем может быть причина (платформа blogger)?

    ОтветитьУдалить
    Ответы
    1. Попробую разобраться, когда доберусь до компьютера. Сейчас есть дополнение для браузера Chrome (называется PinIt) Она дает возможность без спецманипуляций делать репост в pinterest. Напишу скорее всего про это пост!

      Удалить
  47. Спасибо, все получилось. И приятно познакомиться. Я обитаю здесь: мой блог заходи в гости.

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

Related Posts Plugin for WordPress, Blogger...