ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

สวัสดีครับในบทความนี้จะมาแนะนำฟังก์ชันหนึ่งของแพลตฟอร์ม Facebook นั้นเองซึ่ง Facebook เป็นเครือข่ายสังคมที่ช่วยให้ผู้ใช้สามารถเชื่อมต่อกับเพื่อน ๆ และครอบครัว แบ่งปันการอัปเดต รูปภาพและวิดีโอ และเข้าร่วมชุมชนที่มีความสนใจร่วมกันได้ ซึ่ง facebook ได้มีฟังก์ชันที่แสดง Dialogs เช่นการแชร์, การ Send, การเข้า login เป็นต้น และเราสามารถใช้งานอย่างง่ายโดยใช้ facebook SDK ในส่วน javascript นั้นเอง

 

Facebook SDK นั้นมีชุดฟังก์ชั่นการทำงานฝั่งไคลเอ็นต์ที่มีให้ใช้งานได้หลากหลาย ดังต่อไปนี้

  • ช่วยให้สามารถใช้ปุ่มถูกใจและโซเชียลปลั๊กอินอื่น ๆ บนเว็บไซต์ของเราได้
  • ช่วยให้สามารถใช้การเข้าสู่ระบบ login ด้วย Facebook เพื่อทำให้ผู้คนสมัครใช้งานบนเว็บไซต์มีความได้สะดวกมากขึ้น
  • ทำให้การเรียกใช้ไปยัง API กราฟของ Facebook เป็นไปโดยง่าย
  • เปิดใช้กล่องโต้ตอบที่ช่วยให้ผู้ใช้สามารถดำเนินการต่างๆ ได้ เช่น การแชร์สตอรี่
  • ช่วยให้สื่อสารได้สะดวกยิ่งขึ้น เมื่อสร้างเกมหรือแท็บแอพบน Facebook

 

เริ่มการตั้งค่าพื้นฐาน

ในการตั้งค่าพื้นฐานนั้นเราใส่สคริปต์ของ facebook นั้นไปได้เลย ซึ่งไม่จำเป็นต้องมีการดาวน์โหลดหรือติดตั้ง ให้เราวางส่วนของโค้ดนี้ไว้โดยตรงที่ด้านท้ายแท็กเปิด body ในแต่ละหน้าที่ต้องการโหลดกับใช้งาน SDK

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v15.0'
    });
  };
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

หรือ

 <script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your-app-id',
      xfbml      : true,
      version    : 'v15.0'
    });
    FB.AppEvents.logPageView();
  };

  (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>

ในส่วนของ your-app-ip คือ ID ของแอพ Facebook ของเรา ซึ่งเราสามารถไปขอ ID ได้ที่ ลิงก์นี้

 

กล่องการแชร์

กล่องการแชร์ ช่วยให้ผู้อื่นสามารถใช้เพจโพสต์ลิงก์ในไทม์ไลน์ของตน หรือสร้างข้อมูล Open Graph ได้ และกล่อง popup dialogs ที่แสดงโดยใช้ JavaScript SDK จะได้รับการจัดรูปแบบโดยอัตโนมัติ เช่น เว็บบนมือถือหรือเว็บบนเดสก์ท็อป เป็นต้น ซึ่งเราสามารถทำแชร์ได้หลายแบบ เช่น

แชร์โดยใช้ Facebook SDK สำหรับ JavaScript

    <div id="shareBtn" class="btn btn-success clearfix">Share Dialog</div>
    <script>
    document.getElementById('shareBtn').onclick = function() {
      FB.ui({
        display: 'popup',
        method: 'share',
        href: 'ลิงก์',
      }, function(response){});
    }
    </script>

แชร์โดยใช้การเปลี่ยนเส้นทาง URL

<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">แชร์</a></div>

ตัวอย่างปุ่มแชร์

ตัวอย่างปุ่มแชร์ซึ่งเราสามารถเขียนทำปุ่มหรือทำเป็น javascript มาใช้งานได้
ตัวอย่างปุ่มแชร์

เรากดปุ่มแชร์จะมีกล่อง popup แสดง

ตัวอย่างกดแชร์จะมี popup ขึ้นมาแสดง
กดแชร์ มีปุ่ม popup ขึ้น

 

การเข้าสู่ระบบ

ซึ่งเราสามารถทำระบบเข้าสู่ระบบหรือ login ของ facebook ได้

เข้าสู่ระบบด้วยปุ่มเข้าสู่ระบบ

<div class="fb-login-button" data-width="" data-size="large" data-button-type="login_with" data-layout="rounded" data-auto-logout-link="true" data-use-continue-as="false"></div>

ผลลัพธ์คือ

ตัวอย่างปุ่ม login
ปุ่ม login

พอเรากดปุ่ม login ไป

ขึ้นหน้าตัวอย่าง login
หน้า login

ใช้ JavaScript SDK ในหน้า HTML

code script ของ javascript SDK

<script>
       function statusChangeCallback(response) {  
    console.log('statusChangeCallback');
    console.log(response);                   
    if (response.status === 'connected') {  
      testAPI();  
    } else {                                 
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this webpage.';
    }
  }


        function checkLoginState() {               
            FB.getLoginStatus(function(response) {   
            statusChangeCallback(response);
            });
        }

        window.fbAsyncInit = function() {
            FB.init({
            appId      : your_app_id,
            xfbml      : true,
            version    : 'v15.0'
            });
            FB.AppEvents.logPageView();
        };

        (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'));
         FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
        statusChangeCallback(response);        // Returns the login status.
        });
        function testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
        console.log('Welcome!  Fetching your information.... ');
        FB.api('/me', function(response) {
        console.log('Successful login for: ' + response.name);
        document.getElementById('status').innerHTML =
            'Thanks for logging in, ' + response.name + '!';
        });
    }
      </script>
      <script async defer crossorigin="anonymous" src="https://connect.facebook.net/th_th/sdk.js"></script>

ส่วน html

<body>
    <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
    </fb:login-button>
    
    <div id="status"></div>
</body>

ผลที่ได้คือ 

ตัวอย่างปุ่ม Login โดยใช้ javascript SDK
ตัวอย่างปุ่ม Login

ปุ่มถูกใจ

ปุ่มถูกใจ คือ เมื่อผู้เข้าหรือผู้ใช้งานเข้ามาชมเว็บเพจของเราแล้วเกิดถูกใจ ผู้ใช้สามารถคลิกปุ่มถูกใจในเว็บเพจของเราได้ซึ่งเป็นส่วนช่วยบ่งบอกว่าเพจของเรามีคนชอบหรือถูกใจสิ่งนี้

ตัวอย่างโค้ดปุ่มถูกใจ

    <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="" data-layout="standard" data-action="like" data-size="small" data-share="false"></div>

ในส่วน data-href เราสามารถวางลิงก์ของเว็บไซต์ของเราได้

ตัวอย่างปุ่มถูกใจ
ปุ่มถูกใจ

ปุ่มบันทึก

ปุ่มบันทึกให้ผู้ใช้งานสามารถบันทึกสินค้าหรือบริการลงในรายการแบบส่วนตัวบน Facebook แชร์ไปให้เพื่อน และรับการแจ้งเตือนที่เกี่ยวข้องได้ ตัวอย่างเช่น บันทึกรายการเสื้อผ้า ทริปการเดินทาง หรือลิงก์ที่ตัวเองต้องการกลับมาดูอีกครั้งในภายหลัง เป็นต้น

<div class="fb-save" data-uri="https://www.instagram.com/facebook/" data-size="large"></div>

ซึ่งเราสามารถแก้ไขลิงก์ที่ต้องการบันทึกได้ในส่วนของ data-uri ได้

ตัวอย่างปุ่มกดบันทึก
ปุ่มกดบันทึก

 

ดังนั้น แพลตฟอร์ม facebook นั้นก็มีปลั๊กอินกับ code ให้เราได้นำมาใช้งานในหน้าเว็บไซต์ของเราได้ซึ่งเป็นสิ่งที่ช่วยเว็บของเรามีการอัปเดตมีคนเข้ามมาดูหรือถูกใจกี่คนเพื่ให้เราสามารถอัปเดตเว็บไซต์ของเราได้หรือไปถึงช่วยให้เว็บของทำธุรกิจหรือขายสินค้าได้ เพราะเรานำปุ่มแชร์ แล้วมีคนอื่นกดแชร์ก็สามารถกระจายเว็บให้คนอื่นมาใช้บริการมากยิ่งขึ้น

ซึ่งสามารถศึกษาฟังก์ชันเพิ่มเติมของ facebook SDK ได้ที่ ลิงก์ นี้เลย

 

อ้างอิง

Social Plugins ,[ออนไลน์], เข้าถึงได้จาก https://developers.facebook.com/docs/plugins/

Facebook JavaScript SDK Tutorial | Getting Started (Login & Graph API) ,[ออนไลน์], เข้าถึงได้จาก https://washamdev.com/facebook-sdk-javascript-tutorial-graph-api-facebook-login/

วิธีสร้างปุ่มแชร์เฟสบุ๊ค (Share button Facebook) ใน php ,[ออนไลน์], เข้าถึงได้จาก https://www.mindphp.com/บทเรียนออนไลน์/บทเรียน-php/6380-share_facebook_button.html

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วิธีการเรียก class โดยเรียกด้วยคำแค่ส่วนหนึ่งของ class ทั้งหมดใน jquery
โดย ewqolf อ 07 ก.พ. 2023 5:59 pm บอร์ด jQuery & Ajax Knowledge
0
20
อ 07 ก.พ. 2023 5:59 pm โดย ewqolf
auto hot key
โดย mamay อ 07 ก.พ. 2023 5:54 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
30
อ 07 ก.พ. 2023 5:54 pm โดย mamay
ตัดต่อ Video Import File มาแล้วโหลดนานครับ
โดย [email protected] อ 07 ก.พ. 2023 3:26 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
34
อ 07 ก.พ. 2023 3:33 pm โดย Thanavat_n
หาเสียงฟรี มาใช้งานได้ที่ไหน
โดย noncup302 อ 07 ก.พ. 2023 1:30 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
6
67
อ 07 ก.พ. 2023 1:48 pm โดย Tookta
เพิ่มข้อมูลเข้าตารางไม่ได้ หลังจาก Import ข้อมูลเข้ามา
โดย krishdakorn อ 07 ก.พ. 2023 8:55 am บอร์ด Programming - PHP
2
40
อ 07 ก.พ. 2023 11:20 pm โดย krishdakorn
การใช้งาน remove class และ add class เพื่อใช้ งาน css
โดย ewqolf จ 06 ก.พ. 2023 5:04 pm บอร์ด jQuery & Ajax Knowledge
0
48
จ 06 ก.พ. 2023 5:04 pm โดย ewqolf
สอบถามทำเก็บ log ในฟังกชั่น sql_query แล้ว error [phpBB]
โดย eange08 จ 06 ก.พ. 2023 1:23 pm บอร์ด สอบถามปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
36
จ 06 ก.พ. 2023 1:30 pm โดย mindphp
สอบถามวิธีบันทึกข้อมูลด้วยการเช็ค Toggle Switch
โดย Tookta จ 06 ก.พ. 2023 12:31 pm บอร์ด Programming - PHP
6
99
จ 06 ก.พ. 2023 4:22 pm โดย Tookta