웹의 오픈 그래프 소식

이 문서에서는 오픈 그래프로 첫 번째 소식을 게시하는 주요 단계를 설명합니다.

시작하기 전에 다음을 수행해야 합니다.

이 가이드를 완료하고 나면 가능한 다음 단계에 대해서도 알아볼 수 있습니다.

Facebook 앱 ID 만들기

프로젝트에 사용할 Facebook 앱 ID가 이미 있을 수도 있습니다. iOS, Android 및 웹사이트와 같은 여러 플랫폼에서 동일한 앱 ID를 사용할 수 있습니다.

프로젝트에 사용할 Facebook 앱 ID가 아직 없으면 다음과 같이 먼저 하나를 만들어야 합니다.

새 앱 ID 만들기

 
다음 두 사항을 입력하도록 프롬프트하는 팝업 상자를 만듭니다.

  • 표시 이름. 소식을 Facebook 및 여러 다른 위치에 게시할 때 사용한 앱 이름입니다. 오픈 그래프 시작하기 또는 이와 유사한 것을 사용합니다.
  • 네임스페이스. 이 가이드에는 필요하지 않으므로 공백으로 둡니다.
  • 카테고리. 빌드 중인 앱의 유형을 확인할 수 있습니다. 현재로서는 커뮤니케이션만 선택합니다.

앱을 만들면 사용자와 API 통계를 표시하는 대시보드가 제공됩니다. 이 화면의 왼쪽에서 설정을 클릭합니다.

아래 스크린샷에 표시된 대로 다음 필드를 완료합니다.

  • 담당자 이메일. 개발자 이메일 주소.
  • 앱 도메인. 앱이 호스트되는 도메인(http:// 또는 https:// 접두사는 제외).

이 예는 기본 웹 페이지이므로 웹을 플랫폼으로 추가해야 합니다. 페이지 맨 아래에서 플랫폼 추가를 클릭하고 웹사이트를 선택합니다.

파일을 저장할 경로를 입력합니다. 이 파일은 아래에서 사용자에게 제공됩니다.

완료되면 맨 아래에서 변경 내용 저장을 클릭합니다.

앱 설정

위의 설정에서 지정한 URI에 다음 파일을 둡니다.

파일에서 한 항목, 즉 앱 ID를 변경해야 합니다. 파일에서 'fbAppId'를 검색하고 해당 값을 앱 대시보드의 설정 페이지 맨 위에 리스트가 표시되는 앱 ID로 바꿉니다.

<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 = "//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>

소식 게시

앱을 읽어들이는 경우 다음이 표시되어야 합니다.

로그인하고, 타임라인에 게시하도록 앱에 권한을 부여한 다음 "소식 만들기..." 버튼을 클릭합니다. 다음과 같은 내용이 표시되어야 합니다.

결과는 버튼 아래에 나열됩니다. 클릭하면 Facebook에서 만든 활동으로 이동합니다. 다음과 같이 표시되어야 합니다.

Facebook의 활동에 대한 다음 몇 가지 사항을 알아야 합니다.

공개 범위

외부의 밝은 파란색 파선 테두리는 게시물이 사용자에게만 표시됨을 나타냅니다. 친구에게 표시되거나 공개인 게시물은 테두리가 없습니다. 단, 게시물이 얼마나 광범위하게 공유될지를 표시하는 잠금으로 대체될 아이콘이 있습니다. 데모 코드에 포함된 공개 범위 매개변수를 사용하여 게시물의 공개 범위를 설정할 수 있습니다. 일반적으로 개발자는 공개 범위 매개변수를 포함하지 않으며, 대신 앱의 기본 공개 범위를 통해 항목이 얼마나 광범위하게 공유될지를 표시할 수 있게 허용합니다.

액션과 개체

소식의 중간 부분은 매우 중요합니다. 여기에는 "[subject]님이 [app]의 기사를 좋아했습니다."라고 표시됩니다. "좋아요"는 사용한 API를 통해 처리됩니다. og.likes는 좋아요 소식을 만듭니다. 소식이 아니라 book.reads API를 사용한 경우 "..읽는 중입니다..." 또는 "...읽었습니다...." 등이 표시됩니다. 액션을 호출하는 좋아요 API는 대략적으로 동사와 같습니다.

소식의 "기사" 부분도 매우 중요합니다. 문제의 페이지에는 페이지의 정의를 설명하고 Facebook에 표시되는 방식을 설명하는 태그가 있습니다. 페이지 소스를 보면 Facebook에 콘텐츠의 유형을 나타내는 태그가 표시됩니다.

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

이 방식을 통해 Facebook은 콘텐츠가 책이 아니라 기사임을 알게 됩니다.

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

이러한 태그는 개체를 설명하는 데 사용합니다. 개체는 대략적으로 명사에 해당합니다. 개체는 사용하는 액션에 밀접하게 연결되어 있습니다. 예를 들어 books.readsbook 인수를 취합니다. fitness.runs에는 course 개체가 필요합니다. og.likes에는 특별히 모든 개체를 사용할 수 있습니다.

검수를 위해 액션 제출

앱에서 소식을 만드는 경우 액션을 검수해야 합니다. 앱 대시보드의 왼쪽에서 앱 검수를 클릭하면 다음이 표시되어야 합니다.

제출 시작을 클릭하면 다음과 같은 화면이 표시됩니다.

3단계에서는 소식이 어떻게 액션개체로 구성되는지에 대해 설명했습니다. 이 경우 소식에서 like 액션을 사용하므로 승인이 필요합니다. (Facebook의 앱 센터에 앱을 제출하려는 경우 앱 센터 승인이 제공됩니다. 앱 센터는 재미있는 앱을 찾을 수 있는 위치이며, 개발자가 앱을 배포할 준비가 된 경우 배포를 유도하기 위해 고려해야 하는 것입니다.)

제출 절차를 완료하려면 앱 로고(75x75픽셀 이미지)와 앱 아이콘(16x16픽셀 이미지), 스크린샷으로 테스트하는 방법에 대한 지침 및 자동으로 만든 테스트 사용자를 제공해야 합니다. 개발자 및 개발자가 개발자로 추가하는 다른 사람이 개발자의 고유 스토리를 항상 게시하고 테스트할 수 있어야 하므로, 제출 절차로 인해 고유 변경 내용을 테스트하는 기능이 차단되지 않아야 합니다.

제출 절차에 대해 더 알아보려면 오픈 그래프 제출 프로세스 이해 문서를 참조하세요. 앱에서 만들 수 있는 소식을 승인할 때 Facebook에 필요한 전체 가이드를 제공합니다. 간단한 예로, 앱에서 like 액션을 사용하는 방법에 대한 구체적인 가이드를 제공합니다. 일반적으로 영업일로 3일 내에 검수를 완료합니다.

앱에서 한 번 사용할 때까지 액션은 승인할 리스트에 표시되지 않습니다. 따라서 추가할 준비가 되면 앱에서 하나 이상의 액션을 만들어야 승인을 위해 제출할 수 있습니다.

다음 단계

다음은 오픈 그래프를 배우기 위해 수행할 수 있는 다음 단계입니다.