Tombol Suka untuk Web

Satu klik pada tombol Suka akan 'menyukai' beberapa bagian konten di web dan membagikannya di Facebook. Anda juga dapat menampilkan tombol Bagikan di samping tombol Suka untuk memungkinkan orang menambahkan pesan pribadi dan menyesuaikan dengan siapa mereka akan membagikan.

Konfigurator Tombol SukaContoh KodePengaturanMenyesuaikan BahasaPertanyaan Umum

Langkah demi Langkah

1. Pilih URL atau Halaman

Pilih URL dari situs web atau Halaman Facebook yang ingin Anda gunakan dengan tombol suka.

2. Konfigurator Kode

Tempelkan URL ke konfigurator kode dan sesuaikan pengaturan seperti width tombol suka Anda. Klik tombol Get Code untuk membuat kode tombol suka Anda.

3. Salin & Tempelkan snippet HTML

Salin dan tempelkan snippet ke dalam HTML situs web tujuan.

Konfigurator Tombol Suka

URL untuk Menyukai
Width
Tata letak
Jenis Tindakan
Ukuran Tombol

Contoh Kode Lengkap

Salin & tempelkan contoh kode ke situs web Anda. Sesuaikan nilai data-href dengan URL situs web Anda. Selanjutnya gunakan tag meta og:*** untuk menyesuaikan contoh tautan Anda. og:url dan data-href harus menggunakan URL yang sama.

<html>
<head>
  <title>Your Website Title</title>
    <!-- You can use open graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url"           content="https://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="https://www.your-domain.com/path/image.jpg" />
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your like button code -->
  <div class="fb-like" 
    data-href="https://www.your-domain.com/your-page.html" 
    data-layout="standard" 
    data-action="like" 
    data-show-faces="true">
  </div>

</body>
</html>
Menyesuaikan Contoh Tautan

Pengaturan

Selain pengaturan di atas, Anda juga dapat mengubah berikut ini:

Pengaturan Atribut HTML5 Keterangan Default

action

data-action

Kata kerja yang akan ditampilkan di tombol tersebut. Dapat berupa like atau recommend

like

colorscheme

data-colorscheme

Skema warna yang digunakan plugin untuk setiap teks di luar tombol itu sendiri. Dapat berupa light atau dark.

light

href

data-href

URL absolut halaman yang akan disukai.

URL saat ini.

kid_directed_site

data-kid-directed-site

Jika situs web atau layanan online, atau bagian layanan Anda ditujukan untuk anak di bawah 13 tahun Anda harus mengaktifkan ini

false

layout

data-layout

Pilih salah satu dari beragam tata letak yang tersedia untuk plugin. Dapat berupa standard, button_count, button, atau box_count. Lihat Pertanyaan Umum untuk detail selengkapnya.

standard

ref

data-ref

Label untuk melacak referal harus kurang dari 50 karakter dan dapat berisi karakter alfanumerik dan beberapa tanda baca (saat ini +/=-.:_). Lihat Pertanyaan Umum untuk detail selengkapnya.

Tidak Ada

share

data-share

Tentukan apakah ingin menyertakan tombol bagikan di samping tombol Suka. Ini hanya berfungsi dengan versi XFBML.

false

show_faces

data-show-faces

Menentukan apakah akan menampilkan foto profil di bawah tombol (hanya tata letak standar) atau tidak. Anda harus mengaktifkan ini di situs yang ditujukan untuk anak-anak.

false

size

data-size

Tombol ditawarkan dalam 2 ukuran, yaitu large dan small.

small

width

data-width

Lebar plugin (hanya tata letak standar), sesuai dengan lebar minimal dan default. Harap lihat Pengaturan Tata Letak di bawah untuk perincian selengkapnya.

Lihat standard di Pengaturan Tata Letak

Pengaturan Tata Letak

Terdapat opsi berikut:

Tata Letak Ukuran Default

standard

Lebar minimal: 225 piksel.
Lebar default: 450 piksel.
Tinggi: 35 piksel (tanpa foto) atau 80 piksel (dengan foto).

box_count

Lebar minimal: 55 piksel.
Lebar default: 55 piksel.
Tinggi: 65 piksel.

button_count

Lebar minimal: 90 piksel.
Lebar default: 90 piksel.
Tinggi: 20 piksel.

button

Lebar minimal: 47 piksel.
Lebar default: 47 piksel.
Tinggi: 20 piksel.

Mengubah Bahasa

Anda dapat mengubah bahasa Tombol Suka dengan memuat SDK JavaScript Facebook dengan versi yang sudah dilokalkan. Ketika memuat SDK, ubah nilai js.src untuk menggunakan lokale Anda. Ganti en_US dengan lokale Anda, mis. fr_FR untuk bahasa Prancis (Prancis):

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.11"; 

Anda mungkin harus menyesuaikan lebar Plugin Sosial untuk menampung bahasa yang berbeda. Anda dapat menemukan informasi selengkapnya di halaman Pelokalan & Terjemahan kami.