โรงเรียน Web Design ทำเว็บ Mac Final cut Pro Graphic design

วิธีใส่ Twitter Widget ใน Blog

วิธีใส่ Twitter Widget ใน Blog

นำมาจาก Blog ของคุณ Champ Exteen ครับ น่าสนใจมาก

สำหรับคนที่สนใจสามารถ follow ได้ที่ @tpagon

ส่วนการใช้ Twitter เบื้องต้นดูได้ที่นี่

• ก่อนอื่นต้องมีแอคเคานท์ของทวิตเตอร์ก่อน ซึ่งคาดว่าน่าจะมีกันแล้วใช่ไหมครับ
• ให้ล๊อกอินเข้าไปในทวิตเตอร์เพื่อขอโค้ดมาติดบล็อก ซึ่งในทวิตเตอร์จะมีที่ขอ widget อยู่สองที่ครับ คือ
  
  http://twitter.com/goodies/widget_profile
  
  http://twitter.com/widgets/which_widget
  (ไม่มีคำว่า goodies)

  ในที่นี้จะใช้โค้ดแบบที่ได้จากลิงค์ที่สองนะครับ เนื่องจากลิงค์แรกลองทำแล้วปรากฏว่าผลลัพธ์แสดงแปลกๆ คือเอาทวีตเก่าๆ มาขึ้นอยู่เรื่อย ไม่ได้ดั่งใจ!

• จากเว็บ http://twitter.com/widgets/which_widget จะเห็นว่ามีให้เลือกสองแบบ คือ Flash Widget กับ HTML Widget
  • ในกรณี Flash Widget นั้นง่ายครับ คือหลังจากเลือกธีม (มีให้เลือก 3 สี) แล้วสามารถก๊อปโค้ดมาใส่ตรงๆ ได้เลย โดยอาจจะต้องแก้ขนาดความกว้างเล็กน้อยในพารามิเตอร์ของแฟลช สมมติว่าไซด์บาร์เรามีขนาด 160 px เราก็หาจุดที่เป็น width=”…” ในโค้ด แล้วใส่ 160 เข้าไป เท่านั้นเองครับ (ใช้ Widget แบบ Flash จะไม่มีปัญหาทำให้หน้าบล็อกโหลดช้าครับ แต่ข้อเสียคือ แก้ธีมไม่ได้ ต้องเลือกภายใน 3 แบบที่เค้าให้มา)
  • ส่วนในกรณี HTML Widget จะดีกว่าตรงที่เราสามารถปรับแต่งหน้าตาได้ด้วย CSS ทุกประการ แต่ว่าวิธีใส่โค้ดเพื่อไม่ให้บล็อกโหลดช้าจะซับซ้อนกว่าเล็กน้อยครับ
• เมื่อเข้าไปที่ HTML Widget แล้ว จะได้โค้ดประมาณนี้ออกมา เพื่อให้เราก๊อปมาใส่ส่วน Theme->Widgets->Custom Code ในบล็อกของเรา
  
• ตรงนี้มีเทคนิคเล็กน้อยตรงที่ว่า บริเวณโค้ดส่วนที่เป็นสีแดง คือโค้ดส่วนที่โหลดข้อมูลทวีต ดังนั้นถ้าทวิตเตอร์ล่ม หรือช้า จะทำให้บล็อกของเราโหลดช้าไปด้วย จึงขอแนะนำให้แยกโค้ดส่วนนี้ออกมา ใส่ไว้หลังสุดครับ
  

  จากตัวอย่างด้านบน ให้ใส่โค้ดส่วนสีดำลงใน Custom Code 1 และส่วนสีแดงลงใน Custom Code 4 (อ้นล่าง) แล้ว อาจจะลาก Custom Code 4 ไปไว้ในส่วน Leg (เมนูด้านล่าง) เพื่อให้บล็อกเราโหลดเสร็จก่อน จึงค่อยโหลดทวิตตามมาทีหลัง มิเช่นนั้นแล้ว หากเอาโค้ดทั้งหมดไว้ใน Custom Code 1 ผลที่ได้คือจะต้องรอให้ทวิตเตอร์โหลดข้อมูลเสร็จก่อน จึงจะสามารถโหลดข้อมูลพวก Previous, Comments,… มาแสดงได้

• เมื่อ ใส่โค้ดเสร็จแล้วก็จะสามารถแต่ง Widget Twitter นี้ได้ด้วย CSS เลยครับ (ใส่โค้ดในส่วน Theme->Edit CSS) โดยในส่วนของ HTML ของ Widget จะมีโครงสร้างแบบนี้
  

  ตัวอย่างโค้ด CSS ที่บล็อกนี้ใช้แต่ง Twitter Widget จะเป็นแบบนี้ครับ

  

ปกติทวิตเตอร์จะลิมิตไม่ให้โปรแกรมเรียกดูข้อมูลเกิน 150 ครั้งต่อชม. ดังนั้นถ้าสมมติว่าเรียกหาข้อมูลไม่เจอ ในบริเวณทวีตของเราก็จะเป็นว่างๆ ไปครับ แต่ว่าข้อมูลในส่วนอื่นของบล็อกจะดูได้ปกติ

Tags: เรียนเว็บ