GORAGOD.com

freelance, web developer, web designer, hosting, domain name

เทคนิคโพสต์รูปหรือข้อความไปยัง 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 ได้
0SHAREFacebookLINE it!
^