ใส่ Twitter Widget ใน Blog

posted on 11 Aug 2009 23:05 by champcpe in it-related

พอดีมีคนถามมาว่า อยากจะทำใส่ทวิตเตอร์ให้บล็อกอย่างด้านขวาตรงไซด์บาร์นี้ ทำอย่างไร เห็นมีคนทำกันเยอะแยะ เลยเอาวิธีบวกกับเทคนิคเล็กๆ น้อยๆ ที่จะทำให้ใส่แล้วบล็อกโหลดไม่ช้ามาฝากกันครับ

  • ก่อนอื่นต้องมีแอคเคานท์ของทวิตเตอร์ก่อน ซึ่งคาดว่าน่าจะมีกันแล้วใช่ไหมครับ 
  • ให้ล๊อกอินเข้าไปในทวิตเตอร์เพื่อขอโค้ดมาติดบล็อก ซึ่งในทวิตเตอร์จะมีที่ขอ widget อยู่สองที่ครับ คือ





    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 ครั้งต่อชม. ดังนั้นถ้าสมมติว่าเรียกหาข้อมูลไม่เจอ ในบริเวณทวีตของเราก็จะเป็นว่างๆ ไปครับ แต่ว่าข้อมูลในส่วนอื่นของบล็อกจะดูได้ปกติ

หวังว่าจะเป็นประโยชน์ไม่มากก็น้อยนะครับ (จบแบบรายงานหน้าชั้น!)

 

Comment

Comment:

Tweet

big smile open-mounthed smile sad smile confused smile

#96 By (125.26.191.81|125.26.191.81) on 2014-11-20 11:03

big smile big smile big smile big smile big smile

#95 By (125.26.191.81|125.26.191.81) on 2014-11-20 11:02

ขอบคุณมากฮะ Hot! Hot! Hot! Hot!

#93 By DLucifa on 2011-10-10 10:23

มีประโยชน์เจ้าค่ะ ตอนแรกก็ใส่ไม่ค่อยจะได้สักเท่าไร 555

#92 By KlΪзωzΛ on 2011-09-08 20:43

Hot! ขอบคุณมากค่าาา

#91 By Pangusama on 2011-09-05 18:37

ขอบคุณครับ Hot!

#90 By น้ำหอม on 2011-08-16 15:26

Good post, thanks for taking time to discuss this.
Fortunately this topic is also presented in your blog, assuring a decent coverage.
Keep up the good work !

#89 By bcaa probiotica (187.2.55.102) on 2011-08-02 05:51

Everybody who wants to look good aspires to have a great pair of sunglasses. Sunglasses will not only compliment the dress but also change the personality of the individual. Sunglasses have always been a part fashion statement in every era. Many world renowned brands are regularly working towards latest designs of sunglasses and eyeglasses and unveiling collections of designs which can make you look chic and enjoy the luxury of fashion.

#88 By ray ban sunglasses (118.217.181.182) on 2011-06-30 08:16

Everybody who wants to look good aspires to have a great pair of sunglasses. Sunglasses will not only compliment the dress but also change the personality of the individual. Sunglasses have always been a part fashion statement in every era. Many world renowned brands are regularly working towards latest designs of sunglasses and eyeglasses and unveiling collections of designs which can make you look chic and enjoy the luxury of fashion.

#87 By ray ban sunglasses (118.217.181.182) on 2011-06-30 08:15

The fantastic and great tutorials.

#86 By Amber Management (115.186.167.34) on 2011-06-24 15:20

Hot! Hot! Hot!

#85 By MyFiLmZaA on 2011-06-04 10:11

อันนี้เป็นจริงที่ดีและน่าสนใจรวมทั้งให้ข้อมูล Cool โพสต์ข้อมูลมากฉันเพิ่งพบบล็อกของคุณและอ่านผ่านโพสต์ไม่กี่แม้ว่านี่คือความคิดเห็นแรกของฉัน.

#84 By pacquiao vs marquez 3 (129.121.78.124) on 2011-05-30 00:46

ขอบคุนสำหรับความรู้

#83 By น้ำหอม davidoff (183.89.91.210) on 2011-05-07 22:51

Hot! Hot! ขอบคุณค่ะconfused smile

#82 By Vee ;3 on 2011-04-09 15:02

ขอบคุณครับ

#81 By moto (110.164.66.46) on 2011-02-10 15:01

ขอบคุณค่า....แต่แอบงงอ่ะ

หรือเราไม่ฉลาดพอ

#80 By phitnattha on 2011-01-27 04:43

ขอบคุณมากค่ะ ^^

#79 By Nanzation * on 2011-01-15 12:45

Hot! ขอบคุณมากเลย><

#78 By ``TVXQ5 on 2010-12-26 04:37

กำลังต้องการพอดี ขอบคุณครับ

#77 By admin (118.172.44.147) on 2010-12-22 11:08

ขอบคุณค่ะ ^ ^
<script src=\\\"http://widgets.twimg.com/j/2/widget.js\\\"></script>
<script>
new TWTR.Widget({
version: 2,
type: \\\'profile\\\',
rpp: 7,
interval: 6000,
width: \\\'auto\\\',
height: 300,
theme: {
shell: {
background: \\\'#4d3b4d\\\',
color: \\\'#f7ba03\\\'
},
tweets: {
background: \\\'#000000\\\',
color: \\\'#eb21a4\\\',
links: \\\'#4aed05\\\'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: true,
behavior: \\\'all\\\'
}
}).render().setUser(\\\'tzkz1\\\').start();
</script>

#75 By 1 (182.52.126.132) on 2010-11-11 13:51

ขอบคุณครับ : )

Hot! Hot! Hot! Hot! Hot!

#74 By Near on 2010-10-29 00:41

ขอบคุณสำหรับวิธีค่ะ
เป็นประโยชน์มากเลย big smile

#73 By ✦ ハナブサ on 2010-10-05 20:57

ขอบคุณค่ะ

#72 By aimamsama on 2010-08-21 20:28

#71 By pilot (124.121.100.170) on 2010-08-05 10:48

ขอบคุนครับ cry

#70 By Komuri on 2010-07-21 15:36

ขอบคุณนะค่ะ :PHot!

#69 By amijjua, * . on 2010-07-16 21:47

ถ้าเกิดจะเปลี่ยนแปลง โค๊ดในธีมที่มียุแล้วทำไมมันเข้าไปเปลี่ยนไม่ได้ครับมันไม่ให้เข้าไปพิมพ์

#68 By LuR Art on 2010-07-07 21:05

ขอบคุณมากๆ เลยค่ะ

#67 By Nicky on 2010-06-01 16:40

โอ้ว สุดยอดมากค่ะ ขอบคุณมากนะคะ big smile

#66 By Bowajung on 2010-05-17 15:50

ขอบคุณมากเลยค่ะ

#65 By DailyMilyBlog on 2010-05-02 22:33

Hot! ;: ขอขอบคุณมากเลยนะครับ บ บ :DDD

#64 By ARTNBD on 2010-05-02 00:40

Hot! Hot! Hot! Hot! Hot!

#63 By ' iQvip ' on 2010-04-26 02:18

THANGS cry

#62 By Яainnч on 2010-04-20 16:03

ขอบคุณมากเลยนะค่า big smile Hot!

#61 By TOEY_K on 2010-04-13 02:00

ขอบคุณสำหรับวิธีมากๆเลยค่ะHot! Hot!

#60 By Kei_Eroi*2 on 2010-04-05 20:29

โอ้วว ขอบคุณค่ะ ^^

Hot! Hot!

#59 By ★ ナ イ ス ☆ on 2010-01-26 10:11

ตอนนี้ลง twitter ได้แล้ว
แต่มีปัญหาตรง head ของ twitter กับ custom code นี่แหละค่ะ
เหมือนมันจะขึ้นซ้อนกันสองอัน อยากจะเอาแค่อันเดียว แต่ตรง custom code ก็แก้อะไรไม่ได้เลย
ทำไงดีค่ะ ว่าง ๆช่วยมาตอบให้หน่อยนะคะ
ตอนนี้ก็แก้ขัดโดยการซ่อนพื้นหลัง Head กับไม่ใส่ Head twiter ไปก่อนsad smile

#58 By Classicgreen on 2010-01-18 01:11

โง่ นิดนึงนะคะ
คือถ้าใช้แบบแรก แล้วจะเอาโค้ดนั้นไปแปะไว้ตรงไหนล่ะค่ะ เหอๆ ขอบคุณมากค่ะsad smile sad smile

#57 By ambrosia88 on 2009-12-10 14:56

ขอบคุณค่ะ กำลังหาวิธีอยู่พอดี Hot! Hot!

#56 By RedEvil@Colors5 on 2009-11-17 12:56

ขอบคุณมากกกฮะ

#55 By =] † BB"P † [= on 2009-11-09 11:07

ขอบคุณคับ

#54 By Present on 2009-11-07 20:47

Hot! Hot! confused smile

#53 By hypercat on 2009-11-06 17:12

ขอบคุณคร้าบ

เพิ่งเริ่มเล่นเอง

จะลองใช้ตามนี่นะครับ

#52 By นายอุ๊ย!! on 2009-10-23 20:13

ดีมากกก
อ่านได้ความรู้ดี

#51 By กบ on 2009-10-21 11:53

ขอบคุน!!

^^ Hot!

#50 By PMMA❥ on 2009-10-20 22:38

ช่วยได้เยอะมากๆเลยค่ะ สงสัยอยู่เหมือนกันว่าจะใส่ยังไง อธิบายเข้าใจง่ายมากๆ ขอบคุณค่ะ Hot! Hot! Hot! Hot! Hot!
thx so muchhhhh

#48 By Kimtaehee on 2009-10-05 00:20

Hot!

เจ๋งๆ

#47 By m★nstress ™ on 2009-10-03 15:58


    follow me on Twitter