Ikuti Saya di:

Blog

Cara Memasang Tombol Social Share di Website Tanpa Plugin

oleh Ahmad Sanusi
06 Juli 2021

Social Share atau Bagikan ke Sosial Media berfungsi sebagai alat/tools untuk membagikan postingan baik itu artikel, produk maupun portfolio ke sosial media. banyak plugin-plugin social share yang tersedia di internet seperti AddThis, JsSocial atau ShareThis. Di artikel ini saya akan membagikan tips cara memasang tombol share tanpa menggunakan plugin, keuntungan tanpa plugin social share yaitu halaman yang akan dishare tidak akan berat ketika diakses. langsung saja berikut langkah-langkah cara memasangkan tombol share di website:

1. Tambahkan Kode HTML

Tambahkan kode HTML di bawah ini ke halaman yang akan dipasang tombol share :

<div class="share-buttons-container">
  <div class="share-list">
    <!-- FACEBOOK -->
    <a class="fb-h" onclick="return fbs_click()" target="_blank">
      <img src="https://img.icons8.com/material-rounded/96/000000/facebook-f.png">
    </a>

    <!-- TWITTER -->
    <a class="tw-h" onclick="return tbs_click()"  target="_blank">
      <img src="https://img.icons8.com/material-rounded/96/000000/twitter-squared.png">
    </a>

    <!-- LINKEDIN -->
    <a class="li-h" onclick="return lbs_click()"  target="_blank">
      <img src="https://img.icons8.com/material-rounded/96/000000/linkedin.png">
    </a>

    <!-- REDDIT -->
    <a class="re-h" onclick="return rbs_click()" target="_blank">
      <img src="https://img.icons8.com/ios-glyphs/90/000000/reddit.png">
    </a>

    <!-- PINTEREST -->
    <a data-pin-do="buttonPin" data-pin-config="none" class="pi-h" onclick="return pbs_click()" target="_blank">
      <img src="https://img.icons8.com/ios-glyphs/90/000000/pinterest.png">
    </a>
  </div>
</div>

2. Tambahkan Kode CSS

Tambahkan kode CSS di bawah ini ke file CSS Anda, biasanya file bernamah Style.css

.share-list {
  display: flex;
  flex-direction: row;
}

.share-list a {
  border-radius: 100px;
  width: 50px;
  height: 50px;
  padding: 7px;
  margin: 10px;
  cursor: pointer;
  overflow: hidden;
  
  img {
    width: 100%;
    height: 100%;
    filter: invert(100%);
  }
}

a.fb-h { background: #3B5998; }
a.tw-h { background: #00acee; }
a.li-h { background: #0077B5; }
a.re-h { background: #FF5700; }
a.pi-h { background: #c8232c; }



// Page Styling
* {
  margin: 0;
  pading: 0;
  box-sizing: border-box;
}

.share-buttons-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #bcbcf2;
  width: 100%;
  height: 100vh;
}

3. Tambahkan kode Javascript

Langkah selanjutnya tambahkan script javascript di bawah ini di file javascript Anda atau pada dibawah body HTML sebelum penutup tag </body>.

var pageLink = window.location.href;
var pageTitle = String(document.title).replace(/\&/g, '%26');

function fbs_click() { window.open(`http://www.facebook.com/sharer.php?u=${pageLink}&quote=${pageTitle}`,'sharer','toolbar=0,status=0,width=626,height=436');return false; }
      
function tbs_click() { window.open(`https://twitter.com/intent/tweet?text=${pageTitle}&url=${pageLink}`,'sharer','toolbar=0,status=0,width=626,height=436');return false; }

function lbs_click() { window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${pageLink}`,'sharer','toolbar=0,status=0,width=626,height=436');return false; }

function rbs_click() { window.open(`https://www.reddit.com/submit?url=${pageLink}`,'sharer','toolbar=0,status=0,width=626,height=436');return false; }

function pbs_click() { window.open(`https://www.pinterest.com/pin/create/button/?&text=${pageTitle}&url=${pageLink}&description=${pageTitle}`,'sharer','toolbar=0,status=0,width=626,height=436');return false; }

Apabila kode di atas sudah Anda salin ke masing-masing file, pastikan tidak ada langkah-langkah atau kode yang tertinggal. Apabila Anda sudah yakin, anda dapat langsung mengeceknya di halaman yang sudah ditambahkan kode tersebut.

Tombol Social Share yang berhasil ditambahkan ke halaman website akan terlihat seperti tampilan di bawah ini :