ก่อนหน้านี้ผมได้นำเสนอบทความ วิธี ใส่ Social bookmark icon สวยๆ ใต้ทุกบทความ ซึ่งมีเป้าหมายเพื่อให้ผู้เยี่ยมชมได้แบ่งปันบทความดี ๆ บนบล็อกของคุณต่อให้คนอื่นทราบ และรู้จักผลงานของคุณในวงกว้างและแพร่กระจายได้อย่างรวดเร็ว ซึ่งเป็นผลดีในเรื่อง Traffic ตามมาด้วย
บทความนี้ผมขอนำเสนอการติดตั้งปุ่ม Social bookmark 4 ชนิด ที่สามารถนับจำนวนการ share ได้ ทำให้คุณทราบได้ว่าบทความของคุณน่าสนใจ หรือมีการบอกต่อๆ กันมากหรือน้อยเพียงใดด้วย ในที่นี้ Social bookmark ทั้ง 4 ชนิด นั้นได้แก่
1. Facebook count button ให้บริการโดย Facebook widget ซึ่งผู้ใช้งานจะต้องมีบัญชีของ facebook ด้วย
2. Retweet share button ให้บริการโดย tweetmeme.com ซึ่งผู้ใช้งานจะต้องมีบัญชีของ twetter ด้วย
3. Zickr! โหวต ให้บริการโดย zickr.com โดยบทความที่จะโหวตได้นั้นจะต้องถูก submit ไปที่ zickr ก่อน และ
4. Google Buzz share count button ให้บริการโดย njuice.com ซึ่งผู้ใช้งานจะต้องมีบัญชีของ Gmail หรือใช้บริการ G-reader ด้วย
โค้ดสำหรับติดตั้ง Share count button
Facebook count button
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">แบ่งปัน</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"/>
Retweet share button
<script type='text/javascript'> tweetmeme_url = '<data:post.url/>'; </script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
Zickr! โหวต
<script>zickr_url='<data:post.url/>';</script>
<script language="javascript" src="http://api.zickr.com/button.js"/>
Google Buzz
<script type='text/javascript'>
njuice_buzz_url = '<data:post.title/>';
njuice_buzz_title = '<data:post.url/>';
njuice_buzz_share = 'reader';
</script>
<script type='text/javascript' src='http://button.njuice.com/buzz.js'/>
การนำโค้ดไปใช้จะต้องมีการดัดแปลงโค้ดให้ตรงกับความต้องการของเราดังนี้
ถ้าต้องการให้ปุ่มชิดซ้ายก็ให้เติมโค้ดสีแดงเข้าไป เช่น
<div style='float:left;'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">แบ่งปัน</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"/>
</div>
ถ้าต้องการให้ปุ่มชิดขวาก็ให้เติมโค้ดสีแดงเข้าไป เช่น
<div style='float:right;'>
<script>zickr_url='<data:post.url/>';</script>
<script language="javascript" src="http://api.zickr.com/button.js"/>
</div>
และหากต้องการให้อยู่ตรงกลางให้เติมโค้ดดังนี้
<div align=‘center’ >
<script type='text/javascript'> tweetmeme_url = '<data:post.url/>'; </script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
หรือ
<center>
<script type='text/javascript'> tweetmeme_url = '<data:post.url/>'; </script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</center>
วิธีติดตั้ง
Log in เข้าไปที่ blogger >> ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> และเลือกขยายแม่แบบเครื่องมือ
กรณีที่ 1 หากต้องการติดตั้งไว้ใต้หัวเรื่องของบทความ
ให้ค้นหาโค้ด
<div class='post-body'>
แล้ววางโค้ดที่ต้องการถัดจากโค้ดดังกล่าว
หรือ อาจจะค้นหาโค้ด
<data:post.body/>
แล้ววางโค้ดที่ต้องการก่อนหน้าโค้ดดังกล่าว
กรณีที่ 2 หากต้องการติดตั้งไว้ใต้บทความ
ให้ค้นหาโค้ด
<div class='post-footer'>
หากไม่เจอโค้ดที่ว่าอาจจะค้นหาโค้ด
<p class='post-footer-line post-footer-line-1'>
หรือ
<div class='post-footer-line post-footer-line-1'>
ซึ่งขึ้นอยู่กับแต่ละ Templates จากนั้นให้วางโค้ดที่ต้องการก่อนหน้าจากโค้ดดังกล่าว
ตัวอย่างโค้ดในการวางทั้ง 4 ปุ่ม ให้ชิดซ้ายและเรียงต่อกัน
<div class='share-button'>
<div style='float:left;padding-left:5px;'>
<script>zickr_url='<data:post.url/>';</script>
<script language="javascript" src="http://api.zickr.com/button.js"/>
</div>
<div style='float:left;padding-left:5px;'>
<script type='text/javascript'> tweetmeme_url = '<data:post.url/>'; </script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<div style='float:left;padding-left:5px;'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">แบ่งปัน</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"/>
</div>
<div style='float:left;padding-left:5px;'>
<script type='text/javascript'>
njuice_buzz_url = '<data:post.title/>'; njuice_buzz_title = '<data:post.url/>'; njuice_buzz_share = 'reader'; </script> <script type='text/javascript' src='http://button.njuice.com/buzz.js'/> </div> </div> <div class='clear'/>
หากมีข้อสงสัยเกี่ยวกับขั้นตอนในบทความนี้ หรือสงสัยเกี่ยวกับการทำ blogger หรือ การใช้งานต่าง ๆ ของ blogger โปรดสอบถามเพิ่มเติมที่กล่อง Comment ด้านล่างบทความนี้ ขอบคุณครับ