Kongsi gambar dengan panggilan untuk tindakan Pinterest

Artikel ini menunjukkan cara menambah panggilan-ke-tindakan Pinterest kepada imej, hanya muncul pada hover, untuk meningkatkan penglibatan media sosial. Ia menekankan reka bentuk yang bersih dan mesra pengguna dan mengelakkan kebergantungan yang tidak perlu.

Manfaat Utama:

• Meningkatkan saham Pinterest dan penglihatan kandungan.
• Melaksanakan butang Pinterest yang mudah diaktifkan menggunakan HTML dan CSS.
• menyelaraskan kod dengan menggunakan vanila javascript dan bukannya jQuery (kecuali sudah sebahagian daripada projek anda).

mengapa imej yang boleh dikongsi:

Kandungan yang berkualiti tinggi dan menarik adalah penting. Butang perkongsian sosial meningkatkan ini, membolehkan pengguna dengan mudah berkongsi elemen individu (seperti imej) pada platform seperti Pinterest. Pinterest, khususnya, mendapat manfaat daripada kandungan visual yang menarik.

3

URL pin Pinterest terdiri daripada:

URL asas:

1. : URL halaman anda (url-encoded). https://www.pinterest.com/pin/create/button/
2. : URL imej (url-encoded). url
3. : teks deskriptif (url-encoded, idealnya di bawah 200 aksara). media
4. Walaupun JavaScript Pinterest menawarkan ciri -ciri tambahan, pendekatan ini menggunakan kod minimum untuk kesederhanaan. description

Kaedah keras (kurang efisien):

Kaedah ini melibatkan secara manual menambah HTML untuk setiap imej:

gaya CSS butang (

,

,

<a href="https://www.php.cn/link/af3b0930d888e15a07a36b9987b70858" target="_blank" class="pinterest-anchor pinterest-hidden">
    <div class="pinterest-logo"></div>
</a>
<img src="" data-pin="pinIt" alt="">

), meletakkannya dan mengawal penglihatannya pada hover. Logo Pinterest tertanam sebagai imej yang dikodkan oleh Base64 dalam CSS.

pinterest-anchor pinterest-hidden kaedah automatik (lebih cekap) (dengan jQuery): pinterest-logo

kod jQuery ini secara dinamik menjana pautan Pinterest untuk setiap imej dengan atribut :

data-pin="pinIt" kaedah automatik (lebih efisien) (dengan vanila javascript):

$("img[data-pin='pinIt']").each(function() {
    $(this).before('<a href="https://www.php.cn/link/c84f1f1c3914a66236542d1166b01780' + encodeURIComponent($(location).attr("href")) + '&media=' + encodeURIComponent($(this).attr("src")) + '&description=' + encodeURIComponent($(this).attr("alt")) + '" target="_blank"><div class="pinterest-logo"></div></a>');
    $(this).hover(function() {
        $(this).prev().css("display", "block");
    }, function() {
        $(this).prev().css("display", "none");
    });
});

bersamaan vanila JavaScript ini mencapai hasil yang sama tanpa jQuery:

Pertimbangan Lanjut: Walaupun pendekatan ini bersih dan tidak mengganggu, membuka bahagian dalam tetingkap baru mungkin mengganggu aliran pengguna. Alternatif pop timbul boleh dipertimbangkan.

var pinables = document.querySelectorAll('img');

Array.prototype.forEach.call(pinables, function(el, i){
    data = el.dataset;
    if (data.pin=='pinIt') {
        el.insertAdjacentHTML('beforebegin', '<a href="https://www.php.cn/link/c84f1f1c3914a66236542d1166b01780' + encodeURIComponent(window.location.href) + '&media=' + encodeURIComponent(el.src) + '&description=' + encodeURIComponent(el.alt) + '" target="_blank"><div class="pinterest-logo"></div></a>');
        el.onmouseover = function(){ this.previousSibling.style.display='block'; }
        el.onmouseout = function(){ this.previousSibling.style.display='none'; }
    }
});

Soalan Lazim (Soalan Lazim): (Ini diringkaskan untuk keringkasan, mengekalkan makna asal.)

• Menambah butang 'pin it': Gunakan kod butang simpan Pinterest dari halaman pemaju mereka.
• Menyesuaikan butang: Sesuaikan saiz, bentuk, dan warna pada halaman pemaju Pinterest sebelum mendapat kod.
• panggilan-to-action pada pin: Sertakan panggilan-to-action dalam penerangan pin.
• Prestasi Penjejakan: Gunakan analitik Pinterest.
• Membuat imej lebih banyak boleh dicabut: Gunakan imej yang berkualiti tinggi dan relevan dengan teks alt deskriptif.
• Pengoptimuman Carian Pinterest: Gunakan kata kunci dan hashtag yang relevan dalam deskripsi dan tajuk.
• menggalakkan pinning: tambah butang 'pin itu' yang jelas dan panggilan-ke-tindakan.
• Menambah butang Kongsi Pinterest: Gunakan plugin butang media sosial.
• Trafik Memacu dengan Pinterest: Buat berkualiti tinggi, menarik pin dengan panggilan-ke-tindakan.
Pemasaran Pinterest Pinterest:
• Buat akaun perniagaan, mengoptimumkan profil anda, dan gunakan iklan Pinterest.
output yang disemak ini mengekalkan makna asal sambil meningkatkan kejelasan dan aliran, sesuai untuk persembahan yang lebih profesional. URL imej dipelihara.

Atas ialah kandungan terperinci Kongsi gambar dengan panggilan untuk tindakan Pinterest. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!