Tautkan ke "sematkan" di pinterest tanpa membuat tombol


116

Saya memiliki halaman dengan puluhan atau ratusan posting, masing-masing dengan tombol sosial. Saya tidak bisa membuat semua tombol untuk setiap url: terlalu lambat (facebook, g +, twitter, pinterest ... untuk ratusan tautan). Jadi, alih-alih tombol bagikan facebook untuk dibuat dengan cepat, saya menggunakan img sederhana yang menunjuk ke

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

Ketika pengguna mengkliknya, jendela popup terbuka dengan konten yang dibuat oleh facebook.

Bagaimana saya bisa melakukannya untuk Pinterest? Saya hanya menemukan kode di sekitar untuk menghasilkan tombol, tetapi saya ingin menghindari js sama sekali jika memungkinkan. Apakah ada yang seperti berikut ini?

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

Tolong jangan mencoba membuat saya menggunakan tombol js, terima kasih.

Jawaban:


183

Kode tombol Pinterest standar (yang dapat Anda buat di sini ), adalah <a>tag yang membungkus <img>tombol Pinterest.

Jika Anda tidak menyertakan pinit.jsscript pada halaman Anda, <a>tag ini akan bekerja "sebagaimana adanya". Anda dapat meningkatkan pengalaman dengan mendaftarkan penangan klik Anda sendiri pada tag ini yang membuka jendela baru dengan dimensi yang sesuai, atau setidaknya menambahkan target="_blank"ke tag untuk membuatnya membuka klik di jendela baru.

Sintaks tag akan terlihat seperti ini:

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

Jika menggunakan versi JavaScript dari tombol berbagi merusak waktu muat laman Anda, Anda dapat meningkatkan situs Anda dengan menggunakan metode pemuatan asinkron. Untuk contoh melakukan ini dengan tombol Pinterest, lihat proyek tombol Pinterest GitHub saya dengan sintaks HTML5 yang ditingkatkan .


3
Jawaban yang bagus, terima kasih! Juga silakan lihat halaman kami di developer.pinterest.com, di sini: developer.pinterest.com/pin_it
Kent Brewster

Pin Ini widget builder business.pinterest.com/widget-builder/#do_pin_it_button juga berguna untuk mendapatkan beberapa contoh kode yang Anda kemudian dapat menyesuaikan programatik.
William Denniss

6
@KentBrew - Untuk apa nilainya, saya berakhir di sini dengan pertanyaan yang sama setelah mengunjungi halaman Anda. Info yang dimilikinya sangat bagus, tetapi tidak berbicara tentang parameter URL atau bahwa URL dapat digunakan tanpa javascript (dalam konteks membuat tombol dengan cepat) seperti yang dilakukan halaman setara facebook dan twitter.
xr280xr

Kode url saya pada deskripsi agak tersendat. Tahu kenapa? Contoh: "Pada tahap ini, saya hanya akan menyalin & menempelkan dari pos lain karena & amp; # 8230; waktu." - jelas kurang ideal.
Imperatif

2
Jawaban di atas berfungsi dengan baik jika pengguna sudah masuk di pinterest jika tidak, itu hanya tetap di halaman beranda pinterest bahkan setelah berhasil masuk. Ada solusi?
Uday

69

Jika Anda ingin membuat hyperlink sederhana daripada tombol sematkan,

Ubah ini:

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

Untuk ini:

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

Jadi, URL lengkapnya mungkin terlihat seperti ini:

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


2
Saya lebih suka membuat tautan sendiri. Apakah ini masih berfungsi, atau apakah mereka sudah mengubahnya?
nouveau

6
Jawaban yang diterima akan menghasilkan tombol jika Anda memiliki tombol pinterest lain (dan skrip pinit.js dimuat). Mengubah url menjadi 'link' daripada 'button' akan memungkinkan Anda untuk memiliki tombol pinterest di footer Anda dan link pinterest kustom di suatu tempat di halaman Anda. Ini harus menjadi jawaban yang diterima.
ashack

1
Terima kasih atas jawaban Anda, persis seperti yang saya cari. Ini harus menjadi jawaban yang benar menurut saya :)
patricia

3
Aku upvoted jawaban ini, tapi kemudian menemukan bahwa pinterest melempar kesalahan ketika mencoba untuk pin: 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.. Solusinya adalah mempertahankan url buttontetapi mengabaikan skrip pinterest. lihat stackoverflow.com/a/15035520/440646
beristirahat pada

1
tidak melempar kesalahan seperti sekarang: P menggunakan sebagai tautan saham daftar properti:http://pinterest.com/pin/create/link/?url=URL&media=COVERIMAGE&description=ADDRESS
Jeannie

6

Saya memiliki pertanyaan yang sama. Ini bekerja dengan baik di Wordpress!

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


2

Saya menemukan beberapa kode untuk 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>

Kemudian Anda meletakkan yang berikut ini di PHP Anda:

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

Jadi Anda ingin kode ke tombol pin it tanpa memasang tombol? Jika demikian, cukup tempelkan kode ini di tempat url halaman tempat Anda memasang pin. Ini harus berfungsi sebagai tombol pin it tanpa tombol.

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
Ini berhasil untuk saya, tetapi 2 pertanyaan. Bagaimana Anda bisa mempertahankan popup? Juga, apa yang dilakukan matematika acak?
Tepuk

Ini kode resmi Pinterest dari 'bookmarklet' mereka. Biasanya digunakan sebagai tautan yang Anda simpan ke bookmark dan dapat mengeklik situs web mana pun yang Anda kunjungi untuk memunculkan dialog Pinterest, tetapi cara ini juga berfungsi dengan baik, dan mudah diterapkan.
ConorLuddy

1
Mereka secara khusus memberi tahu Anda untuk tidak melakukan ini di dokumen API. Hanya karena Anda bisa, bukan berarti Anda harus melakukannya.
Imperatif

0

Anda dapat membuat tautan khusus seperti yang dijelaskan di sini menggunakan skrip jQuery kecil

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

ini akan berfungsi untuk semua tautan dengan kelas linkPinItyang memiliki gambar dan deskripsi yang disimpan dalam atribut data HTML 5 data-imagedandata-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> 

lihat contoh jfiddle ini

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.