Cara Menambahkan Tombol Facebook di Blogger: Panduan Lama dan Alternatif Modern

Facebook merupakan salah satu media sosial yang cukup populer untuk membagikan artikel blog kepada teman maupun pengikut. Pada masa awal perkembangan Blogger, menambahkan tombol Facebook biasanya dilakukan menggunakan kode HTML atau plugin Facebook secara manual.

Artikel ini merupakan pembaruan dari tutorial lama Saungjiwa Blog pada 21 Desember 2013 mengenai cara membuat tombol Facebook di Blogger. Karena tampilan Blogger dan sistem Facebook telah banyak berubah, beberapa cara lama mungkin sudah tidak bekerja seperti dahulu.

gambar tangkapan layar Tombol Like Facebook Untuk Blog Saungjiwa

1. Apa Fungsi Tombol Facebook di Blog?

Tombol Facebook dapat membantu pengunjung membagikan artikel yang sedang mereka baca ke Facebook. Dengan demikian, artikel memiliki peluang untuk mendapatkan kunjungan tambahan dari media sosial.

Selain tombol berbagi, Facebook juga menyediakan berbagai fitur lain seperti tombol Like, Page Plugin, dan elemen sosial lainnya. Namun, metode pemasangannya dapat berubah mengikuti perkembangan platform Facebook.

2. Cara Lama Menambahkan Tombol Facebook di Blogger

Pada tutorial Blogger zaman dahulu, tombol Facebook sering dipasang menggunakan kode HTML/JavaScript atau iframe yang diperoleh dari layanan Facebook.

Secara umum, langkahnya adalah sebagai berikut:

Masuk ke dashboard Blogger.
Pilih blog yang ingin diedit.
Buka menu Tata Letak.
Pilih Tambahkan Gadget pada bagian yang diinginkan.
Pilih gadget HTML/JavaScript.
Masukkan kode Facebook yang digunakan.
Klik Simpan.
Lihat blog untuk memastikan tombol tampil dengan baik.

Catatan: cara menggunakan iframe atau kode plugin Facebook yang beredar pada tutorial lama belum tentu kompatibel dengan sistem Facebook dan template Blogger saat ini.

3. Alternatif Modern: Tombol Berbagi ke Facebook

Untuk blog yang masih menggunakan Blogger sekarang, salah satu pilihan yang lebih sederhana adalah membuat tombol berbagi menggunakan URL artikel yang sedang dibaca.

Contoh tombol sederhana:

Bagikan ke Facebook

Pada contoh di atas, alamat blog dapat diganti dengan URL artikel yang ingin dibagikan.

4. Membuat Tombol Facebook Menggunakan JavaScript Blogger

Jika ingin tombol tersebut secara otomatis mengambil alamat halaman yang sedang dibuka, kita dapat menggunakan JavaScript sederhana.

Gunakan kode berikut pada gadget HTML/JavaScript atau pada bagian template yang sesuai:

<a href="https://www.facebook.com/sharer/sharer.php?u=" 
   onclick="this.href += encodeURIComponent(window.location.href);"
   target="_blank"
   rel="noopener noreferrer">
   Bagikan ke Facebook
</a>

Kode tersebut akan menggunakan URL halaman yang sedang dibuka ketika pengunjung menekan tombol.

5. Versi Tombol yang Lebih Menarik

Berikut contoh tombol dengan tampilan sederhana yang bisa digunakan di artikel Blogger:

<a href="https://www.facebook.com/sharer/sharer.php?u="
   onclick="this.href += encodeURIComponent(window.location.href);"
   target="_blank"
   rel="noopener noreferrer"
   style="display:inline-block;
          padding:10px 18px;
          background:#1877f2;
          color:#fff;
          text-decoration:none;
          border-radius:6px;
          font-weight:bold;">
   Bagikan ke Facebook
</a>

Hasilnya akan berupa tombol Bagikan ke Facebook yang dapat digunakan untuk membagikan halaman artikel (hasil pengaplikasiannya akan terlihat sepeti gambar diatas pembukaan artikel ini).

6. Apakah Cara Lama Masih Bisa Digunakan?

Sebagian kode Facebook dari tutorial lama mungkin masih ditemukan di berbagai blog, tetapi tidak semuanya masih berfungsi. Facebook telah beberapa kali mengubah sistem plugin, API, dan mekanisme berbagi.

Karena itu, jika Anda menemukan kode lama yang menghasilkan error atau tombol tidak muncul, sebaiknya jangan langsung menganggap template Blogger bermasalah. Bisa jadi kode tersebut memang sudah tidak kompatibel dengan sistem Facebook terbaru.

7. Tips Memasang Tombol Sosial di Blogger

Gunakan tombol yang sederhana dan tidak mengganggu pembaca.
Pastikan tombol dapat digunakan pada perangkat mobile.
Hindari memasang terlalu banyak widget sosial.
Periksa kembali link setelah mengganti template Blogger.
Hapus widget lama yang sudah tidak berfungsi.
Utamakan kecepatan loading halaman dan kenyamanan pengunjung.

Pembaruan artikel: Artikel ini merupakan versi revisi dari tutorial lama mengenai pemasangan tombol Facebook di Blogger. Beberapa langkah dan kode pada tutorial asli dibuat pada era Blogger dan Facebook yang berbeda sehingga tidak semuanya masih berlaku. Lihat Artikel lama saya yang disalin dari url source : http://regibrader-free.blogspot.com pada tahun 2013 dibawah ini:

Kali ini saya membutuhkan Facebook Like Button. Akhirnya ketemu juga nih Cara Membuat Tombol Like Facebook di Blog yang paling ampuh. Dari sekian banyak Blogger yang share tentang ini, kadang-kadang ada saja yang tidak berhasil. Cara inilah yang InsaAloh berhasil dan semua sobat Blogger bisa dengan mudah membuatnya.

Untuk mempromosiskan Halaman Blog saya di Facebook, Widget Like Box saya lepas, saya ingin tampilan yang menghemat ruang. Maka terfikirlah saya hanya ingin memasang tombol like-nya saja. Berbeda dengan Widget Like Box Facebook yang memiliki tampilan berbentuk box yang didalamnya memuat Nama Halaman, Foto Halaman, Tombol Like, Jumlah Likers, dan foto Likers. Untuk yang satu ini tidak diwadahi dengan box, bahkan kita bisa memilih dan membatasi apa saja yang ingin ditampilkan.

Untuk sobat yang ingin memasangnya, silakan simak cara membuatnya. Dan bagi sobat yang ingin tahu lebih detail silakan baca dan lihat dulu, siapa tau sobat membutuhkanya.

Pastinya login dahulu ke akun Facebook masing-masing.
Pertama, kita harus mempunyai halaman Blog di Facebook. Selain untuk memperoleh URL halaman Facebook, juga agar tombol like ini jelas fungsinya yaitu untuk memberikan like ke halaman Facebook. Silakan baca Cara Membuat Halaman Blog di Facebook, dan simpan URL halaman yang telah diperoleh.

Jika sobat telah mempunyai halamannya, silakan masuk ke alamat ini "http://developers.facebook.com/docs/reference/plugins/like". Scroll sedikit ke bawah untuk konfigurasi tampilan.

Masukan URL halaman Facebook yang telah diperoleh sebelumnya pada kotak "URL to Like".
Saya sarankan agar tidak menampilkan send button, karena jika dipasang kita tidak bisa mendapatkan kode script Iframe-nya. Jadi, hapus centang pada "send button".

Tentukan Layout Style, diantaranya: Standard, Button Count dan Box Count.

Standard
Button Count
Box Count

Tentukan ukuran Lebar pada opsi "Widht".
Tentukan apakah akan menampilkan foto likers atau tidak dengan mencentang opsi "show face".
Tentukan jenis teks pada opsi "Font".
Tentukan warna dasarnya apakah ingin gelap atau terang pada opsi "colour scheme".
Tentukan tombol primer yang akan digunakan apakah tombol Like atau tombol Rekomendasikan pada opsi "verb to display".

Jika telah menentukan tampilanya, sobat klik "get code".

Cara Membuat Tombol Like Facebook di Blog

Maka akan muncul jendela pop-up yang menampilkan kode html.
Pilih kode script pada opsi Iframe. Kode ini idealnya dipasang pada widget atau di dalam postingan. Silakan coba kode lainya jika ingin coba dipasang di tempat yang berbeda.
Coppy semua kodenya dan pastekan pada tempat yang sobat inginkan.

Kesimpulan

Menambahkan tombol Facebook di Blogger pada masa lalu biasanya dilakukan menggunakan kode HTML, JavaScript, iframe, atau plugin Facebook. Namun, karena teknologi Facebook dan Blogger terus berkembang, beberapa metode lama sudah tidak relevan.

Untuk blog saat ini, penggunaan tombol berbagi yang sederhana dapat menjadi alternatif yang lebih praktis. Selain lebih ringan, cara tersebut juga tidak membutuhkan widget Facebook yang kompleks.

Jika Anda sedang menghidupkan kembali blog lama, seperti Saungjiwa Blog, artikel tutorial lama tetap dapat dipertahankan sebagai bagian dari arsip. Namun, isi dan kode sebaiknya diperbarui agar tetap bermanfaat bagi pembaca masa kini.

Akhir kata saya ucapkan terimakasih telah berkunjung ke Saungjiwa Blog ini, mohon dukungan serta kriti dan saran teman teman blogger semuanya untuk kembali menghidupkan blog ini yang telah lama fakum dari dunia blogging ini. Salam🙏

Translate

Cara Menambahkan Tombol Facebook di Blogger Panduan Alternatif Modern dan Lama