Cerita Graf Terbuka di Web

Dokumen ini menjelaskan langkah penting untuk menerbitkan cerita pertama Anda dengan Graf Terbuka.

Sebelum memulai, Anda harus:

Setelah menyelesaikan panduan ini, Anda juga dapat mempelajari tentang kemungkinan langkah berikutnya.

Membuat ID Aplikasi Facebook

Anda mungkin sudah memiliki ID Aplikasi Facebook untuk proyek Anda. Anda dapat menggunakan ID Aplikasi yang sama di berbagai platform mis. iOS, Android, dan Situs Web.

Jika Anda belum memiliki ID Aplikasi Facebook untuk proyek Anda, maka Anda harus membuatnya terlebih dahulu:

Buat ID Aplikasi baru

 
Langkah ini akan menciptakan kotak sembul yang meminta Anda memasukkan dua hal:

  • Nama tampilan. Ini adalah nama aplikasi yang digunakan ketika cerita diterbitkan ke Facebook dan di sejumlah tempat lain. Gunakan Memulai Graf Terbuka atau yang serupa.
  • Namespace. Tidak diperlukan untuk panduan ini, sehingga Anda dapat mengosongkannya.
  • Kategori. Ini akan menentukan jenis aplikasi yang sedang Anda bangun. Untuk saat ini, cukup pilih Komunikasi.

Setelah membuat aplikasi, Anda akan disediakan dasbor yang menunjukkan Statistik Pengguna dan API. Dari layar ini, klik Pengaturan di samping kiri.

Lengkapi kolom berikut, seperti yang diperlihatkan di cuplikan layar di bawah:

  • Email Kontak. Alamat email pengembang Anda.
  • Domain Aplikasi. Domain tempat aplikasi Anda akan di-hosting (tanpa awalan http:// atau https://.)

Contoh ini merupakan halaman web dasar, jadi Anda harus menambahkan web sebagai sebuah platform. Klik Tambah Platform di bagian bawah halaman dan pilih Situs Web.

Masukkan path sebagai lokasi penyimpanan file Anda, yang akan diberikan kepada Anda di bawah ini.

Setelah selesai, klik Simpan Perubahan di bagian bawah.

Siapkan Aplikasi

Tempatkan file berikut di URL yang Anda tentukan pada pengaturan di atas.

Di file, Anda harus mengubah satu item, yaitu ID Aplikasi. Cari 'fbAppId' di file dan ganti nilainya dengan ID Aplikasi yang tercantum di bagian atas halaman Pengaturan di Dasbor Aplikasi.

<html>
<head>
<title>Open Graph Getting Started App - og.likes</title>
<style type="text/css">
div { padding: 10px; }
</style>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
  // You probably don't want to use globals, but this is just example code
  var fbAppId = 'replace me';
  var objectToLike = 'http://techcrunch.com/2013/02/06/facebook-launches-developers-live-video-channel-to-keep-its-developer-ecosystem-up-to-date/';

  // This check is just here to make sure you set your app ID. You don't
  // need to use it in production. 
  if (fbAppId === 'replace me') {
    alert('Please set the fbAppId in the sample.');
  }

  /*
   * This is boilerplate code that is used to initialize
   * the Facebook JS SDK.  You would normally set your
   * App ID in this code.
   */

  // Additional JS functions here
  window.fbAsyncInit = function() {
    FB.init({
      appId      : fbAppId, // App ID
      status     : true,    // check login status
      cookie     : true,    // enable cookies to allow the
                            // server to access the session
      xfbml      : true,     // parse page for xfbml or html5
                            // social plugins like login button below
      version     : 'v2.7',  // Specify an API version
    });

    // Put additional init code here
  };

  // Load the SDK Asynchronously
  (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'));

  /*
   * This function makes a call to the og.likes API.  The
   * object argument is the object you like.  Other types
   * of APIs may take other arguments. (i.e. the book.reads
   * API takes a book= argument.)
   *
   * Because it's a sample, it also sets the privacy
   * parameter so that it will create a story that only you
   * can see.  Remove the privacy parameter and the story
   * will be visible to whatever the default privacy was when
   * you added the app.
   *
   * Also note that you can view any story with the id, as
   * demonstrated with the code below.
   *
   * APIs used in postLike():
   * Call the Graph API from JS:
   *   https://developers.facebook.com/docs/reference/javascript/FB.api
   * The Open Graph og.likes API:
   *   https://developers.facebook.com/docs/reference/opengraph/action-type/og.likes
   * Privacy argument:
   *   https://developers.facebook.com/docs/reference/api/privacy-parameter
   */

  function postLike() {
    FB.api(
       'https://graph.facebook.com/me/og.likes',
       'post',
       { object: objectToLike,
         privacy: {'value': 'SELF'} },
       function(response) {
         if (!response) {
           alert('Error occurred.');
         } else if (response.error) {
           document.getElementById('result').innerHTML =
             'Error: ' + response.error.message;
         } else {
           document.getElementById('result').innerHTML =
             '<a href=\"https://www.facebook.com/me/activity/' +
             response.id + '\">' +
             'Story created.  ID is ' +
             response.id + '</a>';
         }
       }
    );
  }
</script>

<!--
  Login Button

  https://developers.facebook.com/docs/reference/plugins/login

  This example needs the 'publish_actions' permission in
  order to publish an action.  The scope parameter below
  is what prompts the user for that permission.
-->

<div
  class="fb-login-button"
  data-show-faces="true"
  data-width="200"
  data-max-rows="1"
  data-scope="publish_actions">
</div>

<div>
This example creates a story on Facebook using the
<a href="https://developers.facebook.com/docs/reference/ogaction/og.likes">
<code>og.likes</code></a> API.  That story will just say
that you like an
<a href="http://techcrunch.com/2013/02/06/facebook-launches-developers-live-video-channel-to-keep-its-developer-ecosystem-up-to-date/">
article on TechCrunch</a>.  The story should only
be visible to you.
</div>

<div>
<input
  type="button"
  value="Create a story with an og.likes action"
  onclick="postLike();">
</div>

<div id="result"></div>

</body>
</html>

Terbitkan Cerita

Jika Anda memuat aplikasi, Anda akan melihat hal berikut ini:

Masuk, otorisasikan aplikasi untuk mengirimkan ke linimasa Anda dan klik tombol "Buat cerita...". Anda akan melihat sesuatu seperti ini:

Anda akan melihat bahwa hasilnya tercantum di bawah tombol. Jika mengekliknya, Anda akan dibawa ke aktivitas yang sudah dibuat di Facebook. Ini akan terlihat seperti ini:

Anda akan melihat beberapa hal tentang aktivitas di Facebook:

Privasi

Batas tepi bergaris putus-putus berwarna biru muda di luarnya menunjukkan bahwa kiriman hanya dapat dilihat oleh Anda. Kiriman yang dapat dilihat teman atau publik tidak akan memiliki batas tepi, walaupun akan memiliki ikon untuk mengganti pengunci guna menunjukkan seberapa luas kiriman dibagikan. Anda dapat menetapkan privasi kiriman dengan parameter privasi, yang disertakan dengan kode demo. Pengembang biasanya tidak memasukkan parameter privasi, alih-alih mengizinkan privasi default aplikasi untuk mendikte seberapa luas sesuatu dibagikan.

Tindakan dan Objek

Bagian utama dari cerita merupakan hal yang sangat penting. Dikatakan "[subject] menyukai artikel di [aplikasi]". 'Suka' didorong oleh API yang Anda gunakan. og.likes membuat cerita suka. Jika Anda sudah menggunakan API book.reads, alih-alih cerita, kemungkinan akan menyatakan sesuatu seperti "..sedang membaca..." atau "...membaca... ." API suka, yang kami sebut Tindakan, kira-kira sama dengan kata kerja.

Bagian "artikel" dari cerita juga sangat penting. Halaman yang dimaksud memiliki label yang menjelaskan definisi dan bagaimana ditampilkan di Facebook. Jika melihat sumber untuk halaman tersebut Anda akan melihat bahwa ini akan berisi tag yang memberi tahu jenis konten kepada Facebook:

<meta property="og:type" content="article" />

Ini adalah bagaimana Facebook mengetahui bahwa ini adalah artikel, dan bukan buku, misalnya.

<meta property="og:type" content="book" />

Tag ini adalah yang kami gunakan untuk menjelaskan Objek. Objek kira-kira sama dengan kata benda. Objek sangat terkait erat dengan Tindakan yang Anda gunakan. Misalnya, books.reads dapat mengambil argumen book. fitness.runs memerlukan objek course. og.likes bersifat spesial karena dapat menerima objek apa saja.

Ajukan Tindakan Anda untuk Ditinjau

Jika aplikasi Anda akan membuat cerita, maka tindakan Anda memerlukan tinjauan. Klik Tinjauan Aplikasi di sisi kiri Dasbor Aplikasi dan Anda akan melihat sesuatu seperti ini:

Klik Mulai Pengajuan dan Anda akan melihat layar seperti ini:

Di Langkah 3, kami membahas bagaimana cerita terdiri dari tindakan dan objek. Dalam kasus ini, cerita Anda menggunakan tindakan like, dan tindakan itu yang memerlukan persetujuan. (Akan tersedia persetujuan Pusat Aplikasi jika Anda ingin mengajukan aplikasi Anda ke pusat aplikasi Facebook. Pusat Aplikasi adalah tempat orang menemukan aplikasi yang menarik, dan merupakan sesuatu yang harus dipertimbangkan untuk mendorong distribusi aplikasi ketika Anda siap.)

Untuk menyelesaikan proses pengajuan, Anda harus menyediakan logo aplikasi (gambar 75x75 piksel) dan ikon aplikasi (gambar 16x16 piksel), petunjuk cara mengujinya dengan cuplikan layar dan membuat pengguna uji secara otomatis. Proses pengajuan tidak akan menghalangi kemampuan Anda untuk menguji perubahan, karena Anda dan orang lain yang Anda tambahkan sebagai pengembang dapat selalu mengirim dan menguji cerita Anda sendiri.

Jika Anda ingin mempelajari selengkapnya tentang proses pengajuan, baca dokumen Memahami Proses Pengajuan Graf Terbuka kami. Dokumen ini memberikan pedoman menyeluruh tentang apa yang dicari oleh Facebook ketika menyetujui cerita yang dapat dibuat oleh aplikasi. Sebagai contoh yang lebih sederhana, berikan pedoman khusus tentang cara menggunakan tindakan like di aplikasi Anda. Kami biasanya menyelesaikan tinjauan dalam tiga hari kerja.

Tindakan tidak muncul di daftar persetujuan hingga Anda pernah menggunakannya dari aplikasi Anda. Jadi, setelah Anda siap menambahkan milik Anda sendiri, Anda harus membuat setidaknya satu tindakan dari aplikasi Anda sebelum dapat mengajukannya untuk disetujui.