ลิงก์ไปยัง "ตรึง" ใน 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 ขอบคุณ

รหัสปุ่ม 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 ที่ปรับปรุงใหม่

หากคุณต้องการสร้างไฮเปอร์ลิงก์แบบธรรมดาแทนปุ่มตรึง

เปลี่ยนสิ่งนี้:

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>

ในกรณีเช่นนี้ฉันพบว่าShare Link Generatorมีประโยชน์มากซึ่งช่วยสร้างปุ่มแชร์ของ Facebook, Google+, Twitter, Pinterest, LinkedIn

ฉันพบรหัสสำหรับ 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>

คุณต้องการให้รหัสไปที่ปุ่มปักหมุดโดยไม่ต้องติดตั้งปุ่มหรือไม่? หากเป็นเช่นนั้นให้วางโค้ดนี้ในตำแหน่งของ 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)})());

คุณสามารถสร้างลิงก์แบบกำหนดเองตามที่อธิบายไว้ที่นี่โดยใช้สคริปต์ 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นี้