สร้าง waiting page ให้รอสักครู่ ก่อนลิ้งค์ ไปเว็บอื่น ด้วย jQuery และ php

22 August 2010 เขียนเมื่อ 12 ปีก่อน โดย Ninenik Narkdee

php waiting page jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ php waiting page jquery

ในส่วนตัวไม่แน่ใจว่า การทำ waiting page จะมีประโยชน์ต่อการทำ seo หรือไม่อย่างไร เช่น
- ทำให้ผู้ใช้งานอยู่ในเว็บเรานานขึ้นอีกนิด หรือไม่อย่างไร
- ใช้เก็บสถิติเว็บที่ลิ้งค์ออกไปภายนอก เพื่อไว้ใฃ้งานข้อมูลหรือไม่อย่างไร
- ไว้แสดงโฆษณา ของ google หรือไม่อย่างไร
- ป้องกันการเก็บ keyword ของเว็บปลายทาง หรือไม่อย่างไร
.... อื่่นๆ

อย่างไรก็ตาม การทำ waiting page ควรมีลิ้งค์แสดงให้ผู้ใช้คลิกไปที่เว็บดังกล่าวไว้เป็นทางเลือก เพื่อไม่ให้ต้องรอจนครบตามเวลาที่เรากำหนดให้ทำการลิ้งค์ไปอัตโนมัติ

ตัวอย่าง

www.ninenik.com/demo/link_replace_page.php

เริ่มต้นการทำ waiting page
1. กำหนดพื้นที่ของข้อมูล ที่ต้องการจัดรูปแบบ ลิ้งค์ ด้วย 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 เป็นคำที่ใช้ เพื่อความเข้าใจในการอ้างถึงเท่านั้น

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ