ติดปุ่ม Like, Share และ Retweet บนเว็บไซต์ของคุณ

จากบทความข้างบนจะเป็นการใช้ script สำเร็จรูป และมีการนับจำนวนให้นะครับ แต่ script ที่ยกมานั้นจะไม่รองรับ ssl ครับ ทำให้ browser บางรุ่นไม่ยอมรัน script เหล่านี้ครับ บทความนี้จึงจะมาบอกเกี่ยวกับทางแก้นะครับ

1. สำหรับของ facebook
facebook จะมี script สำหรับใช้กับ ssl ให้อยู่แล้วครับ วิธีใช้งานจะเหมือนกับของ heha เพียงแต่เปลี่ยนลิ้ง script จาก

เป็น

หรือ จะใช้วิธีส่งข้อมูลผ่าน url ธรรมดาก็ได้ครับ ตามรูปแบบข้างล่างนี้ครับ

โดยเปลี่ยน `share_url` เป็นลิ้งที่เราต้องการครับ อย่าลืม urlencode() ก่อนนะครับ แต่ถ้ายกให้เป็น popup ก็ใส่ script popup เข้าไปด้วยเลยครับ เช่น

เท่านี้ เราก็จะสามารถ share facebook บน ssl ได้แล้วครับ

2. twitter
twitter นี้ จะมีการส่งค่าง่ายๆผ่าน url อยู่แล้วนะครับ คือ

โดย `tweet_text` จะเป็นข้อความที่ต้องการให้twit นะครับ เช่นเดียวกับของ facebook ถ้าจะให้กดแล้วออกมาเป็น popup ก็ใส่ script popup ลงไปครับ

จาก code ด้านบนสามารถ Copy ไปใช้งานได้เลยครับ โดยจะเห็นว่าผมใช้ javascript สั่งเพิ่ม iframe เข้าไปใน innerHTML ภายหลังเนื่องจาก ปกติแล้วหาก iframe โหลดไม่เสร็จจะพลอยทำให้เว็บหลักโหลดไม่เสร็จตามไปด้วย ทำให้ผู้ใช้เห็นข่าวของเราช้า ดังนั้นจึงต้องใช้ javascript ใส่เองภายหลังจากที่หน้าเอกสารโหลดเสร็จสิ้นแล้ว รายละเอียดที่ปรับได้เพิ่มเติมมีดังนี้ครับ

• <meta> ที่ผมแทรกไว้ด้านบน จะมี title, description ใช้กำหนดเนื้อหาที่จะให้แสดงของปุ่ม Facebook Share ครับ และยังรวมไปถึงชื่อเรื่องที่จะแสดงใน Wall จากการกดปุ่ม Like ด้วย
• <link rel=”image_src” href=”…”> อันนี้ใช้กำหนดรูปที่จะแสดงของปุ่ม Facebook Share ครับ
• <title> ใส่หัวข้อข่าวเช่นเดียวกับ <meta> แต่อันนี้ใช้กับปุ่ม Re-tweet ให้แสดงในข้อความที่จะ tweet ด้วย
• <a name=”fb_share” share_url=”…”> ใช้กำหนด URL ที่ต้องการ Share กับปุ่ม Facebook Share กรณ๊ต้องการ Share หน้าอื่น (เช่นข่าวใน RSS) และส่วนนี้คือส่วนแสดงปุ่ม Share
• <div id=’rt_box’> กับ <div id=’like_box’> คือตำแหน่งที่จะแสดงปุ่ม Re-tweet และปุ่ม Like ตามลำดับ
• script javascript function insertSocialShare – ใช้สั่งให้แทรก iframe หลังจากหน้าโหลดเสร็จแล้ว (ความจริงควรแยกเป็น file .js จะได้เรียกง่ายๆ แต่ผมแสดงให้อ่านง่ายครับ)
• shareUrl –  คือ url ที่จะแชร์ต่อให้กับ twitter และปุ่ม Like สามารถเซ็ตเป็นอะไรก็ได้เช่นกัน
• username – คือต้องการให้แสดงว่า RT ใครของ twitter ครับ
• script javascript function XBrowserAddHandler ใช้ add event ตอนโหลดหน้าเสร็จให้ใช้ได้ทุก Browser
• <script src=”http://static.ak.fbcdn.net/connect.php/js/FB.Share” type=”text/javascript”></script> อันนี้ javascript ของปุ่ม Share เอาไว้ด้านล่างสุดเพื่อจะได้ไม่กระทบต่อการโหลดหน้าเนื้อหา

ส่วนที่เห็นผมใส่ ?d=6 ไว้ก็เพราะมันจะ cache ผลลัพธ์ที่เคยใช้งานไปแล้วเอาไว้ ถ้ามีการแก้ไขข้อมูลแล้วอยากเห็นข้อมูลที่เปลี่ยนไปก็เปลี่ยนเลข id เป็นอะไรก็ได้ที่ไม่ซ้ำเดิมเอาครับ

ลองดูตัวอย่างผลลัพท์ได้ที่นี่

ข้อมูลอ้างอิง:

http://www.seomofo.com/wordpress/tweetmeme-retweet-button.html
http://developers.facebook.com/docs/reference/plugins/like
http://www.facebook.com/facebook-widgets/share.php

Facebook มีอะไรใหม่?

ในงาน f8 ปี 2010 นี้เองที่เป็นงานแถลงข่าวใหญ่ของทาง Facebook ซึ่งปีนี้ ทาง Facebook ได้เปิดตัว Feature ใหม่ๆ 3 ตัวหลักดังนี้

1. Social Plugin จะคล้ายๆ กับ Facebook Connect ที่ทาง Facebook มีอยู่แล้ว แต่ได้ถูกพัฒนาให้ดีขึ้นกว่าเดิมมาก เช่น ปุ่ม login with face ซึ่งจะแสดงรายชื่อเพื่อนที่เข้าใช้งานเว็บไซต์ที่ติดตั้ง code ตัวนี้ไว้ ทำให้เรารู้ได้ทันทีว่ามีเพื่อนคนใดของเราบ้างที่เข้าใช้งานเว็บไซต์แห่งนี้เช่นเดียวกับเรา แต่พระเอกของ Social Plugin จริงๆ คือปุ่ม Like ครับ ซึ่งจะตัวเว็บไซต์เองจะได้ประโยชน์จากปุ่ม Like มาก เนื่องจากเมื่อผู้ใช้กด Like แล้ว ใน wall ของผู้ใช้จะปรากฎข้อความว่าผู้ใช้กด Like หน้าอะไร พร้อมใส่ link มายังเว็บไซต์ที่ติดปุ่มเอาไว้ให้อัตโนมัติ เป็นการเพิ่ม traffic กลับมายังตัวเว็บไซต์เองได้เป็นอย่างดี
2. Open Graph API ส่วนนี้คือการกรอกข้อมูลใน tag meta ใน html เอาไว้ว่าหน้าๆ นี้มีรายละเอียดเกี่ยวกับเรื่องอะไร มีเจ้าของ content เป็นใคร มีที่ตั้งอยู่ที่ไหน (ระบุกันเป็น latitude, longtitude ได้เลยทีเดียว) มี contact ให้ติดต่อได้ทางใดบ้าง ซึ่งพูดง่ายๆ คือ tab info ใน Page นั่นแหละครับ เมื่อมีผู้ใช้มากด Like ที่หน้านี้ content ที่กรอกไว้จะถูกส่งกลับไปให้ facebook เก็บเป็นสถิติเอาไว้ ตัวอย่างเช่น เว็บ review หนัง แล้วผู้ใช้มากด Like ให้กับหนังเรื่อง Iron Man facebook จะรู้ทันทีว่าคนๆ นี้ชอบ content ประเภท Movies เรื่อง Iron Man และข้อมูลจะถูกส่งไปยังหน้า Profile ของผู้ใช้คนนั้นให้เลย ตรงนี้ถูกกล่าวขานว่าจะทำให้กลายเป็น “Semantic Web”
3. Graph API คือส่วนสำหรับการร้องขอข้อมูลใดๆ จาก Facebook มาใช้งาน สามารถใช้งานได้แม้แต่การดึง profile ของผู้ใช้หากผู้ใช้ให้อนุญาต โดยการเรียกใช้งานจะสามารถเรียกผ่าน URL ได้ทั้งหมด หากขอข้อมูลโดยไม่มีการใช้งาน OAuth จะได้ข้อมูลเพียง ข้อมูล public ที่ผู้ใช้เปิดสิทธิไว้ให้ แต่หากใช้ OAuth ขอ token มาแล้วข้อมูลที่ร้องขอได้จะมากขึ้นตามสิทธิที่ผู้ใช้ให้อนุญาต ตรงนี้ทำให้การใช้งานผ่าน curl ใน command line สามารถกระทำได้ง่ายมาก หรือแม้แต่เรียกรูป profile ของผู้ใช้โดยการใส่ URL ลงใน tag <img> ก็ตาม นอกจากนี้ยังใช้การส่ง POST เพื่อ update ข้อมูลกลับ facebook ได้อีกด้วย

Feature ใหม่นี้มีประโยชน์อย่างไร?

การเปิด Feature ใหม่นี้มีประโยชน์มากมายหลายประการดังนี้

1. เป็นการยกสังคมออนไลน์ออกมานอก Facebook ทุกๆ เว็บไซต์สามารถมีองค์ประกอบได้ทุกอย่างที่ Page มี (Fan คือจำนวน Likes, ตัว content ในเว็บแทน wall แจ้งข่าวสาร) และยังสามารถตกแต่งหน้าเว็บได้อิสระตามความชอบใจ ไม่ต้องเป็นไปตามหน้าตา facebook
2. ผู้ใช้กด like ที่หน้าเว็บแล้วข้อมูลความสนใจของผู้ใช้เช่น เพลง หนัง หนังสือ นิยาย จะถูกส่งเข้า profile ของผู้ใช้คนนั้นๆ ทันที โดยที่ผู้ใช้ไม่จำเป็นต้องกรอกข้อมูลใดๆ ในหน้า profile เพิ่มเติมเองเลย ทำให้ facebook มีข้อมูลความสนใจของผู้ใช้ที่เกิดจากการใช้งานจริงเพิ่มขึ้นอีกมาก
3. การใช้งาน content หรือตรวจสอบว่าเป็น content ที่มีคุณภาพหรือไม่ ผู้ใช้จะดูจากจำนวน Friend ว่ามีใครมา Like บ้าง ทำให้ content ที่มีคุณภาพในมุมมองของผู้ใช้แต่ละคนแตกต่างกันโดยสิ้นเชิง เช่น นาย A เข้ามาแล้วมี Friend กด Like จำนวน 200 คนนาย A จะคิดว่า content ในหน้านี้ดีมาก ในขณะที่นาย C เข้ามาแล้วพบว่ามี Friend กด Like เพียง 5 คน นาย C อาจจะออกจากหน้านี้ไปโดยไม่ทันได้อ่านเนื้อหาเลยก็ได้เนื่องจากตัดสินตามจำนวนเพื่อนที่เห็น จะเห็นว่าข้อมูลในหน้าหนึ่งๆ สามารถโด่งดังได้หลากหลายกลุ่มมาก แต่ก็ไม่ใช่ทุกกลุ่มที่จะดัง การกรองข้อมูลด้วยคนใช้จริงที่เป็น Friend กด Like จึงเป็นรูปแบบใหม่ในการวัดคุณภาพ content เลยทีเดียว
4. จาก Open Graph API ได้ข้อมูล keyword จากเว็บ content จำนวนมากที่นำปุ่ม Like ไปติด ส่งต่อข้อมูลให้ Graph API เรียกไปใช้ต่อได้ และสุดท้ายคือแสดงข้อมูลด้วย Social Plugin ค่อนข้างครบวงจรเลยทีเดียวครับ

แล้ว Facebook จะมาครองอินเตอร์เนตแทนที่ Google ได้อย่างไร?

ขอแยกประเด็นเป็นข้อๆ ดังนี้ครับ

1. Product หลักของ Google คือ Search Engine ถูกไหมครับ แต่จะเกิดอะไรขึ้นถ้าการ search นั้นถูกอ้างอิงโดยสิ่งที่ผู้ใช้คนนั้นสนใจอยู่? และยิ่ง facebook รุกออกนอกกำแพงภายในเว็บตัวเองออกไปเว็บไซต์ใดๆ แล้ว การ search จะยิ่งมีคุณภาพมากขึ้น ผลลัพธ์การค้นหาที่เกี่ยวข้องกับความสนใจของผู้ใช้ที่ผ่านมาจะปรากฏขึ้นเป็นอันดับแรกๆ ทำให้ได้ข้อมูลที่แม่นยำกว่าเดิมมาก อีกทั้งเมื่อพบข้อมูลสินค้าใดๆ แล้วยังสามารถระบุข้อมูลตำแหน่ง และสถานที่ติดต่อได้ทันที ตามที่ผมกล่าวไว้ใน Open Graph API
2. มาพูดในแง่การหารายได้กันบ้าง รายได้หลัก Google มาจาก AdWord และ Adsense แต่ทว่าทุกวันนี้ Facebook Ads เป็นอะไรที่มีคุณภาพกว่า AdWord มากหลายเท่า เนื่องจากระบุกลุ่มเป้าหมายได้ละเอียดตั้งแต่เพศ อายุ ประเทศ ไปจนถึงความสนใจ และเมื่อ Facebook ปูทางไว้แล้วด้วย Social Plugin ต่างๆ ที่ติดตามเว็บไซต์กระจายตัวมากขึ้นไปทั่ว อีกหน่อยการจะทำโฆษณาแบบ Adsense ไปติดตามเว็บที่มี Social Plugin ก็ไม่ใช่เรื่องยาก แถมยัง target ได้ตรงกว่า AdWord หลายเท่าอีกด้วย แล้วยังมีการกด Like ของเพื่อนๆ เข้ามาตรงส่วนโฆษณาอีกต่างหาก พูดง่ายๆ ว่า AdWord ดูกระจอกไปเลยในทันที
3. Google คงจะพอรู้ตัวว่าสู้ Facebook ลำบาก เลยพยายามดัน Google Buzz ที่เป็น Social Network ออกมา เพื่อจะอาศัยประโยชน์ข้อเดียวกับ Facebook แต่ปรากฏว่ากลุ่มผู้ใช้ยังคงอยู่ในวงแคบ (ใน Gmail) เท่านั้น
4. ความ Real Time ของข่าวสารก็เป็นอีกปัจจัยหนึ่งที่ Google สู้ Social Network ไม่ได้ทั้ง Twitter และ Facebook เนื่องจาก content ที่โพสต์โดยผู้ใช้ย่อมไวกว่ารอ bot ไปวิ่งเก็บตามที่ต่างๆ มารวมกันแน่นอน แม้ว่า Google จะเพิ่ม Social Search แต่แน่นอนนั่นไม่ใช่ข้อมูลของ Google เอง แล้ว Google จะอยู่ได้อย่างไร!

สรุปได้ง่ายๆ ว่าหมัดเด็ดของ Google ที่อยู่ยืนยงมานานนับสิบปี ตอนนี้กำลังจะโดนตีตลาดแล้วอย่างแน่นอน Search Engine ที่โดน Bing เข้าตีแต่ยังไม่ประสบความสำเร็จ อาจจะโดน Facebook ตีชนะไปเสียก่อนในเร็ววันนี้ แหล่งรายได้หลักจากโฆษณาที่แทรกอยู่ในบริการของ Google เมื่อ Facebook กระจาย Facebook Ads ไปตามเว็บต่างๆ เมื่อไรก็เสร็จ แม้แต่ Google Docs ยังโดน docs.com ที่เป็นความร่วมมือของ facebook กับทาง microsoft เข้าแข่งด้วยหัวใจหลักของ Google โดนตีพังเสียหายหมด หนทางรอดของ Google ตอนนี้ สงสัยว่าคงจะอยุ่ที่ Android ที่ Google กระจายตัวสู่ตลาดได้ดีมากเพียงอย่างเดียวแล้วกระมัง

เหตุการณ์จะเป็นเช่นไร คงต้องรอดูสถานการณ์ต่อไปละครับ