ติดปุ่ม Like, Share และ Retweet บนเว็บไซต์
<html>
<head>
<meta name=”title” content=”Levelup Studio Social Share Tips.” />
<meta name=”description” content=”How to add facebook like button, facebook share, twitter retweet button to your website.” />
<link rel=”image_src” href=”http://heha.levelup.in.th/blog/images/levelup.png” />
<meta name=”medium” content=”news” />
<title>How to add facebook like button, facebook share, twitter retweet button to your website.</title>
</head>
<body>
<a name=”fb_share” share_url=”http://heha.levelup.in.th/test_social_share.php?d=6″ type=”button_count” href=”http://www.facebook.com/sharer.php”>Share</a>
<div id=’rt_box’ style=’float: left’></div>
<div style=’clear: both’></div>
<div id=’like_box’></div>
<script type=’text/javascript’>
function insertSocialShare() {
if (document.getElementById(”rt_box”) && document.getElementById(”like_box”)) {
var shareUrl = escape(document.URL+’?d=6′);
var username = “lvup_rtbot”;
var iframeCode = “<iframe src=\”http://api.tweetmeme.com/button.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(”like_box”).innerHTML = iframeCode2;
}
}
function XBrowserAddHandler(target,eventName,handlerName)
{
if ( target.addEventListener )
target.addEventListener(eventName, handlerName, false);
else if ( target.attachEvent )
target.attachEvent(”on” + eventName, handlerName);
else
target["on" + eventName] = handlerName;
}
XBrowserAddHandler(window, ‘load’, insertSocialShare);
</script>
<script src=”http://static.ak.fbcdn.net/connect.php/js/FB.Share” type=”text/javascript”></script>
</body>
</html>
จาก 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 เป็นอะไรก็ได้ที่ไม่ซ้ำเดิม
Cr. …