วิธีติดตั้ง Addthis Sharebar บน Blogger

บทความนี้ผมขอแนะนำ Toolbar จาก Addthis ซึ่งเป็นที่รู้จักกันดีว่าเป็นเว็บไซต์ที่ให้บริการ Submit บล็อก/เว็บ หรือบทความไปยังบริการ Social Bookmark อีกต่อหนึ่ง

สอนทำบล็อก วิธีสร้างบล็อก

ปกติแล้วรูปแบบของเครื่องมือที่ช่วยในการ Share บทความจะอยู่ในรูปของปุ่ม ซึ่งข้อเสียของปุ่มคือ จะปรากฎเฉพาะตำแหน่งที่ติดตั้งเท่านั้น แต่ถ้าเราใช้รูปแบบ Toolbar ที่พัฒนาโดย Addthis ที่นำเสนอในบทความนี้ติดตั้งลงไป Toolbar จะปรากฎอยู่ด้านล่างของทุก ๆ หน้าไม่ว่าจะมีการเลื่อนตำแหน่งของหน้าขึ้นด้านบนหรือลงด้านล่าง จึงจะช่วยให้ผู้อ่าน Share บทความ/บล็อก ของคุณได้สะดวกมากขึ้น


วิธีติดตั้ง Addthis Sharebar

ขั้นที่ 1 สมัครสมาชิก
ให้คุณเข้าไปที่

http://www.addthis.com/labs/sharebar
วิธีทำ blogger วิธีแต่ง blogspot

และคลิกที่ Join Now เพื่อสมัครสมาชิก

ทำ blogger แต่ง blogger


ขั้นที่ 2 สร้างโค้ดของ Addthis Sharebar

โค้ดที่ใช้ในการติดตั้ง Addthis Sharebar คือ
<script src="http://sharebar.addthiscdn.com/v1/sharebar.js" type="text/javascript"></script>

<div class="addthis_sharebar_config" style="display:none;">
* username: your AddThis username 
</div>
ซึ่งคุณสามารถจะต้องแทนที่ your AddThis username ด้วย Username ที่คุณใช้สมัครกับ Addthis


ขั้นที่ 3 ติดตั้งโค้ดบน Blogger

Login เข้าไปที่ blogger.com >> เลือกเมนูการออกแบบ >> แก้ไข HTML

จากนั้นค้นหาโค้ด </body> ซึ่งจะอยู่ท้ายสุดของหน้า และเมื่อพบแล้วให้วางโค้ดในขั้นที่ 2 ลงไปก่อนหน้าโค้ด </body>

ตัวอย่างการวางโค้ด
Socialbookmark+blogger+blogspot

ตัวอย่างผลลัพธ์ที่ได้
ทำ blogspot



ขั้นที่ 4 การปรับแต่งโค้ด
โค้ดของ Addthis Sharebar สามารถปรับแต่งได้(คุณจะไม่ปรับก็ได้) โดยคุณสามารถดูรายละเอียดได้จาก
http://www.addthis.com/labs/sharebar#docs
ตัวอย่างโค้ดที่ผมได้ปรับแต่งและใช้ติดตั้งในบล็อกนี้
<script src='http://sharebar.addthiscdn.com/v1/sharebar.js' type='text/javascript'/>
<div class='addthis_sharebar_config' style='display:none;'>
* username: hackublog
* layout: bar
* option name: hackublog
* bar background color: #333333
* bar background opacity: 0.4
* default services:email, favorites, facebook, twitter, delicious, digg, myspace, live, stumbleupon,  reddit, technorati, buzz, squidoo
* disable personalization
* search domain: hackublog.blogspot.com
* search url: http://hackublog.blogspot.com/search?q=
* search label: Search on hackublog
* max services:15

</div>
ตัวอย่างผลัพธ์ที่ได้จากการใช้โค้ดข้างบน
สอน blogger


ถ้าชอบก็ลองหยิบมาใช้งานกัน สำหรับผมคิดว่ามีประโยชน์มากครับ เพราะอย่างน้อยผมก็ Submit บทความที่เขียนไปยัง Social Bookmark ได้สะดวกและง่ายดายมากขึ้นครับ  สวัสดีครับ

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

  1. wibiya ดูสวยกว่ามากเลยครับ แถมแสดงวีดีโอyoutubeของเราได้แจ่มมากๆ

  1. สำหรับ wibiya ผมได้นำเสนอไปแล้วในบทความ http://www.hackublog.com/2010/03/2-toolbar-gagdget-wibiya-gfc.html บทความนี้ผมก็เสนอเป็นทางเลือกเท่านั้นครับคนที่คิดไม่เหมือนคุณ Kingrpg ก็อาจจะชอบเพราะตรงจุดประสงค์ในการใช้งานมากกว่าครับ

  1. พี่พี่ อยากทำแบบพี่อ่ะครับ ที่เอาเม้าส์ไปวางที่รูปแล้ว ขึ้นว่า click here to share ผมหาไม่เจอเลย
    ขอบคุณล่วงหน้าครับ

  1. ปล็อกของผม ทำตามที่พี่สอน ได้แค่นี้เอง ต้องเพิ่มอะไรให้เจ๋งๆ อีกรึป่าวครับ แนะนำด้วยครับ
    http://kookkalicious.blogspot.com/

  1. 1. คำถามแรกน้อง Kook ต้องติดตั้ง Wibiya Toolbar ครับ
    http://www.hackublog.com/2010/03/2-toolbar-gagdget-wibiya-gfc.html
    แล้ว Add บริการ Share เข้ามาใน Toolbar ด้วย

    2. บล็อกสวยแล้วต้องหาคนมาอ่านบล็อกครับ นั่นคือทำ SEO ศึกษาเพิ่มครับ

    ปล.ไม่ จำเป็นก็อย่ายัดเยียดอะไรลงไปมากครับ บล็อกมันจะหนัก โหลดช้า ค้นหาไม่ค่อยเจอ

  1. สวัสดีครับ ผมก็ทำอยู่ดีมากๆครับ

    http://haturagitd.blogspot.com/

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

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

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