เทคนิคโพสต์รูปหรือข้อความไปยัง Facebook ด้วย Javascript

การเชื่อมต่อกับ Facebook ด้วย Javascript เป็นวิธีที่ผมชอบใช้ เพราะมีความรวดเร็วและปัญหาน้อยที่สุด วิธีการโพสต์ข้อความหรือรูปภาพไปยัง Facebook ก็เช่นกันสามารถทำได้หลายวิธี ซึ่งในบทความนี้ผมจะใช้ FB.ui โพสต์ในรูปแบบของ Open Graph ซึ่งจะมีรูปแบบคล้ายๆการกำหนด meta ของ HTML

​ก่อนอื่นเราต้องเตรียมการเชื่อมต่อกับ Facebook ก่อน โดยใช้คำสั่งนี้ในตอนโหลดเพจ
window.fbAsyncInit = function () {
    FB.init({
        appId: 'FACEBOOK_APP_ID',
        cookie: true,
        status: true,
        xfbml: true,
        version: 'v2.8'
    });
};
(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/th_TH/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

การโพสต์รูปไปยัง Facebook เราจะโพสต์ผ่าน FB.ui ด้วยคำสั่งด้านล่าง
FB.ui({
    method: 'share_open_graph',
    action_type: 'og.shares',
    action_properties: JSON.stringify({
    object: {
        'og:title': 'Your message',
        'og:image:width': 476,
        'og:image:height': 476,
        'og:image': 'https:/domain.tld/path/to/image.png'
    }
})
  • og:title สำหรับระบุข้อวามที่ต้องการโพสต์ สามารถใส่ค่าว่างได้ แต่จำเป็นต้องระบุเสมอ
  • og:image:width และ og:image:height ใช้เพื่อระบุขนาดของรูปภาพที่จะโพสต์ (ในกรณีที่มีรูปภาพ) เพื่อให้ Facebook สามารถโพสต์ได้อย่างรวดเร็ว ไม่ต้องตรวจสอบขนาดของรูปภาพก่อน
  • og:image สำหรับระบุ URL ของรูปภาพที่จะโพสต์
คำสั่งด้านบน เราจะเรียกเมื่อต้องการโพสต์ไปยัง Facebook สามารถนำไปใส่ในอีเว้นต์ onclick ของปุ่มโพสต์ไปยัง Facebook ได้
ผู้เขียน goragod โพสต์เมื่อ 17 พ.ย. 2560 เปิดดู 5,244 ป้ายกำกับ Javascript
^