Cara Membuat Tombol Share Artikel ke Sosial Media di WordPress Tanpa Plugin

Info Menarik – Dengan adanya tombol share artikel ke sosial media pada halaman posting website maka setiap kali kita update artikel dapat dengan mudah untuk membagikan artikel. Hal ini suatu upaya agar pengguna sosial media bisa tertarik untuk klik dan berkunjung ke website sehingga pada akhirnya trafik website bisa meningkat. Banyak manfaat yang akan kita peroleh jika halaman website memiliki tombol share ke sosial media.

Dari tahun ke tahun pengguna sosial media terus meningkat. Saat ini hampir semua kalangan akan memiliki akun sosial media. Oleh karena itu sosial media bisa kita jadikan sebagai ajang atau tempat promosi artikel yang telah kita terbitkan di halaman website. Bisa saja artikel yang kita buat sangat dibutuhkan oleh pengguna sosial media. Sehingga ketika artikel kita bagikan, mereka akan tertarik dan penasaran untuk membaca lebih lanjut tentang artikel tersebut.

Kamu bisa membagikan artikel ke halaman sosial media ternama seperti Facebook, Twitter, Instagram, Tumblr, Pinterest, Linkedin, dan sebagainya. Dan untuk membagikan artikel ke sosial media langkah mudahnya adalah dengan membuat tombol share di halaman posting website. Sehingga ketika kita butuhkan tinggal klik tombol tersebut dan otomatis artikel akan masuk ke halaman sosial media.

Baca Juga: Cara Membuat Akun Facebook di Komputer dan Android

Orang-orang ketika mencari informasi selain menggunakan mesin pencari seperti Google, juga mereka akan mencari informasi di halaman sosial media. Maka tidak alasan lagi bahwa menampilkan tombol share di website bisa dikatakan wajib. Meskipun belum tentu artikel kita akan ada yang baca, tapi tidak ada salahnya untuk mencoba.

Di WordPress untuk membuat tombol share artikel ke sosial media bisa kita lakukan dengan cara mudah. Saat ini banyak plugin khusus untuk memenuhi keperluan ini. Namun saya saat ini tidak akan membahas plugin, tapi pada artikel ini saya ingin membagikan cara yang tidak menggunakan plugin.

Cara Membuat Tombol Share Artikel ke Sosial Media di WordPress

Seperti yang sudah saya singgung di atas bahwa pembuatan tombol share di WordPress ini saya tidak akan menggunakan plugin. Cukup dengan menyisipkan kode PHP maka kita sudah bisa menampilkan tombol share. Kemudian agar tampilan share sosial media lebih menarik lagi, maka saya akan menambahkan kode CSS.

1. Kode PHP Share Sosial Media

Langkah pertama silakan login di Dashboard WordPress menggunakan username dan password yang biasa Kamu gunakan.

Setelah berhasil login, selanjutnya tempatkan kode berikut pada functions.php sebelum penutup PHP pada tema yang Kamu gunakan.

add_filter( 'the_content', 'ilc_share' );
function ilc_share( $content ) {
global $post;
$postlink = get_permalink($post->ID);
$posttitle = get_the_title($post->ID);
$html = '<div class="share-entry">';
// Title
$html .= '<h3><class="share-title" >Share Artikel Info Menarik :</h3>';
// Facebook
$html .= '<a class="share-facebook" title="Share on Facebook" target="_blank" rel="external" href="http://www.facebook.com/share.php?u=' . $postlink . '">Facebook</a>';
// Twitter
$html .= '<a class="share-twitter" title="Share on Twitter" target="_blank" rel="external" href="http://twitter.com/share?text='.$posttitle.'&url='.$postlink.'">Twitter</a>';
// LinkedIn
$html .= '<a class="share-linkedin" title="Share on LinkedIn" target="_blank" rel="external" href="http://www.linkedin.com/shareArticle?mini=true&url=' . $postlink . '&title=' . $posttitle . '">LinkedIn</a>';
// Digg
$html .= '<a class="share-digg" title="Share on Digg" target="_blank" rel="external" href="http://digg.com/submit?url=' . $postlink . '">Digg</a>';
// Print
$html .= '<a class="share-print" title="Print Artikel" rel="external" href="javascript:window.print()">Print Artikel</a>';
$html .= '</div>';
return $content . $html;
}

Setelah menempatkan kode di atas di functions.php tema, maka akan otomatis sekarang di setiap akhir artikel akan tampil link yang mengarah ke sosial media. Jika Kamu klik salah satu linknya, maka otomatis artikel yang Kamu tulis akan muncul di media sosial.

2. Kode CSS Share Sosial Media

Langkah selanjutnya agar tampilan sosial media lebih menarik lagi, silakan Kamu tempatkan kode berikut pada halaman style.css. Dan untuk memasang kode CSS langkahnya masih sama dengan cara di atas. Yang membedakan keduanya jika tadi kode kita pasang di functions.php, sedangkan kode CSS akan kita pasang di style.css.

Berikut adalah kode CSS yang harus kita pasang di halaman style.css.

.share-entry{
 list-style:none;
 position:relative;
 margin-bottom:25px;
 }
 .share-entry h3{
 margin-bottom:15px;
 }
 .share-entry a:link{
 color:#000;
 text-shadow: 1px 1px 1px #fff;
 }
 .share-entry a:hover{
 color:#fff;
 text-shadow: 1px 1px 1px #000;
 }
 .share-entry .share-facebook{
 margin-right:5px;
 padding:7px;
 border-radius:4px;
 background-color:rgba(59,89,152,0.42);
 -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
 -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
 box-shadow:rgba(0,0,0,.28) 0 2px 3px;
 -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
 }
 .share-entry .share-facebook:hover{
 background-color:rgba(59,89,152,1);
 }
 .share-entry .share-twitter{
 margin:5px;
 padding:7px;
 border-radius:4px;
 background-color:rgba(64,153,255,0.42);
 -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
 -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
 box-shadow:rgba(0,0,0,.28) 0 2px 3px;
 -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
 }
 .share-entry .share-twitter:hover{
 background-color:rgba(64,153,255,1);
 }
 .share-entry .share-linkedin{
 margin:5px;
 padding:7px;
 border-radius:4px;
 background-color:rgba(0,109,192,0.42);
 -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
 -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
 box-shadow:rgba(0,0,0,.28) 0 2px 3px;
 -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
 }
 .share-entry .share-linkedin:hover{
 background-color:rgba(0,109,192,1);
 }
 .share-entry .share-digg{
 margin:5px;
 padding:7px;
 border-radius:4px;
 background-color:rgba(42,111,184,0.42);
 -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
 -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
 box-shadow:rgba(0,0,0,.28) 0 2px 3px;
 -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
 }
 .share-entry .share-digg:hover{
 background-color:rgba(42,111,184,1);
 }
 .share-entry .share-print{
 margin:5px;
 padding:7px;
 border-radius:4px;
 background-color:rgba(47,73,97,0.42);
 -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
 -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
 box-shadow:rgba(0,0,0,.28) 0 2px 3px;
 -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
 }
 .share-entry .share-print:hover{
 background-color:rgba(47,73,97,1);
 }

Simpan dan lihat hasilnya, selamat mencoba dan semoga bermanfa’at.