Plugin Sosial

Postingan Tersemat

Kiriman Sematan merupakan cara mudah untuk menempatkan postingan publik - berdasarkan halaman atau seseorang di Facebook - ke konten situs web atau halaman web Anda. Hanya postingan publik dari Halaman dan profil Facebook yang dapat disematkan.

Generator Kode

URL postingan
Lebar pixel postingan (antara 350 dan 750)
Dapatkan Kode

Pengaturan

Pengaturan Deskripsi Default

data-href

URL absolut postingan.

n/a

data-lazy

true berarti menggunakan mekanisme pemuatan lazy-loading untuk browser dengan mengatur atribut iframe loading="lazy". Efeknya adalah browser tidak me-render plugin jika tidak dekat dengan viewport dan mungkin tidak pernah terlihat. Dapat berupa salah satu dari true atau false (default).

false

data-width

Lebar postingan. Pixel 350 min. Pixel 750 maks. Biarkan kosong untuk menggunakan lebar fluida.

lebar fluida

data-show-text

Diterapkan ke postingan foto. Atur ke true untuk menyertakan teks dari postingan Facebook, jika ada.

false

Mendapatkan Kode Anda dari Postingan

1. Navigasi ke Postingan Anda

Anda bisa mendapatkan kode sematan langsung dari postingan itu sendiri. Jika postingannya untuk publik, klik ikon yang muncul di pojok kanan atas postingan di Facebook.

Pilih Embed Post dari menu pilihan:

Untuk postingan foto, pilih tombol Embed Post di kanan bawah:

2. Salin dan Tempelkan Kode

Anda akan melihat dialog muncul dengan kode untuk menyematkan postingan Anda di dalamnya. Salin dan tempel kode ini ke halaman web Anda di tempat yang Anda inginkan.

Untuk detail teknis, baca bagian Menambahkan Kode Secara Manual

Menambahkan Kode Secara Manual

Selain Generator Kode, Anda juga dapat menyematkan kode secara manual.

1. Dapatkan Postingan URL

Pertama-tama, Anda perlu mendapatkan URL postingan yang ingin Anda bagikan. Postingan harus untuk publik, yang ditunjukkan dengan ikon globe abu-abu, tepat di sebelah waktu publikasi postingan:

Untuk pengujian, Anda bisa menggunakan contoh URL ini:

"https://www.facebook.com/20531316728/posts/10154009990506729/"

2. Muat JavaScript SDK

Untuk menggunakan Plugin Kiriman Sematan, atau Plugin Sosial lainnya, Anda perlu menambahkan Facebook JavaScript SDK ke situs web Anda. Anda perlu memuat SDK hanya sekali pada halaman, idealnya tepat setelah tanda <body> pembukaan:

<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

Bantuan implementasi JavaScript SDK selengkapnya ada di JavaScript SDK - Mulai Cepat.

3. Tempatkan Tanda Kiriman Sematan

Selanjutnya tempatkan tanda Kiriman Sematan di mana saja di situs web Anda. Ganti {your-post-url} dengan URL postingan Anda.

<div class="fb-post" data-href="{your-post-url}"></div>

4. Pengujian

Setelah Anda menyelesaikan langkah-langkah ini, Anda dapat menguji Kiriman Sematan Anda. Integrasi yang lengkap akan terlihat seperti ini:

<html>
  <title>My Website</title>
<body>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>  
  <div class="fb-post" 
      data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
      data-width="500"></div>
</body>
</html>

Hasil dari contoh pengujian kami ditunjukkan pada gambar di bawah.

5. Menyesuaikan

Ikuti petunjuk di bagian bawah halaman ini untuk menyesuaikan ukuran, bahasa, dan pengaturan lainnya.

Mendapatkan URL postingan

Mungkin ada skenario di mana kode sematan Anda dibuat oleh CMS dan Anda hanya perlu URL postingan mentah. Ada dua cara untuk mendapatkan URL postingan:

  1. Salin URL tautan permanen dari bilah alamat browser.
  2. Klik kanan waktu penerbitan postingan dan salin alamat tautan.

Kedua metode disorot dengan warna merah pada cuplikan layar di bawah.

Melalui Graph API

Jika Anda ingin secara otomatis mengintegrasikan kiriman sematan ke situs web Anda, Anda mungkin menggunakan Graph API untuk menggabungkan postingan. Contoh: Anda dapat menggunakan endpoint API Beranda Halaman dan parameter fieldspermalink_url.

Permintaan Anda atas /{page-id}/feed?fields=permalink_url akan mendapat tanggapan seperti ini:

{
  "data": [
    {
      "id": "1234567890_3456789012", 
      "permalink_url": "https://www.facebook.com/1234567890/posts/3456789012"
    }
  ]
}

Tata Letak di Desktop

Anda dapat menyesuaikan lebar Kiriman Sematan di desktop melalui atribut data-width di tanda Kiriman Sematan seperti yang ditunjukkan dalam contoh di bawah. Pilih nilai antara 350 dan 750 piksel.

Jangan menggunakan label gaya CSS untuk menyesuaikan ukuran plugin. Ini dapat mengakibatkan kesalahan tampilan.

<!-- WRONG! -->
<style type="text/css">
.fb-post {
  width: 500px;
}
</style>
<div 
  class="fb-post"
  data-href="{your-post-url}">
</div>

<!-- CORRECT -->
<div 
  class="fb-post" 
  data-width="500"
  data-href="{your-post-url}">
</div>

Tata Letak di Web Seluler

Di web seluler, Kiriman Sematan secara otomatis menyesuaikan dengan lebar kontainer.

WordPress

Jika sudah menggunakan Facebook SDK for JavaScript di situs WordPress Anda, Anda dapat menggunakan plugin Kiriman Sematan hanya dengan menambahkan tanda fb-post ke postingan WordPress Anda:

<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>

Jika Anda tidak menggunakan Facebook SDK for JavaScript dan menyematkan Postingan melalui snippet copy&paste, yang dapat Anda peroleh dari setiap postingan Facebook, plugin Kiriman Sematan kemungkinan besar tidak akan ditampilkan karena WordPress akan mengonversi semua karakter & menjadi #038; dan merusak plugin.

Sebagai gantinya, gunakan kode berikut untuk menambahkan plugin:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v19.0'
    });
  }; 
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
  
<div 
  class="fb-post" 
  data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" 
  data-width="500"></div>

Integrasi WordPress baru yang mudah akan dirilis dalam waktu dekat.

Pertanyaan Umum

Jika Anda menggunakan versi HTML5 atau XFBML, Anda harus menyertakan kode bahasa saat meninstasiasikan library terkait.

Ketika memuat SDK, ubah nilai js.src untuk menggunakan bahasa Anda. Ganti en_US dengan lokale Anda, mis. fr_FR untuk bahasa Prancis (Prancis):

// Example 1:
'https://connect.facebook.net/fr_FR/sdk.js';

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

Lokale yang didukung tercantum di file XML Lokale Facebook.

Anda mungkin harus menyesuaikan lebar Plugin Sosial untuk mengakomodasi berbagai bahasa. Temukan informasi selengkapnya di halaman Pelokalan & Terjemahan kami.

Tautan Permanen

Sematan kiriman akan menampilkan semua media yang dilampirkan ke dalamnya, serta jumlah suka, berbagi, dan komentar yang dimiliki kiriman. Sematan kiriman akan memungkinkan orang yang menggunakan situs web Anda melihat informasi yang sama lengkapnya seperti yang ditampilkan di Facebook.com, dan mereka akan menjadikan orang dapat mengikuti atau menyukai konten penulis atau Halaman secara langsung dari sematan tersebut.

Tautan Permanen

Pesan berikut akan ditampilkan di tempat sematan kiriman:

Tautan Permanen