Ссылка на "pin it" на pinterest без создания кнопки

у меня есть страница с десятками или сотнями сообщений, каждый из которых с социальными кнопками.
Я просто не могу создать все кнопки для каждого url: это слишком медленно (facebook, g+, twitter, pinterest... для сотен ссылок). Таким образом, вместо кнопки Facebook share, которая будет сгенерирована на лету, я использую простой 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, спасибо.

1886   7  

7 ответов:

стандартный код кнопки 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, проверьте my проект кнопки GitHub Pinterest с улучшенным синтаксисом HTML5.

160  
2013-08-23 14:57:09

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

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

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>

57  
2014-11-24 17:56:54

У меня был тот же вопрос. Это отлично работает в Wordpress!

<a href="//pinterest.com/pin/create/link/?url=<?php the_permalink();?>&amp;description=<?php the_title();?>">Pin this</a>
6  
2017-10-11 18:08:19

для таких случаев, я нашел очень полезным Share Link Generator, это помогает создавать кнопки Facebook, Google+, Twitter,Pinterest, LinkedIn share.

4  
2015-08-06 11:52:50

Я нашел код для 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.'.'.$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>
2  
2012-09-27 18:27:10

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

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)})());

1  
2012-12-26 08:44:44

вы можете создать пользовательскую ссылку, как описано здесь используя небольшой скрипт 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

0  
2017-05-23 14:47:02

Comments

    Ничего не найдено.
Click here to cancel reply.