Tutorial Membuat Share Social di WordPress Tanpa Plugins
|Tutorial WordPress kali ini adalah tentang cara membuat Share Social di postingan wordpress tanpa menggunakan plugins, sebelumnya saya pernah membuat postingan tentang Plugins Keren Floating Social Bar WordPress dengan plugin social sharebar, tapi kali ini saya akan memberikan tutorial membuat Share social yang sederhana tanpa menggunakan plugins, tapi jika anda bisa menambahkan css yang keren pada social share ini tentunya juga menjadi social yang keren tanpa plugins.
Untuk membuatnya, buka fungtions.php pada template wordpress yang anda gunakan dan kemudian tambahkan kode dibawah ini.
add_filter( 'the_content', 'ilc_share' ); function ilc_share( $content ) { global $post; $postlink = get_permalink($post->ID); $posttitle = get_the_title($post->ID); $html = '<ul class="share-entry">'; // Twitter $html .= '<li><a class="share-twitter" title="Share on Twitter" rel="external" href="http://twitter.com/share?text='.$posttitle.'&url='.$postlink.'">Share on Twitter</a></li>'; // Facebook $html .= '<li><a class="share-facebook" title="Share on Facebook" rel="external" href="http://www.facebook.com/share.php?u=' . $postlink . '">Share on Facebook</a></li>'; // LinkedIn $html .= '<li><a class="share-linkedin" title="Share on LinkedIn" rel="external" href="http://www.linkedin.com/shareArticle?mini=true&url=' . $postlink . '&title=' . $posttitle . '">Share on LinkedIn</a></li>'; // Digg $html .= '<li><a class="share-digg" title="Share on Digg" rel="external" href="http://digg.com/submit?url=' . $postlink . '">Share on Digg</a></li>'; // StumbleUpon $html .= '<li><a class="share-stumbleupon" title="Share on StumbleUpon" rel="external" href="http://www.stumbleupon.com/submit?url=' . $postlink . '&title=' . $posttitle . '">Share on StumbleUpon</a></li>'; // Google+ $html .= '<li><a class="share-googleplus" title="Share on Google+" rel="external" href="https://plusone.google.com/_/+1/confirm?url=' . $postlink . '">Share on Google+</a></li>'; $html .= '</ul>'; return $content . $html; }
Setelah anda tambahkan kode diatas lalu save, dan secara otomatis akan tampil dibawah konten setiap postingan anda. Untuk mempercantik tampilan gunakan nama class-class css dari script diatas di style.css anda. Semoga bermanfaat. 🙂
Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.
Daftar isi Tutorial WordPress Terlengkap GratisRegister Now: TOP 10 Hosting
Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals
berarti itu script css-ny langsung ditambahi aja ke style.css? nggak perlu diedit?
yg diedit dan ditambahin script html itu yg script di function.php?
mending dibikinin artikel baru aja gan…
iya di tambahin html itu, sekalian di diganti class sesuai cssnya dan di taruh di li class nya. ane g ksih cssnya, soalnya biar berkreasi sendiri-sendiri gan.
Itu yang muncul cm tulisan link aja bro..
cara edit css-nya biar muncul button-ny gmn?
iya gan, emang tutorial ini cuman munculin tulisan aja, kalo mau pakek gambar ya nyesuain gambarnya sesuai keinginan agan. terus buat class css sendiri, lalu bikin css nya sesuain keinginanya tampil gimana.
bisa kasih contoh css yang udah jadi gitu? berikut langkah2 praktisnya..
soalny masih baru banget make WP. mau pake plugin banyak yg bilang bakal jd berat
ni gan ane kasih
itu script css nya gan.
terus ganti semua class di script li sesuai dengan class css masing-masing gambar gan, di script pada artikel ane kasih class di a href tu hapus aja, kasih class di li. sedangkan ul class nya kosongin aja. tambah script pada bari kelima dengan ini
lalu di bawah script baris ke 19 tambah script ini
gan, kodenya tarok di function.php nya dimananya???di paling bawah ato gmna???coz klu di t4 paling bawah, jadi error