ใส่ Twitter ในเว็บไซต์ |
จากที่มีสมาชิก THTWEB สอบถามกันเข้ามา เรื่องจะให้ข้อมูลใน twitter นั้นเชื่อมกับเว็บไซต์เราได้ยังไร เช่น ผมแจ้งข่าวใน twitter แล้วให้มันมาแสดงในหน้าเว็บเรา เป็นต้น ทางทีมงานเห็นว่า เพื่อความสะดวกกับสมาชิกท่านอื่นๆ ในการติดตั้ง Twitter ลงที่หน้าเว็บนั้น มีวิธีการลงอย่างไร มาดูครับ
โดยจะแบ่งออกเป็น 2 ขั้นตอน ด้วยกัน
- ขั้นที่ 1 : สร้าง code ใน twitter
- ขั้นที่ 2 : นำ code ที่ได้จาก twitter มาวางบนเว็บไซต์
|
|
ขั้นที่1 : เตรียมสร้าง code ใน Twitter
|
1. เปิดเว็บ facebook หรือคลิ๊กเมาส์ที่นี่ครับ http://twitter.com/about/resources/widgets เพื่อเข้าไปสร้าง code
2. ในหน้าหลักของ twitter บริเวณเมนูด้านซ้าย
- คลิ๊กที่ "เว็บไซต์ของฉัน" (กรอบแดง)
|
|
3. จากนั้นคลิ๊กที่ "วิดเจทโปรไฟล์" |
|
4. ปรับแต่งวิดเจทโปรไฟล์ของคุณ
- การตั้งค่า (Settings) : ให้กรอกชื่อ Username Account ของคุณ ในช่อง "ชื่อผู้ใช้" (Username)
|
|
- ค่าที่กำหนด (Preferences) :
หัวข้อ |
ความหมาย |
หาผลลัพธ์ใหม่? Poll for new results? |
แสดงผลแบบทีละรายการ หรือไม่ |
ใส่แถบเลื่อน? Include scrollbar? |
แสดง scrollbar ด้วยหรือไม่ |
Behavior กำหนดลักษณะการแสดงผล |
Timed Interval |
: แสดงตามช่วงเวลา |
Load all tweets |
: โหลดทวีตทั้งหมด |
วนลูปผลลัพธ์? Loop results |
กำหนดให้วนรอบ หรือไม่ |
ช่วงเวลาการทวีต? Twitter Interval |
กำหนดช่วงเวลาในการแสดงรายการใหม่ (หน่วยเป็นวินาที) |
จำนวนทวีต Number of Tweets |
จำนวนทวีต ที่ต้องการแสดง | |
|
- ลักษณะที่ปรากฏ (Appearance) : กำหนดสีต่างๆให้กับรูปร่างหน้าตา Twitter Widget ตามที่ต้องการ โดยมีให้กำหนดอยู่ 5 ส่วน ดังนี้
สีวิดเจท ( Widget Colors ) |
พื้นหลังกรอบ shell background |
: คลิ๊กที่ ช่อง4เหลี่ยมด้านหลัง ของแต่ละรายการ เพื่อคลิ๊กเลือกสี ตามที่ต้องการ |
ข้อความในกรอบ shell text |
พื้นหลังทวีต tweet background |
ข้อความทวีต tweet text |
สีลิงค์ link |
|
|
- Dimensions : กำหนดขนาดของ Twitter Widget ที่ต้องการ
ขนาดวิดเจท ( Widget Dimensions ) |
Width (px) |
: กำหนดความกว้าง |
Height (px) |
: กำหนดความสูง |
Auto width |
: ถ้าต้องการให้ความกว้างขยายตามพื้นที่ที่เรานำ Twitter widgetไปวางก็ให้เลือกหัวข้อ auto width ด้วย |
5. หลังทำการปรับแต่งวิดเจทแล้ว คลิ๊กที่ปุ่ม
เพื่อดูการแสดงผล ตามการตั้งค่าต่างๆ ที่ผ่านมาข้างต้น ดังในภาพข้างล่าง ด้านขวา |
|
6. หากแสดงผลถูกต้องตามที่ต้องการ
ให้คลิ๊กที่ปุ่ม
สุดท้าย copy code ทั้งหมดที่อยู่ในกรอบ โดยคลิ๊ก code ให้เป็นแถบสีฟ้า จากนั้น คลิ๊กขวาบนcode + copy เป็นอันเสร็จใน ขั้นที่1 |
|
ขั้นที่2 : นำ code จาก Twitter มาใส่ในเว็บไซต์
|
1. เข้าไปหน้าแก้ไข หรือหน้าจัดการ
- หากอยู่ในระบบ webmaster และเปิดหน้าเว็บที่ต้องการจะใส่ Twitter ให้คลิ๊กที่ไอคอนแก้ไขหน้านี้ (บริเวณบนซ้าย ของส่วนเนื้อหาหน้านั้น)
- หรือถ้าอยู่ในระบบการจัดการด้านใน ให้คลิ๊กที่ เมนูบาร์ 5. จัดการไฟล์5.1 ไฟล์เนื้อหา จากนั้นคลิ๊กที่ไอคอนedit detail หน้าไฟล์ที่ต้องการจะแก้ไข
2. กำหนดตำแหน่งที่จะแสดง Twitter โดยคลิ๊กเมาส์ที่จุดนั้น (เลข6)
- หากไม่มีตำแหน่งที่เหมาะสม : ให้แทรกแถวใหม่ หรือจะเพิ่มตาราง ก็ได้เช่นกัน ตามแต่สะดวก
3. จากนั้นจึงไปคลิ๊กที่ ไอคอนเพิ่ม/แก้ไข Script (เลข7) |
|
4. หลังเข้ามาในหน้า เพิ่ม/แก้ไข Script
- คลิ๊กขวา + paste เพื่อวาง code ที่ copy มาจาก twitter ลงไป
5. เสร็จแล้ว คลิ๊กที่ปุ่ม ออกมา |
|
6. กลับมายังหน้าแก้ไข
จะเห็นเป็นสัญลักษณ์ตรงตำแหน่งที่ใส่ code twitter
7. สุดท้ายถ้าไม่แก้ไขอะไร ก็กดปุ่ม เป็นอันเสร็จ แล้วดูยังหน้าเว็บได้เลยครับ |
|
ที่มา : ภาพประกอบจาก Twitter.com |