Google Friend Connect: Blogspot Set up

วันก่อนเปิดอ่าน @blognone เห็นข่าวเรื่อง "ชวนมาลองเล่น Google Friend Connect" อ่านไปอ่านมาก็เออ น่าใช้ดีแฮะ (รายละเอียดติดตามอ่านที่ ลิงค์ ด้านบนนะครับ เขียนละเอียด + ดี กว่าผมเยอะ :D) อย่ากระนั้นเลย ลองเล่นดูสักหน่อย ตอนแรกเห็นว่าต้อง upload ไฟล์บางไฟล์เข้าไปไว้ที่ server ด้วย เอาแล้วไง ไอ้กระผมไม่มี (และยังไม่อยากมี) blog ที่เป็นโฮสต์ของตัวเองซะด้วย มีก็แค่ที่นี่ล่ะครับ อ่านไปอ่านมา ก็เจอว่า sub-domain ภายใต้ blogspot.com ไม่จำเป็นต้องอัพโหลดไฟล์ ดังกล่าวแต่อย่างใด ก็เลยได้โอกาสลองของครับ ตอนนี้ก็เลยตั้งใจว่าจะเขียนวิธีกำหนดค่า ที่ใช้สำหรับ blogspot เพราะตอนนี้ยังไม่มี Gadget ใน blogger.com สำหรับ "Google Friend Connect" โดยเฉพาะครับ ความจริงแล้วก่อนที่จะเขียนตอนนี้ผมลองทำไปเรียบร้อยแล้วครับ เอาเป็นว่าลองผิดลองถูกไปก่อน จะได้เขียนรวดเดียวผ่านฉลุย (ไม่หน้าแตกด้วย :P) เริ่มกันเลยแล้วกันครับ

1. เข้าหน้าเพจ http://www.google.com/friendconnect/ (ก็แน่นอนล่ะ) แล้วเลือกไปที่ ปุ่ม หรือไม่ก็ลิงค์ "Set up a new site" แล้วจะได้หน้า overview กด "continue" ข้ามไปได้เลย (เพราะว่ามันมีให้กดอยู่ที่เดียว :P)

รูปที่ 1: หน้าแรก

2. หน้านี้จะเป็นหน้าให้กรอกข้อมูลเกี่ยวกับเว็บที่จะเอาไปแปะครับ ของผมเป็น ดังรูป

รูปที่ 2: รายละเอียดเว็บไซต์

3. สำหรับคนที่จะเอาไปแปะที่โฮสต์ของตัวเองก็กดที่ปุ่มดาวน์โหลดไฟล์ ได้เลยครับ แล้วเอาไปวางไว้ที่ root ก็น่าจะใช้ได้ ส่วนผมเป็นพวกยากจนครับ ยังไม่มีที่ทางเป็นของตัวเอง ใช้ blogspot นี่ล่ะ ก็กด "continue" ข้ามหน้านี้ไปได้เลยครับ

รูปที่ 3: ดาวน์โหลด และอัพโหลด หรือว่าข้ามไปเลย

4. สำหรับโฮสต์ส่วนตัวเมื่อเอาไฟล์ไปวางเรียบร้อยก็กดที่ปุ่ม "Test to finalize setup" ได้เลยครับ เช่นเดียวกับคนไม่มีโฮสต์ครับ

รูปที่ 4: ฮาโหล เทส

5. หน้านี้จะเตือนว่ายังไม่ได้เอาไฟล์ script ไปวาง ให้เพิ่ม gadget ไปที่หน้าเว็บ หรือเปล่า ก็เป็นไปตามนั้นครับ เลือกที่ "Get code for the Members gadget »" ได้เลยครับ

รูปที่ 5: เตือนให้เพิ่ม Gadget

6. สำหรับหน้านี้จะเป็นหน้าที่เอาไว้สำหรับปรับแต่ง เจ้า Gadget ที่จะเอาไปวางไว้ที่เว็บครับไม่ว่าจะเป็นความกว้าง ยาว รวมทั้งคุณสมบัติอื่นๆ ด้วยครับ

รูปที่ 6: ปรับแต่ง

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

รูปที่ 7: สร้างโค้ด

8. จากนั้นมาที่หน้าเว็บครับ (ของผมเลยแล้วกัน) สำหรับ blogger.com ให้หลังจาก sign-in แล้วจะได้หน้าตาแบบนี้ครับ เลือก Customize เพื่อเพิ่มปรับแต่ง Layout ครับ

รูปที่ 8: เตรียมเพิ่ม Gadget ลงเว็บ

9. เลือก Layout » Edit HTML ตามรุปครับ แล้วหาบรรทัดที่ ระบายสี ( "]]> </b:skin>" ) ไว้ แล้วเพิ่มโค้ดด้านล่างลงไป (เป็นโค้ด library ของ Google Friend Connect คือ 2 บรรทัดแรกจาก ข้อ 7.) เพราะว่าตอนแรกที่ลองทำ เกิดข้อผิดพลาดที่ตัว JavaScript เนื่องจาก browser มองไม่ได้ตัวแปร google เลยลองย้ายเอามาใส่ไว้ต่างหาก ถึงใช้ได้

รูปที่ 9: เพิ่ม Library ของ Google Friend Connect

10. จากนั้นเลือก Layout » Page Element เพื่อเพิ่ม gadget ลงในหน้า blog ครับ (รูปที่ 10.1) จะได้หน้าต่างรายการ gadget ขึ้นมา ให้เลือก HTML/JavaScript (รูปที่ 10.2) แล้วเพิ่มโค้ดที่เหลือจากข้อ 7. ลงไปครับ (รูปที่ 10.3)

รูปที่ 10.1: เพิ่ม Gadget

รูปที่ 10.2: HTML/JavaScript

รูปที่ 10.3: Configure HTML/JavaScript

11. เราก็จะได้ gadget สำหรับ Google Friend Connect ดังที่เห็นด้านขวามือ ที่เหลือก็แค่รอพรรคพวกเข้ามา ครับผม :D

รูปที่ 11: Ready to Connect

ปล. เอาไว้โชว์ว่าเว็บนี้ใช้อยู่คนเดียว 555+
ปล. 2 เข้าใจว่าวิธีนี้ น่าจะใช้ได้กับทุกเว็บ โดยไม่จำเป็นต้องโหลดไฟล์ทั้ง 2 ไฟล์ไปวางไว้ที่โฮสต์ เพราะเท่าที่ดูก็แค่ใส่ JavaScript เข้าไว้ในหน้าเพจที่ต้องการครับ - ได้รับคำยืนยันแล้วครับว่าถ้าเป็นโฮสต์อื่นนอกเหนือจากโดเมน blogspot.com ต้องอัพโหลดไฟล์ ทั้ง 2 ไฟล์ใน ข้อ 3 ไปไว้ที่โฮสต์ด้วยครับ

ข้อมูลเพิ่มเติม:
- http://www.google.com/friendconnect/
- http://blognone.com/node/9879