Ссылка, чтобы закрепить ее на Pinterest без создания кнопки

У меня есть страница с десятками или сотнями постов, в каждом из которых есть социальные кнопки. Я просто не могу сгенерировать все кнопки для каждого URL-адреса: это слишком медленно (facebook, g+, twitter, pinterest... для сотен ссылок). Итак, вместо кнопки «Поделиться» в Facebook, которая создается «на лету», я использую простой img, указывающий на

https://www.facebook.com/sharer.php?u=${url_of_current_post}&t=

Когда пользователь нажимает на нее, открывается всплывающее окно с содержимым, созданным facebook.

Как я могу сделать это для Pinterest? Я нахожу только код для создания кнопки, но я бы хотел вообще избегать js, если это возможно. Есть ли что-то вроде следующего?

http://pinterest.com/pinthis?url=${url_of_current_post}

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


person Narcolessico    schedule 21.05.2012    source источник


Ответы (7)


Если вы хотите создать простую гиперссылку вместо кнопки закрепления,

Измените это:

http://pinterest.com/pin/create/button/?url=

К этому:

http://pinterest.com/pin/create/link/?url=

Таким образом, полный URL может выглядеть так:

<a href="//pinterest.com/pin/create/link/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest">Pin it</a>

person Joe Fletcher    schedule 21.08.2013
comment
Я предпочитаю делать свои собственные ссылки. Это все еще работает, или они изменили его? - person nouveau; 21.10.2013
comment
Принятый ответ сгенерирует кнопку, если у вас есть другая кнопка pinterest (и загружен скрипт pinit.js). Изменение URL-адреса на «ссылку» вместо «кнопки» позволит вам иметь кнопку pinterest в нижнем колонтитуле и пользовательскую ссылку pinterest где-то на вашей странице. Это должен быть принятый ответ. - person ashack; 15.05.2014
comment
Спасибо за ваш ответ, именно то, что я искал. По-моему, это правильный ответ :) - person patricia; 11.11.2014
comment
Я проголосовал за этот ответ, но позже обнаружил, что pinterest выдает ошибку при попытке закрепить: Parameter 'method' (value link) is not one of unknown, uploaded, scraped, bookmarklet, email, iphone, button, ipad, android, android_tablet, api_sdk, extension, api_other, bad.. Решение состоит в том, чтобы сохранить URL как button, но игнорировать скрипт pinterest. см. stackoverflow.com/a/15035520/440646 - person resting; 04.01.2015
comment
это не сработает, как сказал @resting: это приведет к ошибке pinterest parameter method value link is not one of unknown, uploaded, scraped, bookmarklet, email, iphone, button, ipad, android, android_tablet, api_sdk, extension, api_other, api_bulk_upload, adtech, directpartner, martech, button_external, bad. Очевидно, параметр после создания должен быть одной из этих возможностей. - person 0x4a6f4672; 31.03.2015
comment
на данный момент не выдает ошибку: P, используя в качестве ссылки на список свойств: http://pinterest.com/pin/create/link/?url=URL&media=COVERIMAGE&description=ADDRESS - person Jeannie; 17.05.2016
comment
@Jeannie Что должно быть определено в параметре media и description? Есть ли официальная документация, которую вы могли бы связать? - person Andy; 01.04.2021

Стандартный код кнопки Pinterest (который вы можете сгенерировать здесь) представляет собой тег <a>, заключенный в <img> кнопки Pinterest.

Если вы не включите скрипт pinit.js на свою страницу, этот тег <a> будет работать "как есть". Вы можете улучшить опыт, зарегистрировав собственный обработчик кликов для этих тегов, который открывает новое окно с соответствующими размерами, или, по крайней мере, добавив target="_blank" к тегу, чтобы он открывал клики в новом окне.

Синтаксис тега будет выглядеть так:

<a href="http://pinterest.com/pin/create/button/?url={URI-encoded URL of the page to pin}&media={URI-encoded URL of the image to pin}&description={optional URI-encoded description}" class="pin-it-button" count-layout="horizontal">
    <img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
</a>

Если использование JavaScript-версий кнопок общего доступа ухудшает время загрузки вашей страницы, вы можете улучшить свой сайт, используя методы асинхронной загрузки. Пример того, как сделать это с помощью кнопки Pinterest, см. в моем проекте кнопки GitHub Pinterest с улучшенным синтаксисом HTML5.

person Mike Kibbel    schedule 26.06.2012
comment
Отличный ответ, спасибо! Также посетите нашу страницу на сайте developer.pinterest.com, здесь: developers.pinterest.com/pin_it - person Kent Brewster; 24.07.2013
comment
Конструктор виджетов Pin It business.pinterest.com/widget-builder/#do_pin_it_button также полезен для получения примера кода, который затем можно настроить программно. - person William Denniss; 18.03.2014
comment
@KentBrewster - Как бы то ни было, я оказался здесь с тем же вопросом после посещения вашей страницы. Информация, которую он имеет, отличная, но она не говорит о параметрах URL-адреса или о том, что URL-адрес можно использовать без javascript (в контексте создания кнопок на лету), как это делают эквивалентные страницы facebook и twitter. - person xr280xr; 11.04.2014
comment
Мой urlencode в описании немного дерганый. Есть идеи, почему? Пример: На данный момент я просто собираюсь скопировать amp; вставить из другого поста, потому что#8230; время. -- явно далеко от идеала. - person Imperative; 24.02.2015
comment
Приведенный выше ответ отлично работает, если пользователь уже вошел в систему в pinterest, в противном случае он просто остается на домашней странице pinterest даже после успешного входа в систему. Любые решения? - person Uday; 30.10.2017

У меня такой же вопрос. Это прекрасно работает в Wordpress!

<a href="//pinterest.com/pin/create/link/?url=<?php the_permalink();?>&amp;description=<?php the_title();?>">Pin this</a>
person hawkdown14    schedule 12.02.2014

В таких случаях я нашел очень полезным генератор ссылок для обмена, он помогает создавать публикации в Facebook, Google+, Twitter, Pinterest, LinkedIn. кнопки.

person bencergazda    schedule 06.08.2015

Я нашел код для wordpress:

 <script type="text/javascript">

    function insert_pinterest($content) {
        global $post;
        $posturl = urlencode(get_permalink()); //Get the post URL
        $pinspan = '<span class="pinterest-button">';
     $pinurl = '';
     $pinend = '</span>';
        $pattern = '//i';
        $replacement = $pinspan.$pinurl.'$2.$3'.$pindescription.$pinfinish.''.$pinend;
        $content = preg_replace( $pattern, $replacement, $content );
        //Fix the link problem
        $newpattern = '/<span class="pinterest-button"><\/a><\/span><\/a>/i';
     $replacement = '';
     $content = preg_replace( $newpattern, $replacement, $content );
     return $content;
    }
    add_filter( 'the_content', 'insert_pinterest' );

    </script>

Затем вы помещаете следующее в свой PHP:

<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>">Pin It</a>
person isabela rodrigues    schedule 06.08.2012

Итак, вы хотите, чтобы код закреплял кнопку, не устанавливая кнопку? Если это так, просто вставьте этот код вместо URL-адреса страницы, с которой вы прикрепляете. Он должен работать как кнопка с булавкой без кнопки.

javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());

person mng    schedule 16.08.2012
comment
Это сработало для меня, но 2 вопроса. Как вы можете поддерживать всплывающее окно? Кроме того, что делает случайная математика? - person Pat; 19.06.2013
comment
Это официальный код Pinterest из их «букмарклета». Обычно он используется как ссылка, которую вы сохраняете в своих закладках, и вы можете нажать на любой веб-сайт, который вы посещаете, чтобы вызвать диалог Pinterest, но он также отлично работает и его легко реализовать. - person ConorLuddy; 23.01.2015
comment
Они довольно конкретно говорят вам не делать этого в документации по API. Просто потому, что вы можете, не означает, что вы должны. - person Imperative; 24.02.2015

Вы можете создать пользовательскую ссылку, как описано здесь с помощью небольшого скрипта jQuery

$('.linkPinIt').click(function(){
    var url = $(this).attr('href');
    var media = $(this).attr('data-image');
    var desc = $(this).attr('data-desc');
    window.open("//www.pinterest.com/pin/create/button/"+
    "?url="+url+
    "&media="+media+
    "&description="+desc,"_blank","top=0,right=0,width=750,height=320");
    return false; 
});

это будет работать для всех ссылок с классом linkPinIt, у которых изображение и описание хранятся в атрибутах данных HTML 5 data-image и data-desc.

<a href="https%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F" 
   data-image="https%3A%2F%2Fc4.staticflickr.com%2F8%2F7027%2F6851755809_df5b2051c9_b.jpg" 
   data-desc="Title for Pinterest Photo" class="linkPinIt">
    Pin it!
</a> 

см. этот пример jfiddle

person 0x4a6f4672    schedule 31.03.2015