fbpx

Cara Menambahkan Tombol “Pint It” Pinterest di WordPress

Apa Anda ingin menambahkan tombol Pin It Pinterest di WordPress? Pinterest merupakan situs media sosial yang membantu Anda membagikan konten visual dan menghasilkan banyak traffic ke website Anda.

Di artikel kali ini, kita akan mencari tahu cara menambahkan tombol Pin It Pinterest ke blog WordPress. Anda juga bisa mengetahui cara menambahkan tombol Pin It pada gambar di website Anda.

Menambahkan tombol Pin It Pinterest menggunakan plugin

Pinterest secara resmi mengubah nama tombol Pin It menjadi Save di tahun 2016. Meski beberapa plugin masih menggunakan nama Pin It, bukan Save, keduanya memiliki fungsi yang sama pada gambar Anda di Pinterest.

Photo credit: Google

Cara paling mudah untuk menambahkan tombol Pinterest ke situs WordPress adalah dengan menggunakan plugin sharing media sosial.

Anda bisa menggunakan plugin Shared Counts untuk tujuan ini. Shared Counts adalah plugin media sosial terbaik untuk WordPress karena gratis dan membantu Anda dengan mudah menambahkan tombol Pinterest bersama dengan jejaring media sosial populer lainnya.

Instalasi dan aktivasi

Untuk memulai, Anda perlu menginstal dan mengaktifkan plugin Shared Counts. 

Setelah instalasi, Anda bisa menuju halaman Settings>>Shared Counts untuk konfigurasi plugin.

Pada halaman setting, Anda perlu menggulung ke bawah ke bagian Display dan lalu klik pada textbox “Share Buttons to Display”.

Langkah ini akan membuka menu dropdown dimana Anda bisa memilih layanan media sosial yang Anda ingin tambahkan. Secara default, Pinterest akan ada di kotak, bersama Facebook dan Twitter.

Memilih lokasi dan jenis postingan

Anda bisa juga memilih lokasi dan jenis postingan dimana Anda ingin menampilkan tombol Pinterest. Ada banyak style tombol yang bisa Anda pilih dari pilihan Share button style. 

Setelah Anda selesai, jangan lupa untuk mengklik pada tombol Save Changes untuk menyimpan pengaturan.

Photo credit: Google

Sekarang Anda bisa kunjungi postingan mana saja di website untuk melihat tombol Pinterest berfungsi.

Hal lain tentang SharedCounts adalah Custom Pinterest Image addon yang tersedia di Github. Ini membantu Anda mengatur sharing gambar Pinterest yang custom dan deskripsi yang dioptimasi untuk Pinterest.

Secara manual menambahkan tombol Pin It Pinterest di WordPress

Beberapa pengguna lebih memilih menambahkan tombol media sosial secara manual ke situs WordPress mereka daripada menggunakan plugin.

Mari kita lihat bagaimana secara manual menambahkan tombol Pinterset di WordPress. Hal pertama yang perlu Anda lakukan adalah membuat backup WordPress dari situs Anda. Ini akan membantu Anda menyimpan situs ketika sesuatu yang tidak diinginkan terjadi.

Selanjutnya Anda perlu terhubung ke hosting WordPress menggunakan FTP client dan lalu masuk ke folder /wp-content/themes/. 

Dari sini Anda perlu membuka folder tema terbaru dan lalu tempatkan file footer.php.

Photo credit: Google

Selanjutnya, klik kanan pada file dan lalu pilih Download dari menu. Langkah ini akan mendownload file footer.php ke komputer Anda.

Sekarang Anda perlu membuka file footer.php menggunakan teks editor seperti Notepad dan lalu tempelkan script berikut tepat sebelum tag </body>.

"text/javascript">(function() {window.PinIt = window.PinIt || { loaded:false };if (window.PinIt.loaded) return;window.PinIt.loaded = true;function async_load(){var s = document.createElement("script");s.type = "text/javascript";s.async = true;s.src = "https://assets.pinterest.com/js/pinit.js";var x = document.getElementsByTagName("script")[0];x.parentNode.insertBefore(s, x);}if (window.attachEvent)window.attachEvent("onload", async_load);elsewindow.addEventListener("load", async_load, false);})();

Setelah itu, Anda perlu menyimpan file dan lalu menguploadnya kembali ke folder tema terbaru.

Selanjutnya Anda perlu tempatkan dan download file single.php dari folder tema dan buka untuk editing. Setelah itu Anda perlu tambahkan kode berikut.

Anda perlu memilih lokasi dimana Anda ingin ini muncul di postingan. Setelah judul postingan menjadi penempatan yang paling umum untuk tombol media sosial.

<?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(); ?>"class="pin-it-button"count-layout="vertical">Pin It</a>

Kode di atas menampilkan tombol Pinterest dengan fitur image, judul, deskripsi, dan URL postingan di share URL paremeter.

Terakhir, Anda perlu menyimpan file dan mengupload kembali ke direktori tema menggunakan FTP.

Langkah ini akan menambahkan tombol share vertikal ke postingan pada website. Bila Anda ingin menampilkan tombol share horizontal, maka cukup ganti parameter layout ke horizontal.

Menciptakan shortcode untuk tombol Pinterest

Shortcode pada WordPress membantu Anda dengan mudah menambahkan item dinamis ke postingan WordPress, halaman, dan widget. Dengan menciptakan shortcode, Anda bisa secara manual menambahkan tombol Pinterest di artikel.

Pertama, Anda perlu menambahkan kode berikut ke file tema functions.php atau plugin situs spesifik.

functionget_pin($atts) {

$pinterestimage= wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full');

return'<a href="http://pinterest.com/pin/create/button/?url='. urlencode(get_permalink($post->ID)) . '&media='. $pinterestimage[0] . '&description='. get_the_title() .'" class="pin-it-button" count-layout="vertical">Pin It</a>'; }

add_shortcode('pin', 'get_pin');

Setelah itu, Anda bisa gunakan shortcode di postingan WordPress dimana Anda ingin menampilkan tombol Pinterest.

Menambahkan tombol Pin It Pinterest pada gambar

Bila Anda menjalankan situs fashion atau fotografi, maka Anda tentu ingin gambar bisa dibagikan di Pinterest untuk meningkatkan traffic website.

Kita lihat bagaimana menambahkan tombol Pin It Pinterest pada gambar di WordPress. Tombol ini akan muncul hanya ketika pengguna membawa mouse ke gambar, membantu mereka dengan mudah membagikan gambar di profil Pinterest.

Pertama, Anda perlu menginstal dan mengaktifkan plugin Pinterest Pin It Button for Images.

Setelah aktivasi, masuk ke halaman Settings >> Pinterest Pin It untuk konfigurasi plugin.

Photo credit: Google

Pada halaman setting, Anda bisa memilih dimana Anda ingin menunjukkan tombol Pin It pada situs WordPress. Anda bisa menampilkannya hanya pada postingan tunggal, halaman, halaman kategori, atau dimana saja di dalam situs Anda.

Pilihan selanjutnya adalah memilih deskripsi default dari menu dropdown. Ini akan digunakan sebagai deskripsi gambar untuk gambar yang di-pin.

Setelah selesai, Anda perlu klik pada tombol Save untuk menyimpan pengaturan. Sekarang Anda bisa mengunjungi website dan lalu mengarahkan cursor pada gambar untuk melihat tombol Pin It Pinterest.

Menambahkan nopin

Bila Anda tidak ingin menyertakan beberapa gambar menunjukan tombol Pin It, maka Anda bisa tambahkan nopin CSS class ke gambar yang tidak ingin Anda sertakan.

Untuk melakukan ini, Anda perlu memilih blok gambar di post editor dan lalu klik pada tiga titik vertikal dari toolbar blok. Ini akan membuka menu dimana Anda perlu klik pada pilihan Edit as HTML.

Photo credit: Google

Sekarang Anda akan melihat kode HTML untuk gambar. Tambahkan nopin pada class atribut tag gambar:

1<figure class="wp-block-image"><img src="https://example.com/wp-content/uploads/2019/06/imagename.jpg" alt="image name" class="nopin wp-image-1687"/></figure>

Begitu juga, Anda bisa gunakan plugin untuk menonaktifkan tampilan otomatis pada tombol Pin It, dan menggunakan CSS class “pinthis” untuk memilih menampilkan tombol pada gambar tertentu.

Untuk melakukan itu, Anda perlu mengunjungi halaman pengaturan plugin dan lalu tempatkan bagian Advanced pada sisi kanan halaman.

Photo credit: Google

Sekarang Anda perlu cek pilihan yang mengatakan “Show Pin It button only on images with class=”pinthis” dan lalu klik pada tombol Save.

Selanjutnya ketika Anda ingin menambahkan gambar di postingan atau halaman, Anda perlu memilih blok gambar dan lalu gunakan pilihan Edit as HTML untuk menambahkan pintthis CSS class ke kode gambar. Berikut ini contohnya:

1<figure class="wp-block-image"><img src="https://example.com/wp-content/uploads/2019/06/imagename.jpg" alt="image name" class="pinthis wp-image-1687"/></figure>

Ini akan menunjukkan tombol Pinterest pada halaman spesifik, meski bila Anda telah menonaktifkan pilihan untuk secara otomatis menunjukkan tombol Pin It pada situs Anda.

Semoga artikel ini bermanfaat.

Satu pemikiran pada “Cara Menambahkan Tombol “Pint It” Pinterest di WordPress”

Tinggalkan komentar