Sematan Kiriman

Sematan Kiriman merupakan cara sederhana untuk memasukkan kiriman publik - oleh Halaman atau seseorang di Facebook - ke dalam konten situs web atau halaman web Anda. Hanya kiriman publik dari Halaman dan Profil Facebook yang dapat disematkan.

Generator Kode

URL kiriman
Lebar piksel kiriman (antara 350 dan 750)

Pengaturan

Pengaturan Keterangan Default

data-href

URL absolut kiriman.

n/a

data-width

Lebar bidang kiriman. Min. 350 piksel; Maks. 750 piksel. Biarkan kosong untuk menggunakan lebar fleksibel.

lebar fleksibel

data-show-text

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

false

Mendapatkan Kode Anda dari Kiriman

1. Buka Kiriman Anda

Anda dapat memperoleh kode sematan secara langsung dari kiriman itu sendiri. Jika kiriman bersifat publik, klik ikon yang muncul di sudut kanan atas kiriman di Facebook.

Pilih Embed Post dari menu pilihan:

Untuk kiriman foto pilih tombol Embed Post di kanan bawah:

2. Salin dan Tempelkan Kode

Anda akan melihat dialog yang muncul beserta kode untuk menyematkan kiriman Anda di dalamnya. Salin dan tempelkan kode ini ke halaman situs web Anda di tempat yang Anda inginkan untuk muncul.

Untuk penjelasan teknis selengkapnya, harap lihat bagian Menambahkan Kode Secara Manual

Menambahkan Kode Secara Manual

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

1. Dapatkan URL Kiriman

Terlebih dahulu Anda harus mendapatkan URL kiriman Anda yang ingin dibagikan. Kiriman harus bersifat publik, yang ditandai oleh ikon globe berwarna abu-abu, tepat di samping waktu penerbitan kiriman:

Untuk pengujian, Anda dapat menggunakan URL contoh ini:

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

2. Muat SDK JavaScript

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

<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&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Anda dapat menemukan bantuan selengkapnya tentang implementasi SDK JavaScript di Tutorial Singkat tentang SDK JavaScript.

3. Tempatkan Label Sematan Kiriman

Berikutnya, tempatkan label Sematan Kiriman di situs web Anda. Ganti {your-post-url} dengan URL kiriman Anda.

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

4. Pengujian

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

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

Hasil contoh pengujian kami ditampilkan dalam cuplikan layar di bawah.

5. Penyesuaian

Ikuti instruksi lebih lanjut di halaman ini untuk menyesuaikan pengaturan ukuran, bahasa, dan lainnya.

Mendapatkan URL kiriman

Mungkin terdapat skenario ketika kode sematan Anda dibuat dengan CMS dan Anda hanya memerlukan URL kiriman mentah. Ada dua cara untuk mendapatkan URL kiriman:

  1. Salin URL permalink dari bilah alamat browser Anda.
  2. Klik kanan waktu penerbitan kiriman dan salin alamat tautan.

Kedua metode tersebut disorot dengan warna merah dalam cuplikan layar di bawah.

Melalui API Graf

Jika Anda ingin mengintegrasikan sematan kiriman secara otomatis ke dalam situs web, Anda dapat menggunakan API Graf untuk menggabungkan kiriman. Misalnya, Anda dapat menggunakan endpoint API Kabar Berita Halaman dan parameter fieldspermalink_url.

Tanggapan atas permintaan Anda ke /{page-id}/feed?fields=permalink_url akan mengirimkan kepada Anda tanggapan seperti ini:

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

Tata Letak di Desktop

Anda dapat menyesuaikan lebar Sematan Kiriman di desktop melalui atribut data-width di label Sematkan Kiriman seperti pada contoh di bawah. Pilih nilai antara piksel 350 dan 750.

Jangan menggunakan label gaya CSS untuk menyesuaikan ukuran plugin. Penggunaan label gaya CSS 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

Pada web seluler, Sematan Kiriman secara otomatis menyesuaikan skala dengan lebar bidang.

Wordpress

Jika Anda sudah menggunakan SDK Facebook untuk JavaScript di situs Wordpress, Anda dapat menggunakan plugin Sematan Kiriman hanya dengan menambahkan label fb-post ke kiriman Wordpress Anda:

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

Jika Anda tidak menggunakan SDK Facebook untuk JavaScript dan menyematkan Kiriman melalui snippet salin&tempel, yang dapat Anda peroleh dari setiap kiriman Facebook, plugin Sematan Kiriman kemungkinan besar tidak akan merender karena Wordpress akan mengonversi semua karakter & menjadi #038; dan plugin tidak akan berfungsi.

Gunakan kode berikut untuk menambahkan plugin:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v2.11'
    });
  }; 
  (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";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
  
<div 
  class="fb-post" 
  data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" 
  data-width="500"></div>

Integrasi baru Wordpress yang mudah akan dirilis dalam waktu dekat ini.

Pertanyaan Umum

Jika Anda menggunakan versi HTML5 atau XFBML, Anda harus menyertakan kode bahasa saat Anda mencontohkan perpustakaan.

Ketika memuat SDK, ubah nilai js.src untuk menggunakan lokale 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 menampung bahasa yang berbeda. Temukan informasi selengkapnya di halaman Pelokalan & Terjemahan kami.

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.