Home / WordPress / Cara Membuat Tombol Share Artikel Ke Sosial Media

Cara Membuat Tombol Share Artikel Ke Sosial Media

Cara Membuat Tombol Share Artikel Ke Sosial Media – Dengan membuat tombol share artikel ke sosial media khususnya blog CMS WordPress yang kita kelola, maka setiap update artikel kita dapat dengan mudah untuk berbagi tulisan terbaru ke beberapa sosial media terkenal seperti Facebook, Twitter, Tumblr, dan lain-lain. Tombol share artikel ini sangat penting, karena dengan rajinnya kita berbagi setiap setelah membuat tulisan terbaru maka otomatis akan meningkatkan pengunjung terhadap blog.

Baca Juga : Cara Merubah Gambar Default Avatar WordPress Tanpa Plugin

Salah satu tujuan membangun blog adalah, agar artikel yang kita buat ada yang membacanya. Bukan hanya sekedar hiasan saja, dan yang terpenting adalah agar orang lain merasa terbantu dengan artikel yang kita tulis.

Cara-Membuat-Tombol-Share-Artikel-Ke-Sosial-Media

Keberadaan dan kepopuleran web sosial media saat ini memang paling banyak diminati oleh semua kalangan. Dari mulai anak-anak sampai orang dewasa, pasti saat ini masing-masing sudah mempunyai akun media sosial. Maka dari itu, kita bisa memanfa’atkannya dengan rajin submit artikel blog ke media sosial tersebut. Dengan harapan artikel kita ada yang sudi untuk membacanya.

Untuk meringankan loading blog, sebaiknya kita buat tombol share artikel ke sosial media hanya dengan menggunakan kode HTML dan ntuk memperindahnya menggunakan kode CSS. Walaupun kita bisa saja membuat tombol share artikel ke sosial media dengan menggunakan Plugin atau menggunakan media icon gambar.

Tombol share artikel ke sosial media dengan menggunakan kode CSS, contohnya bisa Anda lihat di blog Info Menarik. Yang saya tampilkan di akhir setiap tulisan artikel.

Cara membuat tombol share artikel ke sosial media dengan CSS adalah sebagai berikut :

Pertama : tempatkan kode berikut di functions.php tema yang Anda gunakan. Bisa melalui CPanel Hosting atau melalui wp-admin Dashboard akun WordPress Anda. Kode dibawah Anda tempatkan sebelum penutup .php yang ada di functions.php. Cara mengetahui penutup .php bisa Anda lihat di tulisan Cara Merubah Gambar Default Avatar WordPress Tanpa Plugin

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>';
 // Google+
 $html .= '<a class="share-googleplus" title="Share on Google+" target="_blank" rel="external" href="https://plusone.google.com/_/+1/confirm?url=' . $postlink . '">Google+</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>';
 // StumbleUpon
 $html .= '<a class="share-stumbleupon" title="Share on StumbleUpon" target="_blank" rel="external" href="http://www.stumbleupon.com/submit?url=' . $postlink . '&title=' . $posttitle . '">StumbleUpon</a>';
 // StumbleUpon
 $html .= '<a class="share-print" title="Print Artikel" rel="external" href="javascript:window.print()">Print Artikel</a>';
 $html .= '</div>';
 return $content . $html;
 }

Tombol share artikel ke sosial media di atas, hanya share ke media sosial Facebook, Twitter, Google+, Linkedin, Digg, StumbleUpon. Dan ditambah satu tombol Print Artikel, untuk memudahkan pengunjung blog jika ingin cetak atau print artikel yang ia baca tanpa harus copy paste dulu.

Selanjutnya bisa Anda sesuaikan lagi kodenya, dengan menambah kode link ke media sosial lainnya jika memang link share artikel diatas masih kurang.

Setelah Anda menempatkan kode diatas di functions.php tema yang Anda gunakan. Maka akan otomatis di setiap akhir artikel yang Anda tulis akan tampil link-link yang menuju ke sesial media. Jika Anda klik salah satu linknya, maka otomatis artikel yang Anda tulis akan muncul di media sosial yang Anda pilih.

Kedua : Langkah selanjutnya Anda harus mencantumkan kode berikut di style.css tema yang Anda gunakan. Bisa melalui CPanel Hosting atau melalui wp-admin Dashboard akun WordPress Anda. Dengan menempatkan kode berikut di style.css maka tampilan tombol share artikel ke sesial media yang Anda buat tidak amburadul.

.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-googleplus{
 margin:5px;
 padding:7px;
 border-radius:4px;
 background-color:rgba(228,69,36,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-googleplus:hover{
 background-color:rgba(228,69,36,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-stumbleupon{
 margin:5px;
 padding:7px;
 border-radius:4px;
 background-color:rgba(232,60,29,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-stumbleupon:hover{
 background-color:rgba(232,60,29,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.

About InfoMenarik

Berbagi Info & Tips Trik Menarik tentang Seputar EPS-Topik Korea, Kesehatan, Microsoft Office, Pendidikan, Photoshop, Software, Teknologi, WordPress Terlengkap dan Gratis.

17 comments

  1. Cuman kadang yang suka saya ogah mengotak-atik tema wordpress ini, kalau ada tema terbaru muncul, pengaturan yang kita punya harus diulang kembali. Jadinya saya agak malas ngotak-ngatik. Padahal saya lebih suka model tombol berbagi yang ada angka-angkanya.

    • Betul mas, kecuali kalau kita sudah komitmen hanya akan menggunakan satu tema saja (tidak akan gonta-ganti tema). Tapi bisa juga menyimpan di komputer setiap kode-kode penting, atau menyimpannya di local host. Jadi pas kita ganti tema baru, copy paste kode pentingnya akan lebih cepat …
      Selain kode-kode penunjang seperti tombol berbagi, kode webmaster (meta tag) juga harus copy ulang jika kita setelah ganti tema.

  2. wah kalau saya belum paham gan kalat thema wordpress…

  3. Ini untuk wordpress ya min? kalau untuk blogspot ada ngga tutorialnya? saya pake blogspot. makasih min

  4. terimakasih gan.
    sangat bermanfaat artikelnya

  5. terimakasih banyak, artikelnya sangat bermanfaat

  6. terimakasih atas tipsnya, sangat bermanfaat

  7. saya ada pertanyaan soal tombol like, apa beda nya jika kita menggunakan tombol like custom sama yang udah di bikin plugin dari developer semacam addthis?

  8. Trimakasih info menariknya, emang menarik dan bermanfaat untuk tambahan posting saya dan mempermudah membagikan ke Media sosial saya.
    txs

  9. mantap tuh, trus klu sudah pake plugin jetpack gimana? apakah plugin jetpacknya harus dihapus jika ingin memakai cara di atas?

  10. Terima Kasih gan atas tutorialnya.. kalau pake pluggin kira2 pluggin apa ya gan yang paling baik? dan gimana caranya agar facebook tidak memblokir domain web kita?

    Terima Kasih

  11. Artikelnya sangat menarik, terimakasih infonya, saya coba menggunakan tombol share sesuai informasi yang di sampaikan..

  12. Makasih mas artikelnya, saya lagi butuh nih untuk saya pasang di blog saya..sebab memang ingin setiap artikel yang bermanfaat bisa di share oleh pengunjung blog saya

  13. Ternyata ini artikel yang saya cari, tadi salah masuk rupanya. Ijin pakai kodenya mas, mudah-mudahan berhasil

Leave a Reply

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