แอพบนเว็บ

คุณสามารถใช้กล่องการแชร์เพื่ออนุญาตให้ผู้ใช้ของแอพแชร์เรื่องราวใน Open Graph จากแอพของคุณได้

หากต้องการนำกล่องการแชร์ไปใช้กับเรื่องราวใน Open Graph ให้ปฏิบัติดังนี้

การกำหนดค่าแอพของคุณ

ใช้แดชบอร์ดของแอพเพื่อเข้าถึงการตั้งค่าพื้นฐานของแอพและหาช่องโดเมนของแอพ เพิ่มโดเมนของแอพที่คุณจะนำกล่องการแชร์ไปใช้งาน

มาร์กอัพ Open Graph

เพิ่มมาร์กอัพ Open Graph เพื่อมาร์กอัพหน้าที่คุณต้องการให้ผู้ใช้ของคุณแชร์ จด URL ของหน้านี้ไว้เนื่องจากคุณจะต้องเพิ่ม URL นี้ไปยังโค้ดกล่องการแชร์

โค้ดกล่องการแชร์

ตัวอย่างโค้ดกล่องการแชร์ต่อไปนี้สามารถแชร์เรื่องราวใน Open Graph ไปยังไทม์ไลน์ของผู้ใช้ได้พร้อมใส่การดำเนินการ “กดถูกใจ” ไว้ในโพสต์

วางสคริปต์ลงในแอพที่คุณกำหนดค่าไว้ด้านบน ในสคริปต์ ให้แทนที่ 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() ลงในปุ่มในแอพบนเว็บของคุณได้แล้ว เมื่อผู้ใช้คลิกที่ปุ่มดังกล่าว ปุ่มจะแสดงกล่องการแชร์ขึ้นมาโดยมีการดำเนินการ “กดถูกใจ” เป็นหัวเรื่อง