Developer, Google Developers, Marketing Strategy, PHP, Programming Language, SEO, SEO Case Studies, SEO for Marketing, Social Media Marketing

Google Developer API กับการสร้าง Custom Search ด้วย jQuery

VN:F [1.9.22_1171]
VN:F [1.9.22_1171]

คราวนี้ผมจะพานักพัฒนาทุกคนไปรู้จักการพัฒนาโปรแกรมบนเว็บ ด้วย Google Developer API ของ Custom Search API ครับซึ่งเป็นการสร้างหน้าการค้นหาข้อมูลโดยใช้ API ของ Google Custom Search API มาช่วย และใช้การแสดงผลผ่าน jQuery เพื่อทำให้ผลลัพธ์แสดงผลออกมาได้อย่างเต็มประสิทธิภาพครับ นั่นหมายความว่าบทความนี้จะเป็น How To ที่น่าจะช่วยให้เราสร้าง Search Box หรือระบบการค้นหาที่เทียบเท่ากับ Google เลยครับ ซึ่งบทความนี้จะไม่เกิดขึ้นถ้าปรากศจากไอเดียของเจ้าของเว็บไซต์ jQuery4u.com ครับ

เริ่มต้นพัฒนา Custom Search API ของ Google ด้วย jQuery

ก่อนอื่นเลยคุณต้องมี API KEY ของ Google Developer ครับซึ่งต้องเข้าไปที่หน้าเว็บไซต์ https://code.google.com/apis/console/b/0/ ครับ

เราต้องใช้ API KEY มาช่วยนะครับ

เราต้องใช้ API KEY มาช่วยนะครับ

เสร็จแล้วให้เราสร้าง HTML ไฟล์ขึ้นมาครับ โดยใช้คำสั่งในส่วน HEAD ว่า

ตามด้วยส่วนของ HEAD และ BODY นะครับแบ่งเป็น CSS และ jQuery ทีละส่วน

จะเห็นว่า Code ทั้งหมดของ HTML นั้นจะเป็นเหมือนตัวอย่างข้างล่าง

เวลาที่เราแสดงผล และลองค้นหาดูจะเห็นหน้าผลลัพธ์แบบนี้ครับ

ทดลองการค้นหา

ทดลองการค้นหา

ผลลัพธ์จากต่างประเทศ

ผลลัพธ์จากต่างประเทศ

ค้นหาด้วยรูปภาพครับ

ค้นหาด้วยรูปภาพครับ

ค้นหา หนังสือดีๆ จาก google book ก็ได้

ค้นหา หนังสือดีๆ จาก google book ก็ได้

ค้นหาเป็นวีดีโอก็ได้ครับ

ค้นหาเป็นวีดีโอก็ได้ครับ

เป็นยังไงบ้างครับการใช้ jQuery มาแสดงผลร่วมกับ Google Custom Search API ทำให้เราสามารถใช้งานการค้นหาที่ รวดเร็วและสวยงามครับ หากว่าใครอยากได้ Source Code ก็สามารถดาวน์โหลดได้ที่นี่นะครับ

Google Custom Search API – jQuery (Version 1.0.0)

หรือเข้าไปดูตัวอย่างที่ http://www.daydev.com/demo/jqgoogle/ ก็ได้ครับ ขอให้สนุกกับการสร้าง Custom Search ของตัวเองด้วย Google API ครับ

About Banyapon Poolsawasd:
เว็บมาสเตอร์ที่มีบทบาทต่อไปนี้ Founder, ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, Sr. Search Engine Specialist บริษัท Adways Labs Thailand Co., Ltd. สามีวัยกลางคนผู้บ้างาน แต่ก็มีเวลาให้ภรรยา และครอบครัว อาจารย์พิเศษ มหาวิทยาลัย ประจำคณะ วิทยาศาสตร์ ไอที และ บริหารการตลาด "ความรู้มีไว้แบ่ง เหมือนเหาที่มีไว้กระจาย"
Website:http://www.daydev.com
Jabber:daydevthailand@gmail.com

Comments

comments

About Banyapon Poolsawasd

เว็บมาสเตอร์ที่มีบทบาทต่อไปนี้ Founder, ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, Sr. Search Engine Specialist บริษัท Adways Labs Thailand Co., Ltd. สามีวัยกลางคนผู้บ้างาน แต่ก็มีเวลาให้ภรรยา และครอบครัว อาจารย์พิเศษ มหาวิทยาลัย ประจำคณะ วิทยาศาสตร์ ไอที และ บริหารการตลาด "ความรู้มีไว้แบ่ง เหมือนเหาที่มีไว้กระจาย"No information is provided by the author.

Leave a Reply