by

Social Media Share Tanpa Plugin di WordPress

Social media share memang sangat dibutuhkan bagi para blogger untuk di pasang di blog/web mereka. Fungsi utama dari social media share tentu saja adalah untuk meningkatkan jumlah visitor/pengunjung sebuah blog. Dengan memasang social media share di blog/web, maka ketika ada pengunjung yang merasa artikel/konten anda menarik untuk dibagikan, tak segan-segan pengunjung tersebut akan membagikannya ke akun jejaring sosial milik mereka, sehingga hal ini akan sangat menguntungkan bagi kita pemilik blog/web karena terbantu dalam melakukan promosi.

Bagi pengguna CMS (Content Management System) WordPress selfhosted, memang ada banyak sekali social media share plugin yang bisa anda gunakan untuk dipasang di blog/web anda. Namun memasang plugin berlebihan pada WordPress membuat blog/web menjadi lebih berat untuk di akses, hal ini bisa berdampak buruk bagi kenyamanan pengunjung, dan tentu saja hal ini juga akan meningkatkan bounce rate blog/web anda.

Social Media Share Tanpa Plugin di WordPress
Social Media Share Tanpa Plugin di WordPress

Bagi anda yang ingin tetap memasang social media share untuk blog/web WordPress anda, namun tidak ingin menambah plugin untuk situs WordPress yang anda gunakan, script berikut akan memberikan solusi alternatif. Sehingga blog/web anda terlihat lebih profesional dengan adanya social media share ini, namun tetap tidak membuat situs anda terlalu berat di akses. Lalu bagaimana cara memasangnya? Simak penjelasannya berikut.

Cara Memasang Social Media Share Tanpa Plugin di WordPress

  1. Social media share yang akan kita pasang ini nantinya akan terletak dibawah postingan (Lihat screenshot pada gambar). Dan untuk memasangnya kita akan mengedit file theme WordPress yang kita gunakan, maka saya sarankan anda membackup keseluruhan isi situs WordPress anda terlebih dahulu untuk berjaga-jaga.
  2. Buka direktori/folder theme WordPress yang anda gunakan, lalu cari file yang bernama “functions.php” biasanya file ini terletak di direktori theme yang anda gunakan.
  3. Lalu tambahkan script berikut di file “functions.php” tadi. Hati-hati dalam menambahkan script, pastikan anda sedikit mengerti minimal peletakan scriptnya, karena theme WordPress pasti memiliki penulisan yang unik (Misalnya jika di “functions.php” anda tidak diakhiri dengan tag penutup “?>”, anda bisa meletakkan script di bawah sendiri, namun jika di akhiri tag penutup “?>”, maka anda bisa meletakkan script sebelum tag penutup phpnya tersebut.
/* socmed */
function NoosInc_social_sharing_buttons($content) {
	global $post;
	if(is_singular() || is_home()){

		$NoosIncURL = urlencode(get_permalink());
		$NoosIncTitle = str_replace( ' ', '%20', get_the_title());
		$NoosIncThumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );

		$twitterURL = 'https://twitter.com/intent/tweet?text='.$NoosIncTitle.'&url='.$NoosIncURL.'&via=NoosInc';
		$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$NoosIncURL;
		$googleURL = 'https://plus.google.com/share?url='.$NoosIncURL;
		$bufferURL = 'https://bufferapp.com/add?url='.$NoosIncURL.'&text='.$NoosIncTitle;
		$whatsappURL = 'whatsapp://send?text='.$NoosIncTitle . ' ' . $NoosIncURL;
		$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$NoosIncURL.'&title='.$NoosIncTitle;
		$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$NoosIncURL.'&media='.$NoosIncThumbnail[0].'&description='.$NoosIncTitle;
 
		$content .= '
<div class="NoosInc-social">
';
		$content .= '
<h4>SHARE ON</h4>

 <a class="NoosInc-link NoosInc-twitter" href="'. $twitterURL .'" target="_blank">Twitter</a>';
		$content .= '<a class="NoosInc-link NoosInc-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>';
		$content .= '<a class="NoosInc-link NoosInc-whatsapp" href="'.$whatsappURL.'" target="_blank">WhatsApp</a>';
		$content .= '<a class="NoosInc-link NoosInc-googleplus" href="'.$googleURL.'" target="_blank">Google+</a>';
		$content .= '<a class="NoosInc-link NoosInc-buffer" href="'.$bufferURL.'" target="_blank">Buffer</a>';
		$content .= '<a class="NoosInc-link NoosInc-linkedin" href="'.$linkedInURL.'" target="_blank">LinkedIn</a>';
		$content .= '<a class="NoosInc-link NoosInc-pinterest" href="'.$pinterestURL.'" data-pin-custom="true" target="_blank">Pin It</a>';
		$content .= '</div>

';
		
		return $content;
	}else{
		return $content;
	}
};
add_filter( 'the_content', 'NoosInc_social_sharing_buttons');
  1. Setelah itu tambahkan CSS berikut di bagian custom css atau stylesheet utama situs WordPress anda. Misalnya anda dapat meletakkannya di file “style.css” atau jika ada lebih saya sarankan di custom CSS dari theme WordPress yang anda gunakan.
/*social media*/
@media screen and (min-width: 1024px) {
    .NoosInc-whatsapp {
	display: none !important;
    }
}

@media screen and (max-width: 1024px) {
    .NoosInc-buffer {
	display: none !important;
    }
}
 
.NoosInc-link {
 border: none;
 width: 31%;
 display: inline-block;
 margin: 0 1%;
 border-radius: 3px;
 padding: 8px 1%;
 overflow: hidden;
 color: #fff !important;
}
 
.NoosInc-link:hover,.NoosInc-link:active {
    color: white !important;
}
 
.NoosInc-twitter {
    background: #00aced;
}
 
.NoosInc-twitter:hover,.NoosInc-twitter:active {
    background: #0084b4;
}
 
.NoosInc-facebook {
    background: #3B5997;
}
 
.NoosInc-facebook:hover,.NoosInc-facebook:active {
    background: #2d4372;
}
 
.NoosInc-googleplus {
    background: #D64937;
}
 
.NoosInc-googleplus:hover,.NoosInc-googleplus:active {
    background: #b53525;
}
 
.NoosInc-buffer {
    background: #444;
}
 
.NoosInc-buffer:hover,.NoosInc-buffer:active {
    background: #222;
}
 
.NoosInc-pinterest {
    background: #bd081c;
}
 
.NoosInc-pinterest:hover,.NoosInc-pinterest:active {
    background: #b30000;
}
 
.NoosInc-linkedin {
    background: #0074A1;
}
 
.NoosInc-linkedin:hover,.NoosInc-linkedin:active {
    background: #006288;
}
 
.NoosInc-whatsapp {
    background: #43d854;
}
 
.NoosInc-whatsapp:hover,.NoosInc-whatsapp:active {
    background: #009688;
}
 
.NoosInc-social {
 width: 100%;
 max-width: 900px;
 text-align: center;
}
  1. Langkah terakhir adalah menghapus seluruh cache dan cookies yang ada pada situs WordPress anda (terutama anda yang menggunakan plugin cache). Lalu coba buka kembali situs WordPress anda, dan pastikan semua script yang baru anda tambahkan terload/termuat dengan benar. Anda dapat melihatnya dengan “View Source Code” atau tekan tombol keyboard “Ctrl + U” secara bersamaan saat situs anda sudah terbuka.
  2. Karena social media share ini terletak dibawah postingan, jadi cobalah buka salah satu postingan anda untuk melihat hasilnya.

Seperti itulah tutorial bagaimana cara memasang social media share tanpa plugin dibawah postingan blog/web WordPress anda. Semoga bermanfaat. (Son).

Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

3 comments