Установка кнопки «Сохранить» на сайт

Советы и устранение неполадок

«Обратите внимание: если вы добавили в код официальную кнопку "Сохранить" раньше июня 2016 г., то 3 октября 2017 г. ее название будет изменено с "Приколоть пин" на "Сохранить"».

Кнопка «Сохранить» — лучший способ помочь вашему бизнесу рассказать о себе на Pinterest. Установите кнопку «Сохранить» на ваш сайт, и ваши пользователи смогут сохранять понравившиеся им изображения с вашего сайта в Pinterest, а значит их сможет увидеть еще больше людей. 
 
У вас есть сайт на платформе Wordpress, Blogger, Tumblr, Wix или Squarespace
 
WordPress.com WordPress.com
Чтобы установить кнопку Pin It на сайт Wordpress, не нужно добавлять никакие коды. Вы можете добавить кнопку Pin It ко всем записям вашего блога Wordpress, включив эту опцию в настройках по умолчанию.
  1. Войдите в панель управления Wordpress.
  2. Перейдите в раздел Settings (настройки) и выберите Sharing (обмен).
  3. В разделе Sharing Buttons (кнопки для обмена) перетащите сервис Pinterest из раздела Available Services (доступные сервисы) в раздел Enabled Services (используемые сервисы).
  4. Если вы хотите, чтобы внешний вид кнопки Pin It не отличался от стандартного, выберите в раскрывающемся списке Button style (стиль кнопок) вариант Official ​buttons (официальные кнопки).
  5. Нажмите Сохранить изменения в нижней части Пина.
WordPress.org WordPress.org

Загрузите плагин для создания всплывающей кнопки Pin It из соответствующего раздела сайта WordPress.org.

Blogger Blogger
  1. В панели управления Blogger откройте раздел Layout (шаблон).
  2. В разделе Blog Posts (публикации) нажмите edit (изменить).
  3. Пролистайте вниз и поставьте галочку рядом с пунктом Show Share Buttons (отображать кнопки «поделиться»).
  4. Внесите необходимые изменения в разделе Arrange Items (размещение блоков) и нажмите Save (сохранить).
Tumblr Tumblr
Для начала необходимо добавить строку кода JavaScript.
 
Чтобы добавить код JavaScript:
  1. Выберите нужный блог на панели управления Tumblr и нажмите Customize (настройка).
  2. В открывшемся окне Customize (настройка) нажмите Edit HTML (редактировать HTML).
  3. Перейдите в конец кода.
  4. Найдите в коде строку pinit.js. Если нашли, то все готово!
  5. Если нет, то вставьте эту строку над закрывающим тегом </body>: <script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
 
Чтобы добавить всплывающую кнопку Pin It:
  1. Убедитесь, что страница содержит строку кода JavaScript (см. выше).
  2. Выберите нужный блог на панели управления Tumblr и нажмите Customize (настройка).
  3. В открывшемся окне Customize (настройка) нажмите Edit HTML (редактировать HTML).
  4. Перейдите в конец кода.
  5. Вставьте data-pin-hover="true" перед «src=» из 4ого шага инструкции выше. Ваш новый код должен выглядеть примерно так: <script type="text/javascript" async data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
  6. Нажмите Update Preview (предварительный просмотр обновления). После наведения указателя на изображение в его правой части должна появиться кнопка Pin It. Если это не так, вернитесь к четвертому шагу и убедитесь, что все сделано правильно.
  7. Нажмите Save (сохранить).
Wix.com Wix.com
  1. В левой части редактора нажмите кнопку Добавить (+).
  2. Выберите  Социальные сети.
  3. Пролистайте в самый низ страницы и нажмите Pinterest Pin It.
  4. Перетащите кнопку Pin It в нужное место на странице.
  5. При нажатии на кнопку Pin It создается Пин, состоящий из изображения и описания. Пин также содержит в себе ссылку на страницу, с которой он был приколот с помощью кнопки Pin It.
Squarespace Squarespace

Узнайте, как создать кнопку Pin It для своего сайта на Squarespace, из этой статьи.

 
Если вы хотите создать кнопку самостоятельно, вам потребуется выбрать, какую именно кнопку «Сохранить» вы хотите добавить на ваш веб-сайт. Существует 3 типа кнопок «Сохранить»:
 
  • Всплывающая кнопка (ссылка): когда пользователь наводит курсор на изображение, появляется кнопка «Сохранить».
    Learn how to build it Learn how to build it
    1. Зайдите в редактор виджетов.
    2. Выберите Всплывающая кнопка в разделе Тип кнопки.
    3. Измените размер и форму кнопки так, как хотите.
    4. Проверьте как будет выглядеть ваша кнопка, наведя курсор на тестовое изображение. Вы также можете нажать на кнопку Pin It, чтобы увидеть как она работает.
    5. Если вас устраивает внешний вид кнопки, скопируйте код из раздела Копировать код.
    6. Вставьте этот фрагмент кода перед закрывающим тегом <body> каждой из страниц веб-сайта, результаты которых нужно отслеживать.
  • Любое изображение (ссылка): при нажатии на кнопку пользователь может выбрать какое изображение с сайта сохранить. Все довольно просто.
    Learn how to build it Learn how to build it
    1. Зайдите в редактор виджетов.
    2. Выберите Любое изображение в разделе Тип кнопки.
    3. Измените размер, язык, форму кнопки и используемое для нее изображение так, как хотите. 
    4. Проверьте как будет выглядеть ваша кнопка, наведя курсор на тестовое изображение. Вы также можете нажать на кнопку «Сохранить», чтобы увидеть как она работает.
    5. Если вас устраивает внешний вид кнопки, скопируйте код, появившийся в правой части страницы.
    6. Вставьте этот фрагмент кода между тегами <body> и </body> каждой из страниц веб-сайта, результаты которых нужно отслеживать.
  • Одно изображение (ссылка): эта кнопка «Сохранить» предназначена для одного определенного изображения на вашей странице. Для создания такой кнопки необходим более сложный код.
    Learn how to build it Learn how to build it
    1. Откройте редактор виджетов.
    2. Измените размер, язык, форму кнопки или используемое для нее изображение так, как хотите. 
    3. Добавьте URL-адрес страниц c изображениями, для которых вы хотите создать кнопку «Сохранить» (это может быть ваша домашняя страница или любая другая страница вашего сайта).
    4. Откройте новое окно браузера и зайдите на нашу страницу.
    5. Нажмите правой кнопкой мыши на изображение, для которого вы хотите создать кнопку «Сохранить».
    6. Выберите Копировать URL изображения.
    7. Вернитесь в редактор виджетов и вставьте URL изображения в поле «Изображение».
    8. Опишите ваше изображение.
    9. Нажмите Установить!, чтобы посмотреть как будет смотреться кнопка.
    10. Если вас устраивает внешний вид кнопки, скопируйте код, появившийся в правой части страницы.
    11. Вставьте этот фрагмент кода между тегами <body> и </body> каждой из страниц веб-сайта, результаты которых нужно отслеживать.

Известные проблемы

Счетчик кнопок «Сохранить» не виден или не функционирует должным образом
При нажатии на кнопку «Сохранить», окно с выбором доски, на которую следует приколоть изображение, не открывается в новом окне.
Всплывающая кнопка не работает
Pinterest не удается установить связь с моим сайтом

Счетчик показывает количество Пинов, которые ведут на URL-адрес, указанный в коде кнопки. Если указанная страница отличается от страницы, на которой вы находитесь на данный момент, данные счетчика могут не соответствовать ожидаемому вами результату.

Если вы используете счетчик с любым изображением кнопки «Сохранить», он будет показывать количество Пинов, которые ведут на URL-ардес страницы, на которой вы на данный момент находитесь.

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

Если вы используете кнопку «Сохранить», разработанную сторонним разработчиком, свяжитесь с создателями этого плагина. Возможно они смогут помочь вам решить возникшую проблему. 

Если вы используете собственную кнопку «Сохранить», попробуйте воспользоваться нижеприведенными советами:

  • Проверьте, добавили ли вы перед закрывающим тегом на своей странице строку кода JavaScript.
  • Возможно, вы добавили ее несколько раз. В этом случае оставьте только одну строку, а остальные удалите.
  • Если вы используете и асинхронный и обычный скрипты на одной странице, попробуйте оставить только один из этих вариантов.
  • Если вы использовали плагин сторонних производителей, проверьте, возможно они уже прописали код pinit.js на странице. Если это так, то вам не нужно добавлять этот код еще раз.
Некоторые хостинги не поддерживают JavaScript. В этом случае у вас не получится добавить на страницу сайта код из редактора виджетов. Проверьте, возможно у них есть альтернативные способы добавления виджетов.

Для решения проблемы попробуйте выполнить эти действия:
 
  • Убедитесь, что изображение имеет размер не менее 100 пикселей в одном измерении (в высоту или в ширину) и не менее 200 пикселей в другом (всплывающая кнопка «Сохранить» появляется только на изображениях, размером 120Х120 пикселей и более).
  • Изображение не должно быть указано в файле CSS в качестве фонового, и каждое изображение должно иметь атрибут src, начинающийся с img.
  • Добавьте код всплывающей кнопки прямо над закрывающим тегом.

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