ติดปุ่ม Like, Share และ Retweet บนเว็บไซต์ของคุณ by heha
Jun11
update งวดนี้มาดูวิธีแปะปุ่ม Like , Share แล้วก็ Re-tweet บนเว็บไซต์กันดีกว่า โดย api ของปุ่ม Like และ Share นั้นจะเป็นของทาง Facebook เอง ส่วนปุ่ม Re-tweet นั้นจะมาจากเว็บ tweetmeme ครับ
จาก 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
Enjoy this article?
Consider subscribing to our RSS feed!
11 ความเห็น
ใส่ความเห็น
Who are we?
Contact Us
หมวดหมู่
ป้ายกำกับ
บันทึกเก่า
- พฤษภาคม 2017
- กุมภาพันธ์ 2017
- มกราคม 2017
- ธันวาคม 2016
- พฤศจิกายน 2016
- ตุลาคม 2016
- กันยายน 2016
- สิงหาคม 2016
- กรกฎาคม 2016
- มิถุนายน 2016
- พฤษภาคม 2016
- เมษายน 2016
- มีนาคม 2016
- กุมภาพันธ์ 2016
- มกราคม 2016
- ธันวาคม 2015
- พฤศจิกายน 2015
- ตุลาคม 2015
- กันยายน 2015
- สิงหาคม 2015
- กรกฎาคม 2015
- มิถุนายน 2015
- พฤษภาคม 2015
- เมษายน 2015
- มีนาคม 2015
- กุมภาพันธ์ 2015
- มกราคม 2015
- ธันวาคม 2014
- พฤศจิกายน 2014
- ตุลาคม 2014
- กันยายน 2014
- สิงหาคม 2014
- กรกฎาคม 2014
- มิถุนายน 2014
- พฤษภาคม 2014
- เมษายน 2014
- มีนาคม 2014
- กุมภาพันธ์ 2014
- มกราคม 2014
- ธันวาคม 2013
- พฤศจิกายน 2013
- ตุลาคม 2013
- กันยายน 2013
- สิงหาคม 2013
- กรกฎาคม 2013
- มิถุนายน 2013
- พฤษภาคม 2013
- เมษายน 2013
- มีนาคม 2013
- กุมภาพันธ์ 2013
- มกราคม 2013
- ธันวาคม 2012
- พฤศจิกายน 2012
- ตุลาคม 2012
- กันยายน 2012
- สิงหาคม 2012
- กรกฎาคม 2012
- มิถุนายน 2012
- พฤษภาคม 2012
- เมษายน 2012
- มีนาคม 2012
- กุมภาพันธ์ 2012
- มกราคม 2012
- ธันวาคม 2011
- พฤศจิกายน 2011
- ตุลาคม 2011
- กันยายน 2011
- กรกฎาคม 2011
- มิถุนายน 2011
- พฤษภาคม 2011
- เมษายน 2011
- มีนาคม 2011
- กุมภาพันธ์ 2011
- มกราคม 2011
- ธันวาคม 2010
- พฤศจิกายน 2010
- ตุลาคม 2010
- กันยายน 2010
- สิงหาคม 2010
- กรกฎาคม 2010
- มิถุนายน 2010
- พฤษภาคม 2010
- เมษายน 2010
- มีนาคม 2010
- กุมภาพันธ์ 2010
- มกราคม 2010
- ธันวาคม 2009
- พฤศจิกายน 2009
- ตุลาคม 2009
- กันยายน 2009
- สิงหาคม 2009
- กรกฎาคม 2009
- มิถุนายน 2009
- พฤษภาคม 2009
- มีนาคม 2009
22:55 on July 1st, 2010
ใส่code ที่ไหนค่ะ??
15:44 on August 20th, 2010
เยี่ยมเลยครับบทความ
15:47 on November 11th, 2010
ขอบคุณมาก ๆ นะคะ
มีประโยชน์มากเลย ^^
13:18 on March 21st, 2011
มันเยี่ยมจริง
22:58 on April 24th, 2011
ยอดมากเลยครับ กำลังหาอยู่พอดีเลยครับ
14:35 on June 9th, 2011
ขอบคุณมาก ๆ ครับ กำลังหาอยู่พอดีเลย
14:52 on June 29th, 2011
ถา้มีการแก้ไขข้อมูล ค่า like เดิมจะหายหรือป่าวคะ
15:59 on September 6th, 2011
ขอบคุณครับ กำลังหาพอดีเลยครับ
01:19 on August 5th, 2012
ขอบคุณมากนะครับ
04:13 on August 26th, 2013
ขอบคุณสำหรับ บทความดีๆ ครับ กำลัง หาอยู่เลย
02:48 on October 17th, 2014
ถา้มีการแก้ไขข้อมูล ค่า like เดิมจะหายหรือป่าวคะ