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

15
Jun8

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

Social Share

<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 + “&amp;style=compact&amp;source=”+ username +”&amp;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 +”&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;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 เป็นอะไรก็ได้ที่ไม่ซ้ำเดิมเอาครับ

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

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

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

Share

Enjoy this article?

Consider subscribing to our RSS feed!

Tagged as: , , ,
8 ความเห็น

8 ความเห็น

  1. Mooneung
    22:55 on July 1st, 2010

    ใส่code ที่ไหนค่ะ??

  2. GN
    15:44 on August 20th, 2010

    เยี่ยมเลยครับบทความ

  3. jiba
    15:47 on November 11th, 2010

    ขอบคุณมาก ๆ นะคะ
    มีประโยชน์มากเลย ^^

  4. มันเยี่ยมจริง
    13:18 on March 21st, 2011

    มันเยี่ยมจริง

  5. Buntom
    22:58 on April 24th, 2011

    ยอดมากเลยครับ กำลังหาอยู่พอดีเลยครับ

  6. code father
    14:35 on June 9th, 2011

    ขอบคุณมาก ๆ ครับ กำลังหาอยู่พอดีเลย

  7. กาณ
    14:52 on June 29th, 2011

    ถา้มีการแก้ไขข้อมูล ค่า like เดิมจะหายหรือป่าวคะ

  8. อัมพวา
    15:59 on September 6th, 2011

    ขอบคุณครับ กำลังหาพอดีเลยครับ

ใส่ความเห็น

RSS feed for comments on this post

Language

Who are we?

LevelUp! Studio aim to be the world-wide first-class web-based social gaming company.

Contact Us

contact (at) levelup.in.th

Our Work

หมวดหมู่

ป้ายกำกับ

บันทึกเก่า