Cara Membuat Tombol Share Sosial Media di Blogger dengan CSS dan JavaScript

Tombol berbagi merupakan salah satu fitur yang berguna pada artikel blog, terutama ketika pembaca menemukan konten yang ingin dibagikan kepada teman, komunitas, atau pengikut mereka. Pada Blogger, Anda tidak harus menggunakan plugin atau library besar untuk membuat fitur tersebut.

Dengan HTML, CSS, dan sedikit JavaScript, Anda dapat membuat tombol share Blogger sendiri untuk beberapa platform seperti Facebook, WhatsApp, Telegram, dan X. Cara ini memberi Anda keleluasaan untuk menentukan tampilan tombol, posisi, ukuran, dan perilaku ketika tombol ditekan.

Pada tutorial ini, kita akan membuat social share Blogger secara bertahap. Selain membuat tombol berbagi artikel, Anda juga akan mempelajari cara mengambil URL halaman secara otomatis, mengatur pesan yang dibagikan, membuat tombol membuka jendela baru, serta menambahkan tombol copy link sebagai alternatif.

Apa Itu Tombol Share Blogger?

Tombol share Blogger adalah sekumpulan tombol yang memungkinkan pembaca membagikan URL artikel ke platform sosial atau aplikasi pesan tertentu. Ketika tombol diklik, browser membuka alamat berbagi dari platform yang dipilih dengan URL artikel yang sudah disiapkan.

Konsep sederhananya adalah sebagai berikut:

• HTML membuat struktur tombol dan link.
• CSS mengatur tampilan, ukuran, jarak, dan responsivitas.
• JavaScript dapat digunakan untuk mengambil URL halaman saat ini dan menjalankan fungsi tambahan seperti copy link.

Dengan struktur tersebut, Anda tidak perlu membuat URL artikel satu per satu untuk setiap postingan. Script dapat mengambil alamat halaman yang sedang dibuka secara otomatis.

Kenapa Membuat Tombol Share Secara Custom?

Blogger dapat dibuat sangat sederhana tanpa plugin tambahan. Karena itu, membuat tombol berbagi sendiri bisa menjadi pilihan ketika Anda ingin mengontrol tampilan dan kode yang digunakan.

Beberapa keuntungan pendekatan ini antara lain:

• Tampilan dapat disesuaikan dengan desain template Blogger.
• Tidak membutuhkan library social share khusus untuk fungsi dasar.
• Platform yang ditampilkan dapat dipilih sesuai kebutuhan.
• Kode dapat dibuat ringan dan sederhana.
• Lebih mudah mengontrol posisi tombol di desktop dan mobile.

Platform yang Bisa Ditambahkan ke Tombol Share

Pada contoh utama, kita akan menggunakan Facebook, WhatsApp, Telegram, dan X. Anda juga dapat menambahkan platform lain selama platform tersebut menyediakan URL atau mekanisme berbagi yang dapat digunakan dari browser.

Platform	Fungsi	Contoh Mekanisme
Facebook	Membagikan URL halaman.	sharer.php?u=URL
WhatsApp	Membagikan pesan dan URL.	wa.me/?text=...
Telegram	Membagikan URL dan teks.	share/url?url=...&text=...
X	Membuat draft posting yang berisi teks dan URL.	intent/post?url=...&text=...

Persiapan Sebelum Membuat Share Button HTML

Sebelum menambahkan kode, tentukan dulu tempat tombol akan ditampilkan. Tombol dapat diletakkan di bawah judul artikel, setelah paragraf pembuka, di akhir artikel, atau pada bagian lain yang sesuai dengan struktur template.

Sebaiknya Anda juga membuat cadangan template terlebih dahulu apabila akan mengedit HTML tema. Struktur setiap template Blogger berbeda, sehingga lokasi penempatan CSS dan JavaScript dapat tidak sama.

Cara Membuat Tombol Share Blogger dengan HTML dan CSS

Langkah 1: Buat Struktur HTML Tombol

Mulailah dengan membuat container yang berisi beberapa tombol. Untuk contoh ini, setiap tombol menggunakan elemen <a> sehingga dapat berfungsi sebagai link biasa.

Gunakan struktur berikut:

<div class="blogger-share">
  <a class="share-btn share-facebook" href="#" target="_blank" rel="noopener noreferrer">
    Facebook
  </a>

  <a class="share-btn share-whatsapp" href="#" target="_blank" rel="noopener noreferrer">
    WhatsApp
  </a>

  <a class="share-btn share-telegram" href="#" target="_blank" rel="noopener noreferrer">
    Telegram
  </a>

  <a class="share-btn share-x" href="#" target="_blank" rel="noopener noreferrer">
    X
  </a>
</div>

Pada tahap ini, href="#" masih menjadi placeholder. URL berbagi akan kita masukkan menggunakan JavaScript.

Langkah 2: Tambahkan CSS

Selanjutnya tambahkan CSS berikut untuk membuat tombol tersusun rapi dan dapat menyesuaikan layar.

.blogger-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 7px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  box-sizing: border-box;
  transition: opacity .2s ease;
}

.share-btn:hover {
  opacity: .9;
}

.share-facebook {
  background: #1877f2;
}

.share-whatsapp {
  background: #25d366;
}

.share-telegram {
  background: #229ed9;
}

.share-x {
  background: #111;
}

@media (max-width: 600px) {
  .blogger-share {
    gap: 8px;
  }

  .share-btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 120px;
  }
}

CSS di atas hanya menggunakan aturan dasar sehingga dapat ditempatkan pada stylesheet template tanpa membutuhkan framework CSS tambahan.

Membuat URL Share Otomatis dengan JavaScript

Sekarang kita akan menghubungkan setiap tombol dengan alamat berbagi masing-masing platform. Keuntungannya, script dapat mengambil judul dan URL artikel yang sedang dibuka secara otomatis.

Tambahkan JavaScript berikut setelah HTML tombol atau pada area JavaScript template yang sesuai:

<script>
document.addEventListener("DOMContentLoaded", function () {
  var pageUrl = window.location.href;
  var pageTitle = document.title;

  var shareFacebook = document.querySelector(".share-facebook");
  var shareWhatsapp = document.querySelector(".share-whatsapp");
  var shareTelegram = document.querySelector(".share-telegram");
  var shareX = document.querySelector(".share-x");

  if (shareFacebook) {
    shareFacebook.href =
      "https://www.facebook.com/sharer/sharer.php?u=" +
      encodeURIComponent(pageUrl);
  }

  if (shareWhatsapp) {
    shareWhatsapp.href =
      "https://wa.me/?text=" +
      encodeURIComponent(pageTitle + " " + pageUrl);
  }

  if (shareTelegram) {
    shareTelegram.href =
      "https://t.me/share/url?url=" +
      encodeURIComponent(pageUrl) +
      "&text=" +
      encodeURIComponent(pageTitle);
  }

  if (shareX) {
    shareX.href =
      "https://twitter.com/intent/post?url=" +
      encodeURIComponent(pageUrl) +
      "&text=" +
      encodeURIComponent(pageTitle);
  }
});
</script>

Bagian penting dari script tersebut adalah window.location.href dan document.title. Nilai pertama digunakan untuk mendapatkan URL halaman saat ini, sedangkan nilai kedua mengambil judul halaman yang sedang dibuka.

Fungsi encodeURIComponent() digunakan agar URL atau judul yang mengandung spasi dan karakter khusus dapat dimasukkan ke dalam parameter URL dengan format yang sesuai.

Versi Lengkap Tombol Share Blogger

Jika ingin melihat struktur yang lebih mudah untuk diterapkan, berikut contoh HTML beserta JavaScript yang dapat digunakan sebagai dasar.

<div class="blogger-share">

  <a class="share-btn share-facebook"
     href="#"
     target="_blank"
     rel="noopener noreferrer">
    Facebook
  </a>

  <a class="share-btn share-whatsapp"
     href="#"
     target="_blank"
     rel="noopener noreferrer">
    WhatsApp
  </a>

  <a class="share-btn share-telegram"
     href="#"
     target="_blank"
     rel="noopener noreferrer">
    Telegram
  </a>

  <a class="share-btn share-x"
     href="#"
     target="_blank"
     rel="noopener noreferrer">
    X
  </a>

</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
  var pageUrl = window.location.href;
  var pageTitle = document.title;

  document.querySelector(".share-facebook").href =
    "https://www.facebook.com/sharer/sharer.php?u=" +
    encodeURIComponent(pageUrl);

  document.querySelector(".share-whatsapp").href =
    "https://wa.me/?text=" +
    encodeURIComponent(pageTitle + " " + pageUrl);

  document.querySelector(".share-telegram").href =
    "https://t.me/share/url?url=" +
    encodeURIComponent(pageUrl) +
    "&text=" +
    encodeURIComponent(pageTitle);

  document.querySelector(".share-x").href =
    "https://twitter.com/intent/post?url=" +
    encodeURIComponent(pageUrl) +
    "&text=" +
    encodeURIComponent(pageTitle);
});
</script>

CSS dari bagian sebelumnya tetap diperlukan agar tombol memiliki tampilan yang sesuai. Contoh di atas juga menggunakan URL intent X melalui domain twitter.com, yang tetap digunakan untuk endpoint pembuatan posting X.

Cara Menambahkan Tombol Copy Link

Selain membagikan artikel langsung ke platform sosial, Anda dapat memberikan pilihan kepada pembaca untuk menyalin URL artikel. Fitur ini berguna ketika pembaca ingin membagikan tautan melalui aplikasi lain yang tidak tersedia pada daftar tombol.

Tambahkan tombol berikut:

<button class="share-btn share-copy"
        type="button"
        id="copy-link-button">
  Copy Link
</button>

Kemudian tambahkan JavaScript:

<script>
document.addEventListener("DOMContentLoaded", function () {
  var copyButton = document.getElementById("copy-link-button");

  if (!copyButton) {
    return;
  }

  copyButton.addEventListener("click", function () {
    var currentUrl = window.location.href;

    if (!navigator.clipboard) {
      copyButton.textContent = "Tidak didukung";

      setTimeout(function () {
        copyButton.textContent = "Copy Link";
      }, 1800);

      return;
    }

    navigator.clipboard.writeText(currentUrl)
      .then(function () {
        copyButton.textContent = "Copied";

        setTimeout(function () {
          copyButton.textContent = "Copy Link";
        }, 1800);
      })
      .catch(function () {
        copyButton.textContent = "Gagal";

        setTimeout(function () {
          copyButton.textContent = "Copy Link";
        }, 1800);
      });
  });
});
</script>

Clipboard API dapat digunakan untuk menulis teks ke clipboard, tetapi browser dapat menerapkan persyaratan keamanan tertentu. Karena itu, tombol copy sebaiknya tetap dianggap sebagai fitur tambahan dan bukan satu-satunya cara untuk mendapatkan URL.

Cara Menempatkan Tombol Share di Artikel Blogger

Setelah kode siap, langkah berikutnya adalah menentukan lokasi tombol. Ada beberapa posisi yang biasanya cocok untuk artikel.

Di Bawah Judul Artikel

Posisi ini membuat tombol langsung terlihat oleh pembaca. Cocok untuk blog yang ingin menyediakan opsi berbagi sejak awal halaman.

Setelah Paragraf Pembuka

Pembaca telah mengetahui isi awal artikel sebelum melihat opsi berbagi. Posisi ini dapat menjadi alternatif jika area tepat di bawah judul sudah digunakan untuk metadata artikel.

Di Akhir Artikel

Posisi akhir artikel cocok ketika Anda ingin pembaca menyelesaikan pembahasan terlebih dahulu sebelum membagikannya.

Cara Membuat Tombol Share di Tengah Template Blogger

Jika Anda ingin tombol muncul otomatis pada banyak postingan, penempatannya dapat dilakukan pada struktur template Blogger, misalnya di sekitar area judul atau isi posting.

Namun, setiap template memiliki struktur XML dan class yang berbeda. Karena itu, jangan menyalin lokasi kode dari template lain secara membabi buta. Periksa struktur tema Anda terlebih dahulu dan lakukan backup sebelum mengubah HTML.

Membuat Tombol Share Lebih Ringkas untuk Mobile

Pada smartphone, empat atau lima tombol yang ditampilkan dalam satu baris dapat membuat area share terlalu padat. Karena itu, gunakan flex-wrap agar tombol dapat turun ke baris berikutnya.

CSS berikut dapat digunakan untuk membuat dua tombol per baris pada layar kecil:

@media (max-width: 600px) {
  .blogger-share .share-btn {
    flex: 1 1 calc(50% - 8px);
  }
}

Anda juga dapat membuat tombol menjadi satu kolom apabila jumlah platform cukup banyak. Pilih struktur yang paling sesuai dengan lebar konten template Anda.

Cara Membuka Tombol Share pada Jendela Baru

Pada contoh sebelumnya, tombol menggunakan:

target="_blank"
rel="noopener noreferrer"

Dengan konfigurasi tersebut, browser dapat membuka URL berbagi pada konteks baru sesuai perilaku browser. Atribut rel="noopener noreferrer" juga menjadi praktik yang baik ketika memakai target="_blank".

Cara Menambahkan Judul Artikel ke Pesan Share

Untuk WhatsApp, Telegram, atau X, Anda dapat mengirimkan judul bersama URL. Script sebelumnya menggunakan:

pageTitle + " " + pageUrl

Hasil akhirnya akan menyerupai judul artikel diikuti alamat halaman. Anda juga dapat menambahkan kalimat pembuka, misalnya:

"Saya menemukan artikel ini: " + pageTitle + " " + pageUrl

Gunakan pesan yang singkat agar tidak membuat URL berbagi menjadi terlalu panjang.

Cara Menambahkan Platform Lain

Struktur tombol dapat diperluas dengan menambahkan elemen baru dan URL berbagi sesuai platform yang digunakan.

Contoh struktur:

<a class="share-btn share-platform"
   href="#"
   target="_blank"
   rel="noopener noreferrer">
  Platform
</a>

Kemudian URL dapat diisi dengan JavaScript sesuai mekanisme berbagi yang disediakan platform tersebut.

Tidak semua platform memiliki format URL share yang sama. Karena itu, jangan mengasumsikan bahwa satu pola dapat dipakai untuk semua layanan.

Kesalahan yang Sering Terjadi pada Social Share Blogger

Kesalahan	Penyebab	Solusi
Tombol tidak melakukan apa-apa	Nilai href masih berupa placeholder atau script tidak berjalan.	Periksa JavaScript dan URL yang dihasilkan.
URL artikel tidak ikut dibagikan	Parameter URL tidak diisi atau tidak di-encode dengan benar.	Gunakan encodeURIComponent().
Judul terpotong atau aneh	Karakter khusus tidak ditangani dengan benar.	Gunakan URL encoding untuk parameter teks.
Tombol terlalu sempit di HP	Layout tidak memiliki aturan responsif.	Gunakan flex-wrap dan media query.
Tombol menutupi konten	Posisi atau ukuran tombol tidak sesuai layout.	Atur margin, padding, dan ukuran pada layar kecil.
Script dimuat berulang kali	JavaScript dimasukkan ke banyak tempat.	Gunakan satu script global untuk fungsi yang sama.

Tips Membuat Tombol Share Blogger yang Nyaman Digunakan

• Batasi jumlah platform. Tampilkan platform yang benar-benar relevan dengan pembaca Anda.
• Gunakan label yang jelas. Pembaca sebaiknya langsung memahami fungsi setiap tombol.
• Jaga ukuran tombol tetap proporsional. Tombol tidak perlu terlalu besar untuk terlihat.
• Perhatikan tampilan mobile. Pastikan tombol tetap mudah disentuh pada layar kecil.
• Gunakan URL encoding. Hal ini penting ketika judul atau URL memiliki karakter khusus.
• Sediakan copy link. Pembaca tetap dapat membagikan artikel melalui platform yang tidak tersedia sebagai tombol.
• Uji setiap platform. Jangan menganggap satu URL share berlaku untuk semua layanan.

Apakah Tombol Share Blogger Berpengaruh pada SEO?

Tombol berbagi bukan faktor yang secara otomatis membuat artikel mendapatkan peringkat tertentu di Google. Fungsi utamanya adalah membantu pembaca membagikan konten dengan lebih mudah.

Karena itu, jangan menambahkan tombol share hanya demi SEO. Pertimbangkan terutama dari sisi pengalaman pembaca dan kebutuhan distribusi konten.

Apakah Perlu Menggunakan Plugin Social Share?

Untuk fitur dasar seperti Facebook, WhatsApp, Telegram, X, dan copy link, Anda dapat membuat tombol sendiri menggunakan HTML, CSS, dan JavaScript.

Plugin atau library tambahan baru lebih relevan ketika Anda membutuhkan fitur yang jauh lebih kompleks. Untuk kebutuhan sederhana, struktur custom sering kali lebih mudah dikontrol dan disesuaikan dengan template Blogger.

Cara Menguji Tombol Share Sebelum Dipublikasikan

Setelah pemasangan selesai, lakukan pengujian pada artikel yang benar-benar sudah memiliki URL publik.

1. Buka artikel dari URL publik.
2. Klik tombol Facebook dan periksa URL yang dibagikan.
3. Klik WhatsApp dan periksa judul serta URL yang muncul.
4. Klik Telegram dan periksa parameter teks serta URL.
5. Klik X dan pastikan draft posting berisi informasi yang benar.
6. Uji tombol Copy Link apabila fitur tersebut dipasang.
7. Uji kembali pada smartphone.
8. Periksa apakah ada tombol yang menutupi konten atau elemen lain.

FAQ Tombol Share Blogger

1. Apa itu tombol share Blogger?

Tombol share Blogger adalah tombol yang digunakan untuk membantu pembaca membagikan URL artikel ke platform sosial atau aplikasi pesan tertentu.

2. Apakah tombol share Blogger membutuhkan plugin?

Tidak untuk fungsi dasar. Tombol dapat dibuat menggunakan HTML, CSS, dan JavaScript tanpa library social share tambahan.

3. Bagaimana cara membuat tombol Facebook Blogger?

Gunakan URL berbagi Facebook dengan parameter URL halaman, kemudian masukkan URL tersebut ke atribut href tombol. Pada tutorial ini URL dihasilkan otomatis menggunakan JavaScript.

4. Bagaimana cara membuat tombol Telegram Blogger?

Anda dapat menggunakan endpoint berbagi Telegram dengan parameter url dan text, kemudian mengisinya menggunakan URL serta judul artikel.

5. Apakah WhatsApp bisa digunakan untuk share artikel Blogger?

Bisa. URL berbagi WhatsApp dapat digunakan untuk menyiapkan teks yang berisi judul dan alamat artikel.

6. Kenapa tombol share tidak membawa URL artikel?

Kemungkinan URL belum dimasukkan ke parameter berbagi atau karakter URL tidak di-encode dengan benar. Pastikan script mengambil window.location.href dan menggunakan encodeURIComponent() saat membentuk URL share.

7. Apakah tombol share bisa dibuat responsive?

Bisa. Gunakan Flexbox, flex-wrap, dan media query agar jumlah tombol per baris dapat menyesuaikan lebar layar.

8. Apakah tombol share bisa ditambahkan ke semua artikel secara otomatis?

Bisa, apabila struktur tombol ditempatkan pada area template yang ditampilkan pada halaman posting. Namun, lokasi kode harus disesuaikan dengan struktur template Blogger yang digunakan.

9. Apakah tombol Copy Link membutuhkan JavaScript?

Untuk menyalin URL secara otomatis ke clipboard, JavaScript dibutuhkan. Clipboard API dapat digunakan pada browser yang mendukungnya dan memenuhi persyaratan keamanan yang berlaku.

Kesimpulan

Membuat tombol share Blogger secara custom tidak harus menggunakan plugin berat. Dengan HTML, CSS, dan JavaScript, Anda dapat menyediakan tombol berbagi untuk Facebook, WhatsApp, Telegram, X, serta menambahkan fitur copy link sesuai kebutuhan.

Penggunaan window.location.href membuat tombol dapat mengambil URL artikel secara otomatis, sedangkan document.title dapat digunakan untuk mengambil judul halaman. Parameter seperti URL dan teks juga perlu di-encode agar dapat dimasukkan dengan benar ke alamat berbagi.

Yang tidak kalah penting adalah menjaga tampilan tetap sederhana dan responsif. Jangan menampilkan terlalu banyak platform apabila tidak diperlukan, dan pastikan setiap tombol benar-benar berfungsi ketika diuji pada desktop maupun smartphone.

Dengan struktur dasar ini, Anda dapat mengembangkan social share Blogger sesuai desain template sendiri tanpa bergantung pada library tambahan. Fitur tersebut kemudian dapat disempurnakan dengan ikon, tooltip, animasi ringan, atau aturan tampil khusus sesuai kebutuhan blog.