Cara Membuat Tombol Share Atau Tombol Berbagi Tanpa Plugin. Apakah Sobat teknologi[dot]visitklaten[dot]com ingin melengkapi tampilan website dengan fitur tombol share atau berbagi dengan hanya bermodal tag HTML. Yap.. Maka salah satu metode ini patut dicoba untuk diterapkan dalam blog ataupun website yang dimiliki terutama CMS WordPress.
Dengan hanya bermodal tag HTML dengan sedikit tambahan style CSS bisa membuat website lebih menarik. Selain itu untuk membuatnya juga cukup mudah.
Sebelumnya kami mengucapkan banyak terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi.
Fitur Share ini akan bermanfaat untuk membantu pengunjung untuk membagikan postingan artikel dan halaman website ke layanan sosial media. Selain itu juga akan membantu meningkatkan trafik web. Mungkin rekan-rekan pernah melihat di suatu situs berita atau situs lainnya yang menampilkan beberapa tombol untuk berbagi ke media sosial.
Untuk membuatnya cukup mudah dan Dengan catatan kami menggunakan tambahan CSS dari bootstrap ya.
Di kesempatan kali ini, kami akan berbagi tutorial membuat fitur share di website. Tombol share yang dibuat adalah share ke twitter, facebook, linkedIn, pinterest, whatsapp dan email.
Berikut Panduan Membuat Tombol Share Atau Tombol Berbagi Tanpa Plugin
Cara Membuat Tombol Share
Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai kebutuhan. Dalam kode dibawah ini kami menggunakan sistem shortcode jadi nanti bisa disesuaikan dengan kebutuhan yang dipasang atau diletakkan di functions.php.
function shares(){
global $post;
$content = '';
if(is_singular() || is_home()){
// Get current page URL
$sb_url = urlencode(get_permalink());
// Get current page title
$sb_title = str_replace( ' ', '%20', get_the_title());
// Construct sharing URL without using any script
$twitterURL = 'https://twitter.com/intent/tweet?text='.$sb_title.'&url='.$sb_url.'&via=wpvkp';
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$sb_url;
$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$sb_url.'&title='.$sb_title;
$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$sb_url.'&description='.$sb_title;
$whatsappURL ='https://api.whatsapp.com/send?text='.$sb_url.'';
$emailURL ='mailto:?subject=I wanted you to see this site&body='.$sb_title.' '.$sb_url.' ';
// Add sharing button at the end of page/page content
$content .= '<div class="social-box">';
$content .= '<a style="background-color: #00ACED;" class="btn text-white mr-2 mb-1" href="'.$twitterURL.'" target="_blank" rel="nofollow" data-id="'.$post->ID.'"><span><i class="fa fa-twitter" aria-hidden="true"></i></span></a>';
$content .= '<a style="background-color: #4267B2;" class="btn text-white mr-2 mb-1" href="'.$facebookURL.'" target="_blank" rel="nofollow" data-id="'.$post->ID.'"><span><i class="fa fa-facebook-square" aria-hidden="true"></i></span></a>';
$content .= '<a style="background-color: #1B9912;" class="btn text-white mr-2 mb-1" href="'.$whatsappURL.'" target="_blank" rel="nofollow" data-id="'.$post->ID.'"><span><i class="fa fa-whatsapp" aria-hidden="true"></i></span></a>';
$content .= '<a style="background-color: #E6001A;" class="btn text-white mr-2 mb-1" href="'.$pinterestURL.'" data-pin-custom="true" target="_blank" rel="nofollow" data-id="'.$post->ID.'"><span><i class="fa fa-pinterest" aria-hidden="true"></i></span></a>';
$content .= '<a style="background-color: #0077B7;" class="btn text-white mr-2 mb-1" href="'.$linkedInURL.'" target="_blank" rel="nofollow" data-id="'.$post->ID.'"><span><i class="fa fa-linkedin" aria-hidden="true"></i></span></a>';
$content .= '<a style="background-color: #FF6600;" class="btn text-white mr-2 mb-1" href="'.$emailURL.'" target="_blank" rel="nofollow" data-id="'.$post->ID.'"><span><i class="fa fa-envelope-o" aria-hidden="true"></i></span></a>';
$content .= '</div>';
return $content;
}else{
// if not a post/page then don't include sharing button
return $content;
}
}
add_shortcode('shares','shares');
Kemudian masukkan shortcode dibawah ini di tempat yang diinginkan. Jika berupa halaman atau post bisa langsung dicopas.
[*shares*] //hilangkan tanda bintang
Namun jika berupa HTML atau php maka bisa menggunakan dibawah ini
<?php echo do_shortcode('[*shares*]') ;?> //hilangkan tanda bintang
Tampilannya kurang lebih bisa dilihat dibawah ini
Terima kasih telah mengunjungi website kami.
Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.
Komentar