웹 앱

공유 대화 상자를 사용하여 앱 사용자가 앱에서 오픈 그래프 소식을 공유하도록 허용할 수 있습니다.

오픈 그래프 소식용 공유 대화 상자를 구현하려면 다음 단계를 따르세요.

앱 구성

앱의 기본 설정에 액세스하고 앱 도메인 필드를 찾으려면 앱 대시보드를 사용하세요. 공유 대화 상자를 구현할 앱의 도메인을 추가합니다.

오픈 그래프 마크업

사용자가 공유할 페이지를 마크업하려면 오픈 그래프 마크업을 사용하세요. 공유 대화 상자 코드에 추가해야 하므로 이 페이지의 URL을 적어둡니다.

공유 대화 상자 코드

다음의 샘플 대화 상자 코드를 사용하면 오픈 그래프 소식을 사용자 타임라인에 공유할 수 있으며 게시물에 "좋아요" 액션이 표시됩니다.

위에서 구성한 앱에 스크립트를 배치합니다. 스크립트에서 your-app-id를 앱의 앱 ID로 바꿉니다.

<script type="text/javascript">

// Initialize the Facebook JS SDK.
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v3.1'
    });

    // Put additional init code here
  };

  // Load the Facebook JS 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'));

    // Custom function to call when user initiates a share
    function ogShare() {
       FB.ui({
         method: 'share_open_graph',
         action_type: 'og.likes',
         action_properties: JSON.stringify({
             object:'https://developers.facebook.com/docs/opengraph/getting-started',
         })
    }, function(response){
         // Debug response (optional)
         console.log(response);
    });
  }

</script>

이제 ogShare() 함수를 웹 앱의 버튼에 연결할 수 있습니다. 사용자가 버튼을 클릭하면 공유 대화 상자가 트리거되며 제목에 "좋아요" 액션이 표시됩니다.

다음 단계

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