การติดตั้ง Related Posts โดยใช้ Script จาก brps.appspot.com

ในบทความที่แล้วเราได้เขียนถึง การใส่ Related Posts ให้กับบล็อกด้วย Linkwithin ไปแล้ว ซึ่งเป็นอีกวิธีที่ง่ายมากๆ ไม่มีข้อห้ามจุกจิก วันนี้เราจะเขียนถึง การใส่ Related Posts ให้กับบล็อก โดยใช้ Script จาก brps.appspot.com ซึ่งเป็นอีกหนึ่งวิธีง่ายๆ ที่หลายคนนิยม เพราะสามารถ Add Widget ก็ได้ แต่จะเป็นการใส่ Related Posts ที่ Sidebar (แถบด้านข้าง) ปกติแล้ว Related Post จะอยู่ใต้บทความ แต่ในกรณีนี้ มันจะอยู่ที่ด้านข้างแทน แต่ถ้าใครไม่ชอบก็สามารถนำโค๊ดไปใส่เอง ซึ่งอย่างหลังเราจะสามารถระบุตำแหน่งที่จะให้แสดง Related Posts ได้ถูกใจกว่า เช่น ใส่ไว้ใต้บทความ เป็นต้น

การแสดงผลของ brps จะเป็นในรูปแบบ หัวข้อบทความ ต่อให้บทความของเรามีรูปภาพ Related Posts ที่ได้ ก็จะเป็นหัวข้อบทความเท่านั้น หลายคนจะชอบแบบนี้มากกว่า ซึ่งจะต่างกับ Related Posts ของ Linkwithin

แต่ด้วยความที่ว่า เป็น Script ฟรี ผู้เขียนจึงค่อนข้างเข้มงวดนิดนึง จึงมีกฏและข้อห้ามอยู่หลายข้อเหมือนกัน สรุปได้ดังนี้

1. บล็อกมีเนื้อหาเป็นแหล่งแจกจ่าย ดาวโหลด ของที่มีลิขสิทธิ์
2. เป็นบล็อก Hate Club เช่น ตั้งชมรมเกลียดใครมันซักคน หรือ ต่อต่านอะไรแบบนี้
3. บล็อกมีเนื้อหารุนแรง
4. โป้ ลามก หึหึ
5. บล็อกหาเงิน เช่น ทำบล็อก Amazon Associate หรืออื่นๆ ที่คล้ายๆกัน (ไม่เกี่ยวกับทำบล็อกบทความ แล้วติด AdSense นะ)
6. บล็อกมีจำนวนโพสน้อยกว่า 20 โพส ในส่วนนี้ก็แค่มีโพสมากกว่า 20โพส ก็ใช้ได้ละ
7. มีเนื้อหาที่ไปก็อบบทความคนอื่นเค้ามาอีกที

หากบล็อกของเพื่อนๆเข้าข่ายข้อห้าม ดังกล่าว ก็จะโดนบล็อกอัตโนมัติ โดยจะมีข้อความขึ้นว่า

This blog is blocked from using Blogger Related Posts Service. If you are the blog owner and believe this blocking is a mistake, please contact the author of BRPS.

Installation

วิธีการติดตั้ง แบบ Add Widget ที่ Sidebar (แถบด้านข้าง)

1) ไปที่ http://brps.appspot.com/getkey ในส่วนของ Get The Key ให้กรอก URL บล็อกของเราที่ช่อง Your blog address : 

2) เมื่อได้รับโค๊ดแล้ว ตรง Add Sidebar Widget  ให้กดที่รูป Add to Blogger จากนั้นก็จะเป็นการ Add widget ที่ Blogger (คลิกที่รูปเพื่อขยาย)

วิธีติดตั้ง  Related Posts ใต้บทความ

1) ไปที่ http://brps.appspot.com/getkey  ในส่วนของ Get The Key ให้กรอก URL บล็อกของเราที่ช่อง Your blog address :

2) จากนั้นเราก็จะได้รับโค๊ด ซึ่งโค๊ดนี้จะใช้ได้กับบล็อกที่เราสมัครเท่านั้น

3) ล็อกอินเข้าสู่ Blogger ของเรา ไปที่หน้า Design > Edit HTML  อย่าลืมกด Backup ไว้ก่อน ( วิธี Backup / Restore Template )  กดติ๊กถูกที่ช่อง Expand Widget Templates เพื่อเป็นการโชว์โค๊ดทั้งหมดที่มี

3) มองหาโค๊ดนี้  <div class='post-footer-line post-footer-line-3'/> (กด Ctrl+F แล้วพิมพ์โค๊ดเพื่อหา) จะเป็นการใส่ Related Posts ใต้บทความ ซึ่งโดยปกติ post-footer-line-3 จะเป็นบรรทัดล่างสุดก่อนถึงส่วนที่เป็นกล่องคอมเม้นท์ แต่ถ้าเรารู้สึกว่า ตำแหน่งนี้มันอยู่ต่ำเกินไป เราอาจเปลี่ยนเป็น <div class='post-footer-line post-footer-line-2'/> แทนก็ได้ แต่ในที่นี้เราจะใช้ line-3

ตัวอย่าง

<div class='post-footer-line post-footer-line-3'/>
</div></div>
</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div> <div id='related_posts'/>
<div style='clear: both;'/>
</b:if>
</b:includable>

จะเห็นว่า <div class='post-footer-line post-footer-line-3'/> จะต่อด้วยโค๊ดอีกจำนวนนึงแล้วก็ปิดด้วย </div> ให้ใส่ <div id='related_posts'/> ต่อท้าย

ทีนี้บางคนอาจจะสงสัยว่า ไอ </div> มันมีตั้งหลายตัว แล้วจะรู้ได้ไงว่า จะต้องวางโค๊ดต่อท้ายที่ตัวไหน นี่คือเหตุผลที่ว่าทำไมเราควรจะทำ Backup Template ไว้ก่อน เพราะทำหรับคนที่ไม่รู้จริงๆ คงไม่มีวิธีไหนนอกจากการเดา และลอง เพราะฉะนั้น บางทีการทดลองก็มีผิดพลาดกันได้

4) ไปที่ </body></html> มันคือ โค๊ดที่อยู่บรรทัดสุดท้ายเลย หาไม่ยาก ใส่โค๊ดเข้าไปก่อนหน้า </body></html> จะได้เป็น

<script src='http://www.google.com/jsapi'/>
<script src='http://brps.appspot.com/brps.js?key=YOUR KEY'type='text/javascript'/>
</body>
</html> 

โค๊ดนี้ก็ไม่ได้มาจากที่ไหน มันคือโค๊ดที่ได้จากตอนสมัครนั้นแหละ และตัวสีแดงคือ Key ที่เราได้จากการสมัครในขั้นตอนแรกอีกเหมือนกัน ของใครของมันไม่เหมือนกันนะ

5) กด PREVIEW ดูเสียหน่อย ถ้าไม่มีอะไรผิดพลาด ไม่ Error ก็กด SAVE ได้ เป็นอันเสร็จพิธี และด้านล่างคือตัวอย่างผลลัพธ์ที่ได้

จริงๆแล้ว หลังจากที่เราสมัครเพื่อรับโค๊ดทางเว็ป มันก็จะมีขั้นตอน วิธีการติดตั้งมาให้แล้วนะแหละ จะอ่านจากตรงนั้นก็ได้ แต่จากการทดสอบ ถ้านำโค๊ตตรงนั้นมาใช้เลยจะเซฟไม่ได้ เพราะว่า

<script src=&apos;http://www.google.com/jsapi&apos;/>
<script src= &apos; http://brps.appspot.com/brps.js?key=YOUR KEY&apos; type=&apos;text/javascript&apos;/>

โค๊ตที่ให้มันจะมี ไอตัวสีแดง มันทำให้เซฟไม่ผ่าน เราต้องเปลี่ยนจาก &apos; เป็น '  ซึ่งจริงๆมันก็คือตัวเดียวกัน

Customization

การปรับแต่ง สามารถทำได้ ง่ายๆ จะขอยกตัวอย่างที่สำคัญๆ เช่น

1) การ เปลี่ยน Widget Title หรือ เปลี่ยนจากคำว่า Related Posts เป็นอย่างอื่น เช่น อาจจะเปลี่ยนเป็นภาษาไทยว่า "บทความที่เกี่ยวข้อง"

โค๊ด แต่เดิมที่เราได้รับ ก็คือ

<script src='http://www.google.com/jsapi'></script>
<script src='http://brps.appspot.com/brps.js?key=YOUR KEY' type='text/javascript'/>
</body>
</html>

ทีนี้ถ้าเราจะเปลี่ยน Title เป็นอย่างอื่น เราต้องเพิ่มโค๊ตเข้าไปอีกจะได้เป็น

<script src='http://www.google.com/jsapi'></script>
<script type="text/javascript">
window.brps_options = {
"title": "<h2>บทความที่เกี่ยวข้อง</h2>"
}
</script>
<script src='http://brps.appspot.com/brps.js?key=YOUR KEY' type='text/javascript'/>
</body>
</html>

สีแดงคือโค๊ตส่วนที่เพิ่มขึ้นมา

2) การกำหนดจำนวน Related Posts ถ้าเราไม่ได้กำหนดจำนวน Related Posts ไว้ ระบบก็จะโชว์ Related Posts จำนวน 10 ลิงค์ ทีนี้ถ้าหากเราต้องการให้มันโชว์ แค่ 5 ลิงค์พอ ก็สามารถทำได้

โค๊ด แต่เดิมที่เราได้รับ ก็คือ

<script src='http://www.google.com/jsapi'></script>
<script src='http://brps.appspot.com/brps.js?key=YOUR KEY' type='text/javascript'/>
</body>
</html>

กำหนดจำนวน Related Posts

<script src='http://www.google.com/jsapi'></script>
<script type="text/javascript">
window.brps_options = {
"max_results": 5
}
</script>
<script src='http://brps.appspot.com/brps.js?key=YOUR KEY' type='text/javascript'/>
}}}' type='text/javascript'/>
</body>
</html>

ตัวสีแดงคือโค๊ตส่วนที่เพิ่มเข้ามา เลข 5 คือ จำนวน Related Posts เชิญแก้ตามใจชอบ