Home / Developer  / Twitter API ดึง Feed และรูปภาพแสดงผลเป็น Pinterest

Twitter API ดึง Feed และรูปภาพแสดงผลเป็น Pinterest

ดึง Feed ที่มีรูปภาพ และ ข้อความบน timeline ของ @daydev

วิธีการเขียนโปรแกรมดึงข้อมูล Feed ของ Twitter ในรูปแบบ JSON ให้ปรากฏบนหน้าเว็บไซต์ของเราโดยแสดงข้อความและรูปภาพแบบ Pinterest ครับเอเจนซี่หลายเจ้ามักจะ “Conservative” กับการเล่น API ของ Twitter เพราะคิดว่าผู้ใช้งาน Twitter ไม่ค่อยนิยมเล่น Twitter หรืออัพโหลดรูปภาพ Twitter ซึ่งจริงๆ แล้วไม่กล้าที่จะเล่นมากกว่า เพราะคิดว่า Play Save มันปลอดภัย สู้ไปเล่น API ของ Instagram ยังจะปลอดภัยกว่าอันที่จริงคือกังวลว่ามันจะเกิดความซ้ำซ้อนของการเรียกข้อมูล หรือกลัวรูปภาพจาก Twitter นั้นไม่ปรากฏขึ้นมาครับ ก็ไม่เป็นไร “คิดว่าดีก็ทำไป” แค่อยากจะบอกว่า “ใจถึงกันหน่อย” เข้าเรื่องเลยดีกว่า เรามาดูวิธีการพัฒนา API เรียก Feed รูปภาพ และข้อความของ Twitter กันก่อนดีกว่าครับ ซึ่งถ้าพัฒนาเสร็จแล้วมันจะเป็นแบบนี้

ดึง Feed ที่มีรูปภาพ และ ข้อความบน timeline ของ @daydev

ดึง Feed ที่มีรูปภาพ และ ข้อความบน timeline ของ @daydev

วิธีการพัฒนาแอพพลิเคชันตัวนี้

คือสร้างไฟล์ HTML ขึ้นมาก่อนใน Body ให้ใส่ code ข้างล่างครับ

กำหนด CSS ออกมาให้มันแสดงผลแบบ Floating  เป็นกล่องลอยๆ ตามนี้ครับ

เข้าไปเรียก API จาก Twitter API ที่จะแสดงผลออกมาเป็น JSON ครับ กำหนด Path รูปภาพให้ดีตัวอย่างของ รูปภาพบน Twitter นั้นจะมี Path รูปดังนี้ผมใช้ Twitterpic หรือ twimg.com

ภาพ Thumbsnail

http://pbs.twimg.com/media/A3nMG9jCIAAuBnT.jpg:thumb 

ภาพใหญ่

http://pbs.twimg.com/media/A3nMG9jCIAAuBnT.jpg:large

ทำการ Get ค่า URL ไปที่

http://api.twitter.com/1/statuses/user_timeline.json/

แทรก JQuery เข้าไปครับ สร้างไฟล์ twitter.js ขึ้นมาโดยมี Code ดังนี้

ผมแก้ไข user: ‘daydev’ เพื่อดึง Timeline ของผมออกมา หลังจากนั้นก็แก้ไขค่า Head Tag ของ HTML ตามนี้ครับ ผมเลือกใช้ FancyBox มาดึงค่ารูปภาพให้แสดงเป็นรูปใหญ่เล็กน้อยเพื่อความสวยงาม

ก็เป็นอันเรียบร้อยใช้งานได้ ปรกติแสดงผลรูปได้ด้วย ดูตัวอย่างได้ที่นี่ครับ

http://www.daydev.com/demo/tweetwalls/

หรือดาวน์โหลด Source Code ทีนี่: Twitter Feed show Image and Tweet Walls (Version 1)

Comments

daydevthailand@gmail.com

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Review overview
1 COMMENT
  • Maxii Iixam April 13, 2013

    ถ้าจะให้ดึง feed จาก twitter หลายๆแอคเคาท์ ต้องกำหนดยังไงครับ.

POST A COMMENT