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

เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee
jquery php waiting page

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



ในส่วนตัวไม่แน่ใจว่า การทำ 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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ