n-wp.ru — блог о WordPress
Как добавить социальные кнокпи Pinterest в посты блога | n-wp.ru

Как добавить социальные кнокпи Pinterest в посты блога

Инструкция по внедрению социальной кнопки и кнопки подписки социальной сети Pinterest в посты блога без использования дополнительных плагинов.

Социальная сеть Pinterest была задумана как место, где каждый может поделиться тем визуальным контентом (изображения и видео), который ему нравится, соотвтетствует его интересам. Сеть на момент написания этого поста находится в состоянии разработки и тестирования, и попасть в нее можно только по приглашениям, однако, не смотря на свой практически закрытый статус, она стремительно набирает популярность. Идея размещения любой картинки с небольшой аннотацией настолько пришлась по душе пользователям, а ее реализация оказалась такой удобной, что сейчас популярность Pinterest может поспорить с хорошо разрекламированной и продвигаемой всеми способами, открытой для регистрации любым пользователям, сетью Google Plus.

Как добавить кнопку Pin It в посты блога (1)

Конечно же, разработчики создали инструменты добавления содержимого в социальную сеть без захода на ее сайт, напрямую из браузера или же с помощью социальной кнопки. Но вот реализация этой социальной кнопки, на мой взгляд, не совсем удачная — вам вручную предлагается указать ссылку на сайт, ссылку на картинку и текстовую аннотацию.

Как добавить кнопку Pin It в посты блога (3)

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

Внедрение скрипта

Для того, чтобы кнопка работала, нужно внедрить скрипт Pinterest. Для этого в файл footer.php до закрытия тега body вставьте:

Внедрение кнопки в пост

В файл single.php, в том месте, где хотите видеть социальную кнопку Pinterest, вставьте код:

Обратите внимание — count-layout=»horizontal» указывает на то, что счетчик будет располагаться рядом с кнопкой, справа по горизонтали от нее. Можно так же использовать значение vertical (счетчик будет над кнопкой) и none (счетчик не будет отображаться).

Как добавить кнопку Pin It в посты блога (5)

При нажатии на социальную кнопку Pinterest появляется всплывающее окно с уже заполненной данными формой отправки.

Как добавить кнопку Pin It в посты блога (6)

В форму автоматически в качестве картинки добавляется миниатюра поста, в качестве пояснительного текста — название и цитата поста. Вам остается только нажать кнопку отправки.

Учтите, что в Pinterest к изображению можно добавить только текст длиной 500 символов. Поэтому рассчитывайте длину цитаты поста.

Оформление и расположение кнопки

Кнопка расположена в элементе DIV класса social-button-pinterest. В файле style.css вы можете добавить к этому элементу индивидуальное оформление. Например:

Внедрение кнопки подписки

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

Как добавить кнопку Pin It в посты блога (2)

Этот код можно вставить в исходный код single.php или index.php (или в любой другой шаблон). В нем нет никаких динамических частей, только статические ссылки, поэтому он будет работать на любой странице блога. Вы можете использовать не только те картинки для кнопки подписки, которую предлагает социальная сеть, но и свои.

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

9 комментариев

    • Покалечив джаваскрипт заменой «pinit.js»;» на «pint.js»;», добился сноса кнопки.

      Возник вопрос о том, как получать форму выбора отдельной картинки из поста для пина, а не добавления анонса поста. На что заменить:

      ?

      • Ну тут без написания отдельного скрипта, который бы находил все картинки на странице, выводил их в отдельной форме, а затем по клику передавал бы ссылку на указанную картинку в код ссылки Pin It, не обойтись. По-моему, овчинка выделки не стоит, ведь есть плагины, которые позволяют отправить любую картинку со страницы в Pinterest. Например:
        Pin It On Pinterest
        Pinterest Image Pin
        Pinterest Pin It Button For Images

    • Все упрощают себе задачу, а вы усложняете.

      Судя по этому материалу, можно внедрить ссылку как-то так:

      Понятно, что можно вместо изображения в ссылке использовать текст, но вот без js-скрипта наверное не обойтись.

  • А как прикрепить Pin It к блогу на blogspot?? Данный способ не воспринимает редактор. Ругается на недопустимые символы в теле href

/* ]]> */