Memasang Tombol Twitter, Facebook Share, dan Facebook Like di Blog

Oleh -

Pembaharuan artikel Memasang Tombol Sosial Media agar lebih modern, rapi, dan sesuai praktik terbaru pemasangan tombol Twitter, Facebook Share, dan Facebook Like di blog, tanpa lagi bergantung pada layanan lama seperti LinksAlpha yang sudah jarang digunakan.

Saya juga akan menambahkan kode siap pakai untuk Blogger dan tips agar tampilannya lebih rapi.

Memasang Tombol Twitter, Facebook Share, dan Facebook Like di Blog

Media sosial seperti Facebook dan Twitter/X saat ini menjadi salah satu sumber trafik terbesar untuk blog atau website. Dengan menyediakan tombol share di blog, pengunjung dapat dengan mudah membagikan artikel ke media sosial mereka, sehingga peluang mendapatkan pengunjung baru semakin besar.

Jika sebelumnya pemasangan tombol ini sering dilakukan terpisah atau menggunakan layanan pihak ketiga seperti LinksAlpha, kini kita bisa membuat tombol Twitter Share, Facebook Share, dan Facebook Like langsung menggunakan kode resmi dari masing-masing platform.


Keuntungan Memasang Tombol Share

  • Memudahkan pembaca membagikan artikel.

  • Meningkatkan jangkauan konten.

  • Tampilan blog terlihat lebih interaktif.

  • Tidak perlu instal plugin tambahan (lebih ringan untuk loading blog).

Langkah-Langkah Pemasangan di Blogger

Berikut panduan lengkap untuk memasang tombol Twitter, Facebook Share, dan Facebook Like sekaligus.

1. Login ke Blogger

  1. Buka Blogger.com dan login.

  2. Pilih blog yang ingin diberi tombol share.

  3. Masuk ke menu Tata Letak atau Tema → Edit HTML.

2. Kode Gabungan Tombol

Tempelkan kode berikut di bawah </data:post.body> jika ingin tombol muncul di setiap artikel, atau pasang di Gadget HTML/JavaScript jika ingin di sidebar.

<!-- Tombol Share Gabungan -->

<div id="fb-root"></div>

<script async defer crossorigin="anonymous"

 src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v17.0"

 nonce="FB123"></script>


<style>

.share-buttons {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  align-items: center;

  margin-top: 15px;

}

</style>


<div class="share-buttons">

  <!-- Tombol Twitter -->

  <a href="https://twitter.com/share?url=<data:post.url/>&text=<data:post.title/>"

     class="twitter-share-button"

     data-show-count="false">

    Tweet

  </a>

  

  <!-- Tombol Facebook Share -->

  <div class="fb-share-button"

       data-href="<data:post.url/>"

       data-layout="button_count">

  </div>


  <!-- Tombol Facebook Like -->

  <div class="fb-like"

       data-href="<data:post.url/>"

       data-layout="button_count"

       data-action="like"

       data-size="small"

       data-share="false">

  </div>

</div>


<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<!-- Selesai Tombol Share Gabungan -->

3. Keterangan Kode

  • <data:post.url/> → otomatis menampilkan URL artikel yang sedang dibuka.

  • <data:post.title/> → otomatis menampilkan judul artikel untuk Twitter.

  • Facebook SDK wajib dimasukkan agar tombol Like dan Share bekerja.

  • CSS .share-buttons digunakan untuk merapikan tata letak tombol.

4. Alternatif untuk WordPress (Self-Hosted)

Jika menggunakan WordPress.org:

  1. Masuk ke Appearance → Theme Editor.

  2. Buka file single.php.

  3. Tempelkan kode tombol di bawah the_content() atau sesuai lokasi yang diinginkan.

  4. Simpan perubahan.

5. Alternatif untuk Sidebar atau Halaman Statis

Jika ingin tombol di sidebar atau halaman tertentu:

  1. Masuk ke menu Tata Letak → Tambah Gadget → HTML/JavaScript.

  2. Tempelkan kode tombol gabungan.

  3. Simpan dan atur posisinya.

Tips Agar Efektif

  • Gunakan ikon share melayang di sisi kiri/kanan layar untuk meningkatkan interaksi.

  • Pastikan kecepatan blog tetap optimal meskipun ada tombol sosial.

  • Uji coba tombol di artikel untuk memastikan semua fungsi berjalan.

Kode Tombol Share Melayang Blogger

Letakkan kode ini di Tema → Edit HTML sebelum tag </body> agar tidak mengganggu loading halaman.

<!-- Tombol Share Melayang -->

<div id="fb-root"></div>

<script async defer crossorigin="anonymous"

 src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v17.0"

 nonce="FB123"></script>


<style>

.share-floating {

  position: fixed;

  top: 40%;

  left: 10px;

  display: flex;

  flex-direction: column;

  gap: 10px;

  z-index: 9999;

}

.share-floating a,

.share-floating .fb-share-button,

.share-floating .fb-like {

  background: white;

  border-radius: 6px;

  padding: 4px;

  box-shadow: 0 2px 6px rgba(0,0,0,0.2);

}

@media (max-width: 768px) {

  .share-floating {

    left: auto;

    right: 10px;

    top: auto;

    bottom: 20px;

    flex-direction: row;

  }

}

</style>


<div class="share-floating">

  <!-- Tombol Twitter -->

  <a href="https://twitter.com/share?url=<data:post.url/>&text=<data:post.title/>"

     class="twitter-share-button"

     data-show-count="false">

    Tweet

  </a>


  <!-- Tombol Facebook Share -->

  <div class="fb-share-button"

       data-href="<data:post.url/>"

       data-layout="button">

  </div>


  <!-- Tombol Facebook Like -->

  <div class="fb-like"

       data-href="<data:post.url/>"

       data-layout="button"

       data-action="like"

       data-size="small"

       data-share="false">

  </div>

</div>


<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<!-- Selesai Tombol Share Melayang -->

Cara Kerja & Keunggulan

  • Posisi Melayang: Selalu terlihat di sisi kiri (atau bawah di HP).

  • Responsif: Berubah posisi ke bawah layar di perangkat mobile agar tidak menutupi konten.

  • Ringan: Hanya memanggil script resmi dari Twitter & Facebook.

  • Otomatis: Mengambil URL dan judul artikel langsung dari Blogger (<data:post.url/> & <data:post.title/>).

Cara Pasang Tombol link share linkedin

1. Kode Tombol Share LinkedIn

Gunakan kode resmi dari LinkedIn agar aman dan ringan:

<!-- Tombol Share LinkedIn -->

<script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>

<script type="IN/Share" data-url="<data:post.url/>" data-counter="right"></script>

Keterangan:

  • data-url="<data:post.url/>" → otomatis mengambil URL artikel di Blogger.

  • data-counter="right" → menampilkan counter di sisi kanan (bisa diubah menjadi "top" atau dihapus jika tidak ingin counter).

2. Cara Memasang di Blogger

A. Di Bawah Artikel

  1. Masuk ke Tema → Edit HTML.

  2. Cari kode </data:post.body>

  3. Tempelkan kode tombol LinkedIn di atasnya.

  4. Simpan.

B. Di Sidebar atau Halaman Statis

  1. Masuk ke Tata Letak → Tambah Gadget → HTML/JavaScript.

  2. Tempelkan kode tombol LinkedIn.

  3. Simpan dan atur posisinya.

3. Versi Melayang Bersama Tombol Lain

Kalau ingin digabung dengan tombol Twitter, Facebook Share, Facebook Like seperti yang tadi kita buat, cukup tambahkan bagian ini ke dalam <div class="share-buttons"> atau .share-floating:

<!-- Tombol LinkedIn -->

<script type="IN/Share" data-url="<data:post.url/>" data-counter="right"></script>


Kesimpulan

Memasang tombol Twitter, Facebook Share, dan Facebook Like di blog adalah langkah sederhana namun efektif untuk meningkatkan interaksi dan jangkauan konten.
Ada dua opsi pemasangan:

  • Versi statis di bawah artikel atau di sidebar, cocok untuk tampilan rapi tanpa mengganggu pembaca.

  • Versi melayang di sisi layar, selalu terlihat saat pengunjung scroll, sehingga peluang klik dan share bisa meningkat hingga beberapa kali lipat.

Dengan kode resmi dari Twitter dan Facebook, tombol akan lebih cepat dimuat, aman, dan otomatis menyesuaikan URL artikel di Blogger tanpa layanan pihak ketiga.
Menggunakan desain yang responsif memastikan tombol terlihat optimal di desktop maupun perangkat mobile.

Hastag:

#memasang tombol share blogspot #cara pasang tombol twitter #facebook share blogger #tombol like facebook di blog #tombol share melayang blogger #cara pasang tombol share media sosial #facebook like widget blogger #tombol share twitter di artikel

Related Posts

Lokasi: Indonesia

Postingan populer dari blog ini

Membuat Formulir Pendaftaran, Google Doc, Cara Memendekan URL yang Panjang

Oleh -
Gambar
MEMBUAT FORMULIR PENDAFTARAN ONLINE DGN MEMANFAATKAN GOOGLE DOCS DAN TINY URL Google Docs? Apa itu Google Docs? Bagi yang belum tau, Google Docs merupakan sebuah perangkat lunak yang digunakan untuk keperluan perkantoran, seperti mengolah kata (seperti microsoft word), pengolah data spreadsheet (seperti microsoft excel), mengolah persentasi (seperti microsoft power point) dan pengolah dataset (seperti microsoft access). Namun yang berbeda adalah, Google Docs berjalan diatas website! Yup tanpa harus menginstallnya kita bisa menjalankan Google Docs. Yang penting anda punya account google dengan membuat email terlebih dahulu. Tiny URL? Tiny URL merupakan website yang menyediakan solusi sebagai pemendek url website. Misal saja jika kita memiliki URL website yang panjang sekali, kita dapat memendekkannya mengugnakan Tiny URL, misal URL : http://panjangsekali.panjangjuga.com/menghapus-jejak/dan-sekarang-aku-taksanggup/hello-ini-url-yang-sangat-panjang.php dapat diubah oleh Tiny URL...
Read more »

Tutorial Membuat Label dan Kategori di Blogger

Oleh -
Gambar
Blogger adalah salah satu platform blogging yang masih populer digunakan hingga saat ini. Dengan kemudahan penggunaan serta integrasi dengan akun Google, banyak orang memilih Blogger untuk menulis dan membagikan konten mereka. Salah satu fitur penting di Blogger adalah label dan kategori . Label berfungsi sebagai penanda atau pengelompokan postingan, sementara kategori adalah bentuk turunan dari label yang memudahkan pembaca untuk menavigasi isi blog sesuai topik tertentu. Artikel ini akan membahas secara lengkap tutorial membuat label dan kategori di Blogger mulai dari pengertian, fungsi, manfaat, hingga langkah-langkah teknis dalam penerapannya. Apa Itu Label dan Kategori di Blogger? Sebelum masuk ke tutorial, penting untuk memahami konsep label dan kategori dalam Blogger. Label Label merupakan fitur bawaan Blogger yang berfungsi untuk mengelompokkan postingan berdasarkan topik tertentu. Misalnya, jika Anda memiliki blog kuliner, Anda bisa membuat label seperti Resep Masakan ,...
Read more »

Panduan Membuat Blog Secara Gratis

Oleh -
Gambar
Panduan Membuat Blog Secara Gratis . Kata-kata Web sebenarnya penyederhanaan dari sebuah istilah dalam dunia komputer yaitu WORLD WIDE WEB yang merupakan bagian dari tekhnologi Internet. World wide Web atau disingkat dengan nama www, merupakan sebuah sistem jaringan berbasis Client-Server yang mempergunakan protokol HTTP (Hyperteks Transfer Protocol) dan TCP/IP (Transmisson Control Protocol / Internet Protocol) sebagai medianya.  Karena kedua sistem ini sedemikian erat hubungan nya, maka untuk saat ini sulit untuk membedakan antara HTTP dengan WWW, mungkin Anda punya pengertian yang lebih spesifik mengenai kedua istilah tersebut..?, Bila demikian berbagilah dengan yang lain melalui SSC Forum. Pada awalnya Internet atau WEB hanya dipergunakan untuk kepentingan Militer yaitu suatu tekhnologi yang dipergunakan untuk mengirimkan pesan rahasia melalui satelit. Akan tetapi lama kelamaan tekhnologi tersebut akhirnya meluas, dan bahkan Perkembangan Internet pada saat ini sudah ...
Read more »