สร้าง waiting page ให้รอสักครู่ ก่อนลิ้งค์ ไปเว็บอื่น ด้วย jQuery และ php
22 August 2010ในส่วนตัวไม่แน่ใจว่า การทำ waiting page จะมีประโยชน์ต่อการทำ seo หรือไม่อย่างไร เช่น
- ทำให้ผู้ใช้งานอยู่ในเว็บเรานานขึ้นอีกนิด หรือไม่อย่างไร
- ใช้เก็บสถิติเว็บที่ลิ้งค์ออกไปภายนอก เพื่อไว้ใฃ้งานข้อมูลหรือไม่อย่างไร
- ไว้แสดงโฆษณา ของ google หรือไม่อย่างไร
- ป้องกันการเก็บ keyword ของเว็บปลายทาง หรือไม่อย่างไร
.... อื่่นๆ
อย่างไรก็ตาม การทำ waiting page ควรมีลิ้งค์แสดงให้ผู้ใช้คลิกไปที่เว็บดังกล่าวไว้เป็นทางเลือก เพื่อไม่ให้ต้องรอจนครบตามเวลาที่เรากำหนดให้ทำการลิ้งค์ไปอัตโนมัติ
ตัวอย่าง
www.ninenik.com/demo/link_replace_page.php
เริ่มต้นการทำ waiting page1. กำหนดพื้นที่ของข้อมูล ที่ต้องการจัดรูปแบบ ลิ้งค์ ด้วย jQuery โดยการใช้แท็ก div และกำหนด class ให้กับส่วนของข้อมูลนั้น เช่น ข้อมูลแสดง
<p> สามารถหาความรู้ เพิ่มเติม เกี่ยวกับการใช้งาน jQuery ได้ที่เว็บไซต์ <a href="http://www.jquery.com">jQuery.com</a> หรือค้นหาข้อมูลได้ที่ <a href="http://google.com">Google.com</a> </p>
ให้กำหนด div คลุมส่วนของเนื้อหานั้นๆ และกำหนด class ให้กับ div ตามต้องการเช่น
<div class="yourclass"> <p> สามารถหาความรู้ เพิ่มเติม เกี่ยวกับการใช้งาน jQuery ได้ที่เว็บไซต์ <a href="http://www.jquery.com">jQuery.com</a> หรือค้นหาข้อมูลได้ที่ <a href="http://google.com">Google.com</a> </p> </div>
2. สร้างโฟลเดอร์สำหรับเก็บไฟล์ waiting page ในตัวอย่างที่นี้กำหนดโฟลเดอร์เป็น weblink
3. แทรก jQuery สำหรับกำหนดรูปแบบของลิ้งค์ ในไฟล์ที่แสดงข้อมูล ในข้อ 1
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$("div.yourclass").find("a").each(function(){
// เปลี่ยน ninenik เป็นชื่อโดเมนตามต้องการ
// เปลี่ยน weblink เป็นชื่อโฟลเดอร์ ตามที่กำหนดในข้อ 2
var newURL=$.trim($(this).attr("href"));
var gText=$(this).text();
var goURL="";
if(newURL.match(/(\b(https?:\/\/|www.)(ninenik.com))|(\b(mailto:))/)==null){
goURL="http://www.ninenik.com/weblink/?"+newURL;
}else{
goURL=newURL;
}
$(this).attr("href","");
$(this).attr("href",goURL);
$(this).text(gText);
});
});
</script>
3. สร้างไฟล์ index.php ไว้ในโฟลเดอร์ตามข้อ 2 แทรกโค้ดตัวอย่างต่อไปนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?=$_SERVER['QUERY_STRING']?> waiting page</title>
</head>
<body>
<div style="width:95%;margin:auto;height:450px;">
<?php
if(isset($_SERVER['QUERY_STRING'])){
$linkURL=trim($_SERVER['QUERY_STRING']);
$linkURL=(preg_match("/^https?:\/\//",$linkURL))?$linkURL:"http://".$linkURL;
?>
<p ><br /><br />
<br />
<script language="javascript">
// สร้างให้ทำการลิ้งค์ไปที่ url ที่ส่งมาอัตโนมัติ ใน 4 วินาที (1 วินาที แทนด้วย 1000)
// เปลี่ยน ninenik เป็นชื่อโดเมนตามต้องการ
// เปลี่ยน weblink เป็นชื่อโฟลเดอร์ ตามที่กำหนดในข้อ 2
var urlToGo=new String(window.location);
urlToGo=urlToGo.replace("http://www.ninenik.com/weblink/?","");
setTimeout(function(){
urlToGo=(urlToGo=="http://www.ninenik.com/weblink/")?"http://www.ninenik.com/":urlToGo;
top.location.href=urlToGo;
}, 4000);
</script>
<img src="http://www.ninenik.com/ajax.gif" alt="ninenik ajax loading" width="50" height="50" />
<br />
กรุณารอสักครู่ เรากำลังพาคุณไปยังเว็บไซต์ <br />
<span class="mynewLink2"><?=$linkURL?></span><br /><br />
<a href="<?=$linkURL?>">คลิกที่นี้ ลิ้งค์จาก www.ninenik.com ไปยังเว็บไซต์ <span ><?=$linkURL?></span> ทันที</a>
</p>
<?php } ?>
</div>
</body>
</html>
4. ปรับแต่งรูปแบบของไฟล์ index.php ตามต้องการ
* Waiting Page เป็นคำที่ใช้ เพื่อความเข้าใจในการอ้างถึงเท่านั้น
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
17 Nov 08 ตรวจสอบฟอร์ม form ก่อน submit ด้วย jquery อ่าน 9332 16 Aug 10 เทคนิค ใช้ event beforeunload แจ้งเตือนก่อน ปิดบราวเซอร์ ด้วย jQuery อ่าน 1614 08 Dec 09 แปลง jQuery object เป็น DOM object อ่าน 2476 02 Jun 10 การหา ขนาด ความกว้าง ความสูงของ รูปภาพ ด้วย javascript อ่าน 2168 06 Mar 11 แนะนำ ปลั๊กอิน comment ตัวใหม่ของ facebook อ่าน 3274 06 Oct 10 การใช้งาน graph api ของ facebook ด้วย php sdk อ่าน 3703 26 Aug 10 ใช้ comments.get เรียกและ บันทึก facebook comment ล่าสุด ลงฐานข้อมูล ด้วย jQuery อ่าน 2379 17 Sep 10 กำหนด infowindow ให้กับตัว marker จำนวนมาก ใน google map อ่าน 2932 11 Aug 10 ปรับแต่ง facebook comments ด้วย css กำหนด style ให้เข้ากับเว็บ อ่าน 17763 16 Aug 09 เริ่มต้น jQuery UI กับการสร้าง ปฏิทินเลือกวันที่ datepicker อ่าน 17505 31 Oct 09 ใช้งาน CSS Sprite images กับ การกำหนด CSS ของ Input form อย่างง่าย อ่าน 4370 02 Apr 09 สร้างรายการตัวเลือกให้กับ input text ด้วย jQuery อย่างง่าย อ่าน 4089 14 Mar 09 สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery อ่าน 7878 25 Sep 08 Jquery javascript library มาแรง อ่าน 6385 09 May 10 ดึงค่า ข้อมูล จาก xml ไฟล์ มากำหนดเป็นตัวแปร array ด้วย php อ่าน 2151 04 Oct 10 รู้จัก และใช้งาน php sdk สำหรับ facebook เพิ่มขึ้น อ่าน 2856 02 May 10 ใช้งาน ajax ใน jQuery ดึงข้อมูลจากฐานข้อมูลมาแสดง ใน tooltip อ่าน 5973 31 Jul 10 เทคนิค ประยุกต์ใช้ ajax ใน jQuery ร่วมกับ iframe กับการอัพโหลดรูป อ่าน 4366 25 Sep 08 ฟังก์ชั่นเกี่ยวกับ วันที่ เวลา ใน javascript อ่าน 7137 18 Oct 08 สร้างเมนูแนวนอน ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 4186