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

Как добавить социальные кнокпи Pinterest в посты блога | n-wp.ru
Инструкция по внедрению социальной кнопки и кнопки подписки социальной сети Pinterest в посты блога без использования дополнительных плагинов.
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

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

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

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

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

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

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

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

// 

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

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

<div class="social-button-pinterest">
	<a rel="nofollow" href="http://pinterest.com/pin/create/button/?url=&media=&description= / " class="pin-it-button" count-layout="horizontal">Pin It</a>
</div>

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

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

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

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

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

[info txt=»Учтите, что в Pinterest к изображению можно добавить только текст длиной 500 символов. Поэтому рассчитывайте длину цитаты поста.» align=»one» width=»100%»]

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

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

.social-button-pinterest {display:inline-block;}

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

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

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

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

Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

Оцените автора
Добавить комментарий

  1. antonator

    Что нужно изменить в коде, чтобы избавиться от кнопки как таковой, оставив лишь текст «Pin it»?

    Ответить
    1. antonator

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

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

      <?php if(function_exists('the_post_thumbnail')) echo wp_get_attachment_url(get_post_thumbnail_id()); ?>

      ?

      Ответить
      1. tiaurus автор

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

        Ответить
        1. antonator

          Понял, разобрался. Без джаваскрипта никак, это ясно. Уволок внедрять ваше следующее предложение.

          Ответить
    2. tiaurus автор

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

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

      <a href="//assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());" rel="nofollow ugc"> </a>

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

      Ответить
      1. antonator

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

        Решение — то, что нужно, благодарю.

        Ответить
  2. Evgeniya

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

    Ответить
    1. tiaurus автор

      Вы сейчас находитесь в блоге о WordPress, причем тут BlogSpot?

      Ответить