4 Share Count button for Blogger

ก่อนหน้านี้ผมได้นำเสนอบทความ วิธี ใส่ Social bookmark icon สวยๆ ใต้ทุกบทความ ซึ่งมีเป้าหมายเพื่อให้ผู้เยี่ยมชมได้แบ่งปันบทความดี ๆ บนบล็อกของคุณต่อให้คนอื่นทราบ และรู้จักผลงานของคุณในวงกว้างและแพร่กระจายได้อย่างรวดเร็ว ซึ่งเป็นผลดีในเรื่อง Traffic ตามมาด้วย

สอนทำบล็อก และสอนการทำ google adsense  

บทความนี้ผมขอนำเสนอการติดตั้งปุ่ม 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 = &#39;<data:post.url/>&#39;; </script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>


 สอนทำ blogger
Zickr! โหวต
<script>zickr_url=&#39;<data:post.url/>&#39;;</script>
<script language="javascript" src="http://api.zickr.com/button.js"/>


Share button
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=&#39;<data:post.url/>&#39;;</script>
<script language="javascript" src="http://api.zickr.com/button.js"/>
</div>


และหากต้องการให้อยู่ตรงกลางให้เติมโค้ดดังนี้

<div align=‘center’ >
<script type='text/javascript'> tweetmeme_url = &#39;<data:post.url/>&#39;; </script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>


หรือ
<center>
<script type='text/javascript'> tweetmeme_url = &#39;<data:post.url/>&#39;; </script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</center>





วิธีติดตั้ง

Log in เข้าไปที่ blogger >>  ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> และเลือกขยายแม่แบบเครื่องมือ


สอนทำ blogspot

กรณีที่ 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=&#39;<data:post.url/>&#39;;</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 = &#39;<data:post.url/>&#39;; </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 ด้านล่างบทความนี้ ขอบคุณครับ

ตอนนี้มีความคิดเห็น : 10 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. มันแชร์ครับ แต่มันดันแชร์ blog เรา ไม่ได้แชร์บทความ

  1. ได้ล่ะครับ -*- มันต้องเข้าไปในบทความก่อนนั่นเอง

  1. @ Chainarong Wanachaisong : OK ครับ

  1. ทำไมของ facebook มันไม่โชว์เลขล่ะครับทั้งๆที่ตอนสร้าง button ใน facebook ผมก็เลือกเป็น Above Button และ preview ดูก่อนแล้วนะ แต่พอดูในหน้าบทความนั้นๆปุ่มแชร์ของ facebook กลับไม่โชว์เลข ต้องคลิกดูก่อนจึงจะเห้นอ่ะครับ ทำไงให้มันโชว์ http://nun-gfx.blogspot.com/2010/08/nukex-61-3d-compositing-test.html คุณ Hacku เห้นเลขมั้ยครับ ผมเห็นแต่ของ twitter นะ

  1. <div style='float:right;padding-left:5px;'>
    <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
    </div>


    ตามนี้อ่ะครับ box_count เห้นกันจะๆ -*- งง ทำไมไม่ขึ้น

  1. @ Chainarong ลองตั้งค่าเวลาสร้างปุ่มใหม่ สร้างปุ่ม แบ่งปัน (Facebook Share) ที่นี่ครับ
    http://www.facebook.com/share/

  1. ลองกดแบ่งปันแล้วทำไมข้อความเป็นภาษาอะไรก็ไม่รู้คะมีวิธีแก้ไหมคะ

  1. @ นิจสิรี พุทธศรี : จาวาสคริปต์ยังไม่รองรับภาษาไทยครับ ต้องก็แก้ด้วยเราเองอีกครั้งครับ

  1. ขอบคุณค่ะ

  1. ความคิดเห็นนี้ถูกผู้เขียนลบ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel