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

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

15
Jun11

update งวดนี้มาดูวิธีแปะปุ่ม Like , Share แล้วก็ Re-tweet บนเว็บไซต์กันดีกว่า โดย api ของปุ่ม Like และ Share นั้นจะเป็นของทาง Facebook เอง ส่วนปุ่ม Re-tweet นั้นจะมาจากเว็บ tweetmeme ครับ

<html>

<head>

<title>How to add facebook b8%9c-dxt-a9 facebook share, twitter retweet -dxt-a to your website.</title>

</head>

<body>

<a name=”fb_share” share_url=”http://heha.levelup.in.th/test_social_share.php?d=6″ type=”-dxt-a_count” href=”http://www.facebook.com/sharer.php”>Share</a>

function insertSocialShare() {

if (document.getElementById(“rt_box”) && document.getElementById(“b8%9_box”)) {

var shareUrl = escape(document.URL+’?d=6′);

var username = “lvup_rtbot”;

var iframeCode = “<iframe src=\”http://api.tweetmeme.com/bdxt-a.js?url=” + shareUrl + “&style=compact&source=”+ username +”&service=bit.ly\” scrolling=\”no\” frameborder=\”0\” width=\”90\” height=\”20\” ></iframe>”;

var iframeCode2 = “<iframe src=\”http:\/\/www.facebook.com\/plugins\/like.php?href=”+ shareUrl +”&layout=standard&show_faces=false&width=450&action=like&colorscheme=light&height=35\” scrolling=\”no\” frameborder=\”0\” style=\”border:none; overflow:hidden; width:450px; height:35px;\” allowTransparency=\”true\”><\/iframe>”;

document.getElementById(“rt_box”).innerHTML = iframeCode;

document.getElementById(“b8%9_box”).innerHTML = iframeCode2;

}

function XBrowserAddHandler(target,eventName,handlerName)

{

if ( target.addEventListener )

target.addEventListener(eventName, handlerName9 false);

else if ( target.attachEvent )

target.attachEvent(“on” + eventName, handlerName);

else

target["on" + eventName] = handlerName;

}

XBrowserAddHandler(window, ‘load’, insertSocialShare);

</script>

</body>

</html>

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

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

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

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

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

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

Enjoy this article?

Consider subscribing to our RSS feed!

Tagged as: facebook, social network, social plugin, twitter

11 ความเห็น

Mooneung
22:55 on July 1st, 2010
ใส่code ที่ไหนค่ะ??
GN
15:44 on August 20th, 2010
เยี่ยมเลยครับบทความ
jiba
15:47 on November 11th, 2010
ขอบคุณมาก ๆ นะคะ
มีประโยชน์มากเลย ^^
มันเยี่ยมจริง
13:18 on March 21st, 2011
มันเยี่ยมจริง
Buntom
22:58 on April 24th, 2011
ยอดมากเลยครับ กำลังหาอยู่พอดีเลยครับ
code father
14:35 on June 9th, 2011
ขอบคุณมาก ๆ ครับ กำลังหาอยู่พอดีเลย
กาณ
14:52 on June 29th, 2011
ถา้มีการแก้ไขข้อมูล ค่า b8%9cเดิมจะหายหรือป่าวคะ
อัมพวา
15:59 on September 6th, 2011
ขอบคุณครับ กำลังหาพอดีเลยครับ
kritbovorn
01:19 on August 5th, 2012
ขอบคุณมากนะครับ
CABAL
04:13 on August 26th, 2013
ขอบคุณสำหรับ บทความดีๆ ครับ กำลัง หาอยู่เลย
มายคราฟ
02:48 on October 17th, 2014
ถา้มีการแก้ไขข้อมูล ค่า b8%9cเดิมจะหายหรือป่าวคะ

Recent Comments

Recent Posts

11 ความเห็น

ใส่ความเห็น

Who are we?

Contact Us

หมวดหมู่

ป้ายกำกับ

บันทึกเก่า

Recent Comments

Recent Posts