Google Friend Connect: Social Gadget

จาก blog ที่แล้ว ที่แสดงวิธีการใช้งาน Google Friend Connect ภายในโดเมนภายใต้ blogspot.com ตอนแรกก็ไม่ได้คิดอะไรเท่าไหร่แต่พอไปดูที่ blognone.com หรือเว็บอื่นๆ ที่เอาไปใช้ ก็ตะขิดตะขวงใจ เหมือนจะขาด อะไรไปสักอย่าง ว่าแล้วไง หน้าต่างด้านล่างนั่นเอง
เจ้าหน้าต่างนี้เป็นช่องทางให้ "เพื่อน" ที่อยู่ในรายการ หรือใครก็ได้(ถ้าต้องการ) เข้ามา "ด่า" เว็บเราได้สะดวกขึ้น ว่าแล้วก็เริ่มกันเลยครับ

1. เข้าไปที่หน้า http://www.google.com/friendconnect/ (อีกแล้ว) แล้วเลือก Social gadgets ในกรณีที่มีหลายเว็บไซต์ ก็ให้เลือกในส่วนของเว็บไซต์ที่ต้องการจะเห็น Social gadgets ที่ใช้งานได้ตาม รูปที่ 1(เข้าใจว่า google จะแบ่งให้เป็นกลุ่มๆ) ส่วนที่น่าสนใจตอนนี้เห็นจะมี Wall gadget (เข้าใจว่าน่าจะเหมือน wall ใน facebook) กับ Review/Rate gadget ซึ่งในตอนนี้ผมของเลือก Review/Rate gadget เพื่อทำเป็นตัวอย่างแล้วกันครับ เพราะคิดว่าอันอื่นๆ ก็น่าจะทำได้เหมือนกัน

รูปที่ 1: Social gadgets

2. เริ่มต้นด้วยการกรอกค่าที่จะเป็นลงไปครับ ในส่วน Scope นี่จะมีให้เลือก 2 ตัวเลือกด้วยกันคือ Page และ Id ผมเลือก Page ครับ และไม่ได้เลือกให้บุคคลทั่วไปสามารถโพสต์ได้ สำหรับข้อ 2 และ 3 เป็นการกำหนดค่าคุณลักษณะทั่วไปของตัว Gadget เหมืนอ blog ที่แล้ว

รูปที่ 2: กำหนดค่า Gadget

3. หลังจากปรับแต่งกันหน่ำใจแล้วก็กดปุ่ม "Generate code" เพื่อสร้างโค้ดที่จะเอามาแปะในเว็บเราครับ

รูปที่ 3: สร้าง Script

4. เปิด Layout » Page Elements เพื่อเพิ่ม HTML/JavaScript ลง blog

5. จากนั้นให้คัดลอกเอาโค้ดในข้อ 3 มาวางไว้ (ถ้าทำตามด้วยวิธีของ blog ก่อนหน้านี้ ก็ไม่จำเป็นต้องเอา 2 บรรทัดแรกไปครับเพราะว่าเอาใส่ไว้ในตัว template เรียบร้อยแล้ว ไม่เช่นนั้น blog จะต้องโหลดสคริป 2 ครั้ง) กด Save ที่หน้าต่าง Configure HTML/JavaScript และกด Save ที่ Page Elements อีกที

รูปที่ 4: ปรับแต่ง blog layout

6. กดที่ปุ่ม View Blog (ข้างๆ Layout ด้านบน) ก็จะได้ หน้าตาประมาณนี้ครับ เป็นอันเสร็จพิธี

รูปที่ 5: เสร็จพิธี

วิธีการด้านบนจะเป็นการเพิ่ม Social gadget ของ Google Friend Connect โดยเพิ่ม gadget HTML/JavaScript ของ blogspot เข้าไปอีกตัว แต่ความจริงแล้วก็สามารถเพิ่มที่ gadget เดียวกันกับ blog ที่แล้วก็ได้ครับ เพียงแค่ไม่อยากให้มันดูรก และสับสนผมเลยแยกออกมาอีกอันดีกว่า

ปล. ผมเอาออกไปแล้วนะครับ เพราะว่ากลับมาใช้เน็ตที่ห้องแล้วรู้สึกว่ามันหน่วงๆ กว่าเดิม :D

ข้อมูลเพิ่มเติม
- Google Friend Connect
- blog ที่แล้ว