วิธีสร้าง Digg Style Sharing ด้วย jQuery

สอนทำบล็อก

หลายคนที่ทำบล็อกมานานก็คงจะรู้จัก Digg เว็บที่เป็นแหล่งหรือสถานที่สำหรับแบ่งปันเรื่องราวดี ๆ มีประโยชน์ให้คนอื่นได้อ่าน และอีกนัยหนึ่งก็คือ สามารถช่วยให้คุณช่วยโปรโมทบล็อกและบทความของคุณให้เป็นที่รู้จักและเรียกคนอ่านเข้ามาชมบล็อกคุณมากขึ้นได้ด้วย สำหรับรายละเอียดผมก็จะกล่าวถึงอีกครั้งในบทความชุด เรื่องการโปรโมทบล็อก (ตอนนี้พยายามเรียบเรียงอยู่ครับ) หากสนใจข้อมูลเพิ่มเติมก็สามารถศึกษาได้ ที่นี่

บทความนี้ก็จะยืม Style และหลักการแบ่งปันบทความ Link หรือ ภาพในบล็อกของคุณ ของเว็บ digg มาใช้ร่วมกับการทำงานของ jQuery

สำหรับตัวอย่างผลงานของบทความนี้สามารถดูได้ที่ลิงค์ด้านล่างครับ






ขั้นตอนการติดตั้ง



ก่อนอื่นหากกลัวความผิดพลาดก็ Backup แม่แบบเอาไว้ก่อน ดูวิธีทำ  >> ที่นี่



ขั้นที่ 1 ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML (ไม่ต้องขยายแม่แบบเครื่องมือ)



image 



ค้นหาโค้ด ]]></b:skin> แล้ววางโค้ดต่อไปนี้ไว้ก่อนหน้าโค้ดดังกล่าว



#shareit-box {position:absolute;display:none;}
#shareit-header {width:138px;}
#shareit-body {width:138px; height:100px;background:url(http://upic.me/i/70/shareit.png);}
#shareit-blank {height:20px;}
#shareit-url {height:50px;text-align:center;}
#shareit-url input.field{width:100px; height:26px;background: transparent url(http://upic.me/i/7b/field.gif) no-repeat;
border:none; outline:none;padding:7px 5px 0 5px;margin:3px auto;font-size:11px;}
#shareit-icon  {height:20px;}
#shareit-icon ul {list-style:none;width:130px;margin:0; padding:0 0 0 8px;}
#shareit-icon ul  li{float:left;padding:0 2px;}
#shareit-icon ul  li img{border:none;}






ขั้นที่ 2 ต่อเนื่องจากขั้นที่ 1 ค้นหาโค้ด </head> อีกครั้ง แล้ววางโค้ดต่อไปนี้ไว้ก่อนหน้าโค้ดดังกล่าว จากนั้นบันทึกแม่แบบได้เลยครับ

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function () {
    $('#toggle-view li').click(function () {
        var text = $(this).children('p');
        if (text.is(':hidden')) {
            text.slideDown('200');
            $(this).children('span').html('-');       
        } else {
            text.slideUp('200');
            $(this).children('span').html('+');       
        }
    });
});
</script>





ขั้นทึ่ 3 เป็นการเพิ่ม gadget ทำโดย ไปที่ องค์ประกอบของหน้า >> เพิ่ม Gadget ชนิด HTML/จาวาสคริปต์ ในตำแหน่งใดก็ได้เพราะโค้ดที่เพิ่มจะไม่แสดงผลให้เห็น

image

วางโค้ดต่อไปนี้ลงไปและบันทึกครับ

<div id="shareit-box">
<div id="shareit-header"></div>
<div id="shareit-body">
<div id="shareit-blank"></div>
<div id="shareit-url"><input type="text" value="" name="shareit-field" id="shareit-field" class="field"/></div>
<div id="shareit-icon">
<ul>
<li><a href="#" rel="shareit-mail" class="shareit-sm"><img src="http://upic.me/i/1y/sm_mail.gif" width="16" height="16" alt="Mail" title="Mail" /></a></li>
<li><a href="#" rel="shareit-delicious" class="shareit-sm"><img src="http://upic.me/i/5z/sm_delicious.gif" width="16" height="16" alt="Delicious" title="Delicious" /></a></li>
<li><a href="#" rel="shareit-facebook" class="shareit-sm"><img src="http://upic.me/i/l8/facebook_16.png" width="16" height="16" alt="facebook" title="facebook" /></a></li>
<li><a href="#" rel="shareit-digg" class="shareit-sm"><img src="http://upic.me/i/5j/sm_digg.gif" width="16" height="16" alt="Digg" title="Digg" /></a></li>
<li><a href="#" rel="shareit-stumbleupon" class="shareit-sm"><img src="http://upic.me/i/s6/sm_stumbleupon.gif" width="16" height="16" alt="StumbleUpon" title="StumbleUpon" /></a></li>
<li><a href="#" rel="shareit-twitter" class="shareit-sm"><img src="http://upic.me/i/1w/sm_twitter.gif" width="16" height="16" alt="Twitter" title="Twitter" /></a></li>
</ul>
</div>
</div>
</div>


โค้ดสีแดงเป็นรูปภาพที่ผมฝากไว้กับ upic.me ถ้าเป็นไปได้อยากให้ทุกคนดาวน์โหลดมา backup เอาไว้ด้วย (เผื่อทาง server เขาจะเคลียร์รูปทิ้ง)




ขั้นที่ 4 เมื่อทำทั้ง 3 ขั้นจบแล้วก็ถือว่าเราติดตั้งโค้ด เสร็จเรียบร้อย ในขั้นที่ 4 นี้จึงเป็นการเรียกใช้ ให้เกิด Pop up ขึ้นมาใน Link หรือ รูปภาพ ที่เราต้องการจะให้มีการ Share ง่าย ๆ เช่น ถ้ารูปในบล็อคุณสวยงามมากก็เรียกใช้เฉพาะรูปนั้น รูปอื่น ๆ ก็ไม่ต้องครับ

เอาล่ะ วิธีเรียกใช้ทำโดย เติมโค้ด rel="shareit"  เข้าไปใน tag <a> ดังนี้


ตัวอย่างการใส่โค้ดลงไปในรูปภาพ

<a rel="shareit" href="http://hackublog.blogspot.com" title="Hackublog"><img alt="Blogger Trips and Tricks" width="100" src="http://upic.me/i/5q/mybuttom.png"/></a>

ตัวอย่างการใส่โค้ดลงไปในข้อความที่เป็น Link

<a rel="shareit" href="http://hackublog.blogspot.com" title="Hackublog> แบ่งปันฉันเลย : ) </a>

ลองดัดแปลงใช้กันดูครับ โดยเฉพาะคนที่มีรูปภาพที่ต้องการเผยแพร่มาก ๆ ก็ควรนำเทคนิควิธีนี้ไปใช้อย่างยิ่งครับ

หากมีข้อสงสัยประการใดโปรดสอบถามได้เลยครับ

เครดิตสคริปต์ : queness.com
Hack to Blogger : Hackublog

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

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

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

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