Ads

Source Code Tombol Social Share Igniel untuk WordPress

Social Share Igniel untuk Wordpress
Dagruel

Social Share WordPress tanpa Plugin

Tombol social share adalah elemen penting dalam sebuah blog, khususnya di bagian artikel. Tombol share ke media sosial akan memudahkan pembaca untuk membagikan artikel Anda di akun mereka.

Beberapa alasan artikel Anda di share :

  • Artikel Anda berisi berita yang sedang populer.
  • Pembaca menganggap artikel Anda bermanfaat.
  • Artikel Anda menyentuh sisi emosional pembaca.
  • Pembaca merasa “gue banget” setelah baca artikel.

Sekiranya itulah beberapa alasan kenapa orang-orang mau membagikan sebuah artikel di media sosial. Kali ini, saya akan berbagi cara membuat tombol social share seperti blog igniel meski tidak bisa di Counter (dihitung) tapi lumayan lah tampilan nya melayang.

Menambahkan Fungsi

Masuk ke dalam Dashboard WordPress, pilih menu Appearance > Theme Editor buka file function.php dan masukkan script dibawah ini.

function wcr_share_buttons() {
    $url = urlencode(get_the_permalink());
    $title = urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8'));
    $media = urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
    include( locate_template('social-share.php', false, false) );
}

Membuat File baru

Buat file php dengan nama social-share.php. Caranya ? Silahkan login ke cPanel blog Anda, lalu masuk ke File Manager. Cari folder tema Anda, seperti gambar di bawah ini ( kebetulan saya (admin Ngetik.id) pakai child theme ) :

Folder Tema Ngetik.id
Dagruel

Klik +File di ujung kiri atas, buat file social-share.php

Membuat File Ngetik.id
Dagruel

Jika sudah, kembali lagi ke menu Appearance > Theme editor di dashboard blog Anda. Seharusnya muncul file baru dengan nama social-share.php. Silahkan masukkan HTML di bawah ini :

<div class="DagruelShare tampil">
  <span class="bagi">
    <svg viewBox="0 0 24 24">
      <path
        d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z">
      </path>
    </svg>
    <i>SHARE</i>
  </span>
  <a class="facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $url; ?>" target="_blank" rel="nofollow" title="Share to Facebook"><svg viewBox="0 0 24 24">
      <path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z"></path>
    </svg></a>
  <a class="twitter" href='https://twitter.com/intent/tweet?text=<?php echo $title; ?>&url=<?php echo $url; ?>' target="_blank" rel="nofollow" title="Share to Twitter"><svg viewBox="0 0 24 24">
      <path
        d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z">
      </path>
    </svg></a>
  <a class="pinterest" data-pin-config="beside" href='https://pinterest.com/pin/create/button/?url=<?php echo $url; ?>&description=<?php echo $title; ?>' target="_blank" rel="nofollow" title="Share to Pinterest"><svg viewBox="0 0 24 24">
      <path
        d="M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z">
      </path>
    </svg></a>
  <a class="linkedin" href='https://www.linkedin.com/sharing/share-offsite/?url=<?php echo $url; ?>&title=<?php echo $title; ?>' target="_blank" rel="nofollow" title="Share to Linkedin"><svg viewBox="0 0 24 24">
      <path d="M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z">
      </path>
    </svg></a>
  <a class="tumblr" data-notes="right" href='https://www.tumblr.com/share/link?url=<?php echo $url; ?>' target="_blank" rel="nofollow" title="Share to Tumblr"><svg viewBox="0 0 24 24">
      <path d="M17,11H13V15.5C13,16.44 13.28,17 14.5,17H17V21C17,21 15.54,21.05 14.17,21.05C10.8,21.05 9.5,19 9.5,16.75V11H7V7C10.07,6.74 10.27,4.5 10.5,3H13V7H17"></path>
    </svg></a>
</div>

Menambahkan CSS

Masih di theme editor. Buka file style.css dan masukkan css dibawah.

.DagruelShare {position: relative;display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;flex-wrap: nowrap;align-items: center;background-color: #fff;color: #fff;padding: 10px 0;border-top: 7px dotted #ddd;z-index: 1;transition: all .3s ease;margin-top: 20px;}
.DagruelShare.tampil {position: sticky;position: -webkit-sticky;bottom: 0;}
.DagruelShare svg {width: 17px;height: 17px;margin: auto;text-align: center;}
.DagruelShare svg path {fill: #fff;}
.DagruelShare i {font-style: normal;margin: 0 3px;line-height: 0}
.DagruelShare a {display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;flex-wrap: nowrap;align-items: center;justify-content: space-between;width: 100%;color: #fff;padding: 7px;border-radius: 25px;box-shadow: none;transition: all .3s ease;}
.DagruelShare a:not(:last-child) {margin-right: 7px;}
.DagruelShare a:hover {box-shadow: inset 0 0 0 99999px rgba(255, 255, 255, 0.25);}
.DagruelShare a.facebook {background-color: #3a579a;}
.DagruelShare a.twitter {background-color: #00abf0;}
.DagruelShare a.pinterest {background-color: #cd1c1f;}
.DagruelShare a.linkedin {background-color: #2554BF;}
.DagruelShare a.tumblr {background-color: #314358;}
.DagruelShare .bagi {display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;flex-wrap: nowrap;align-items: center;font-weight: 600;color: #DA4453;font-size: 1.5em;margin-right: 20px;}
.DagruelShare .bagi svg path {fill: #DA4453;}
@media screen and (max-width: 680px) {
.DagruelShare a:not(:last-child) {margin-right: 5px;}
}
@media screen and (max-width: 480px) {
.DagruelShare a:not(:last-child) {margin-right: 3px;}
}
@media screen and (max-width: 360px) {
.DagruelShare .bagi {margin-right: 15px;}
}
Jika tampilan nya tidak ingin melayang silahkan hapus css yang diberi warna diatas.

Memanggil Script

Untuk menampilkannya di artikel, Anda bisa menggunakan script dibawah :

<?php wcr_share_buttons(); ?>

Masih di theme editor, silahkan buka file single.php. Masukkan script di atas ke dalam file tersebut. Sesuaikan letaknya dengan layout tema blog Anda.

Diatas adalah versi Ngetik.id, saya sendiri karena pengguna theme sparkling memasukkan script diatas kedalam file content-single.php bisa dilihat gambar dibawah.

Social Share Sparkling
Dagruel

Demo nya sama dengan Social share yang saya gunakan. Sekian dari saya terima kasih, jika ada yang ditanyakan silahkan coret-coret dibawah kolom komentar.

Artikel + Script php
https://ngetik.id/

HTML + CSS
https://www.igniel.com/

untuk Versi Blogger Silahkan kunjungi url dibawah
https://www.igniel.com/2018/02/social-share-button-counter.html/

Comments

Blogger Disqus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!