Post รูปภาพจากเครื่องไปยัง Facebook Wall ผ่าน Graph API

จากในบทความก่อนหน้านี้ผมได้นำเสนอการ Post ข้อความไปยัง Wall ของ User ผ่านทาง Graph API ของ Facebook ไปแล้ว ในบทความนี้ผมก็จะนำเสนอการ Post รูปภาพจากในเครื่องไปยัง Wall ของ Users ครับ เรามาเริ่มกันเลยดรกว่าครับ


ดังเช่นในบทความก่อนหน้านี้นะครับ เราจะทำการสร้าง หน้าจอเพื่อรองรับการ Post รูปภาพตามนี้นะครับ

โดยเราจะทำการสร้าง ด้วย Code ดังนีิ้ครับ
//สร้าง Windows
var win = Titanium.UI.createWindow({
    backgroundColor : '#fff',
    layout : 'vertical'
});

//กำหนดค่าให้กับ Facebook API
Ti.Facebook.appid = '253673451435346';
Ti.Facebook.permissions = ['publish_stream','user_photos']; //เพิ่มส่วนของการ Access รูป
Ti.Facebook.addEventListener('login', function(e) {
     if (e.success) {
          alert('Logged in');
     }
});

//สร้างปุ่มสำหรับ Login Facebook
win.add(Ti.Facebook.createLoginButton({
     top : 20,
     style : Ti.Facebook.BUTTON_STYLE_WIDE
}));

จากนั้นก็ทำการสร้าง ปุ่ม "Select Image" เพื่อเปิด Gallery เพื่อเลือกรูปภาพ ซึ่งรายละเอียดการใช้งานจะอยู่ที่ เปิด Photo Gallery ด้วย Titanium Mobile
//สร้างปุ่มเปืิด Gallery
var img = Titanium.UI.createButton({
      title : ' Select Image ',
      top : 50
});

//แสดงภาพจากการเลือกใน Gallery
var imgView = Titanium.UI.createImageView({
      width : 300 ,
      backgroundColor : '#555',
      top : 20,
});

จากนั้นเพิ่มปุ่มสำหรับการ Post ลงไปใน หน้าจอ แล้วทำการ นำเอา Object ทั้งหมดไปใส่ใน Window
//ปุ่มสำหรับ Post
var post = Titanium.UI.createButton({
      title : ' Post To My Wall',
      top : 20
});

win.add(img);
win.add(imgView);
win.add(post);

เมื่อทำการรันขึ้นมาก็จะได้หน้าจอ แบบนี้ครับ

หน้าจอเริ่มต้น
สิ่งที่เราจะทำต่อไปก็คือเมื่อทำการกด ปุ่ม  Select Image ให้ทำการเปิด Gallery ขึ้นมาครับ (เปิด Photo Gallery ด้วย Titanium Mobile) และเมื่อทำการเลือกรูปภาพเสร็จแล้วให้ทำการแสดงในส่วนของ Image View
img.addEventListener('click',function(){
           Titanium.Media.openPhotoGallery({
                  mediaTypes : Titanium.Media.MEDIA_TYPE_PHOTO,
                  success : function(event){
                              imgView.image = event.media
                            }
           });
});

จากนั้นเราก็จะมาทำการเขียนในส่วนของการ Post รูปภาพดังกล่าวไปยัง Facebook ผ่านทาง Graph API กันครับ โดยสิ่งที่เราต้องทำก็คือเมื่อทำการกดที่ ปุ่ม Post To My Wall แล้วให้ทำการ Post รูปภาพที่เราเลือกไปยัง Wall ครับโดยเราจะทำการเขียนคำสั่งแบบนี้ครับ

post.addEventListener('click',function(){
     Titanium.Facebook.authorize();
     var file1 = imgView.image;
     //เปลี่ยน Graph Path เป็น me/photos เพื่อ Post เข้าไปยัง photos
     Titanium.Facebook.requestWithGraphPath('me/photos',
                {message : 'Image From Mobidevthai',
                 picture : file1},
                'POST',
                 function(data){
                                alert(data);
                  });
           });

ทดลองรันดูครับ เมื่อเรากดที่ปุ่ม Post To My Wall ถ้าหากว่าได้ Message แบบนี้ แสดงว่า เราสามารถทำการ Post ข้อมูลได้แล้วครับ


ลองไปเช็คที่ Wall ของเรากันครับ ก็จะพบกับ รูปภาพที่เราทำการเลือกเอาไว้นั่นเองครับ


เป็นอย่างไรกันบ้างครับกับการ Post รูปภาพไปยัง Wall ผ่านทาง Graph API ในบทความหน้าเรามาสร้างรูปเป็น Album กันดีกว่าครับ

0 ความคิดเห็น:

โพสต์ความคิดเห็น