버튼을 생성하지 않고 Pinterest에 "고정"링크

수십 또는 수백 개의 게시물이있는 페이지가 있는데 각각 소셜 버튼이 있습니다. 각 URL에 대한 모든 버튼을 생성 할 수는 없습니다. 너무 느립니다 (페이스 북, g +, 트위터, 핀터 레스트 ... 수백 개의 링크). 따라서 즉시 생성되는 페이스 북 공유 버튼 대신 간단한 img를 사용하여

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

사용자가이를 클릭하면 페이스 북에서 생성 된 콘텐츠가 포함 된 팝업 창이 열립니다.

Pinterest에서 어떻게 할 수 있습니까? 버튼을 생성하는 코드 만 찾았지만 가능하면 js를 전혀 피하고 싶습니다. 다음과 같은 것이 있습니까?

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

js 버튼을 사용하지 마십시오. 감사합니다.

표준 Pinterest 버튼 코드 ( 여기에서 생성 할 수 있음 ) 는 Pinterest 버튼을 <a>감싸는 태그 <img>입니다.

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>

자바 스크립트 버전의 공유 버튼을 사용하는 것이 페이지로드 시간을 망치는 경우 비동기로드 방법을 사용하여 사이트를 개선 할 수 있습니다. Pinterest 버튼으로이 작업을 수행하는 예 는 개선 된 HTML5 구문이있는 GitHub Pinterest 버튼 프로젝트를 확인하세요 .

고정 버튼 대신 간단한 하이퍼 링크를 만들려면

이것을 변경하십시오 :

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

이에:

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

따라서 전체 URL 은 다음과 같이 표시됩니다.

<a href="https://stackoverflow.com//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>

저도 같은 질문을했습니다. 이것은 Wordpress에서 훌륭하게 작동합니다!

<a href="https://stackoverflow.com//pinterest.com/pin/create/link/?url=<?php the_permalink();?>&amp;description=<?php the_title();?>">Pin this</a>

이러한 경우 공유 링크 생성기가 매우 유용하다는 것을 알았 습니다. Facebook, Google+, Twitter, Pinterest, LinkedIn 공유 버튼을 만드는 데 도움이됩니다.

워드 프레스에 대한 코드를 찾았습니다.

 <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>

그래서 당신은 버튼을 설치하지 않고 핀 그것 버튼에 코드를 원하십니까? 그렇다면 고정하려는 페이지의 URL 위치에이 코드를 붙여 넣으십시오. 버튼없이 핀 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)})());

여기에 설명 된대로 작은 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 예제 참조