Blogger: แสดงหน้าต่าง Facebook Like Box ขณะเปิดหน้าเว็บโดยเลือกความถี่ได้ตามต้องการ

บทความนี้จะเป็นวิธีแสดงหน้าต่าง Pop-up ของกล่อง Facebook Likebox ลอยขึ้นมาต้อนรับผู้เข้าชมบล็อกในขณะสั่งเปิดหน้าเว็บขึ้นมาไหม่ โดยเราสามารถเลือกความถี่หรือระยะเวลาพักก่อนปรากฏในครั้งต่อไปได้ตามที่เราต้องการ โดยจะมีลักษณะเหมือนภาพกับข้างล่างนี้


ซึ่งค่าเบื้องต้นที่ได้ถูกตั้งไว้ในโค้ดตัวอย่างข้างล่างนี้จะเป็นการสั่งให้หน้าต่าง Pop-up ปรากฏขึ้นมาทุกครั้งพร้อมการเปิดหน้าเว็บขึ้นใหม่ โดยที่ผมตั้งไว้แบบนี้ก็เพื่อให้ง่ายต่อการนำไปทดสอบ แต่เวลานำไปใช้จริงก็ควรเปลี่ยนความถี่ให้น้อยลงตามวิธีจากส่วนอธิบายเพิ่มเติม เพราะถ้าบ่อยไปผู้ชมอาจรำคาญได้

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'การออกแบบ > องค์ประกอบของหน้า'

ขั้นตอนที่ 2. ให้เลือกเพิ่ม Gadget แบบ 'HTML/จาวาสคริปต์'

ขั้นตอนที่ 3. คัดลอกโค้ดด้านล่างนี้ใส่ลงไปในช่อง 'เนื้อหา' และกดปุ่ม 'บันทึก' ก็เสร็จแล้ว


<style>
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*

User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(http://1.bp.blogspot.com/-PPvu-446sn4/Txrt1QsGH1I/AAAAAAAAFWw/_jWYVoR1HX8/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(http://1.bp.blogspot.com/-31strss_1-E/Txrt1J6NThI/AAAAAAAAFWo/4P12CJPj924/s1600/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->

<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>
<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmaxlayout&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

</center>
<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By | <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="https://plus.google.com/108378280786875080944" target="_blank">Blog Gadgets</a></p>
</div>
</div>



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

วิธีตั้งค่าความถี่ของการแสดงหน้าต่าง
เราสามารถตั้งเวลาที่หน้าต่างนี้จะถูกแสดงขึ้นมาพร้อมกับการเปิดหน้าเว็บได้โดยให้สังเกตที่
var fifteenDays = 1000;
โดยโค้ดบรรทัดนี้จะเป็นตัวกำหนดอายุของ Cookies ซึ่งเมื่อครบกำหนดก็จะทำใหหน้าจอ Pop-up นี้ถูกแสดงขึ้นมาอีกครั้ง และค่าเริ่มต้นที่ถูกตั้งไว้นี้ก็คือ สั่งให้แสดงขึ้นมาทุกครั้งที่เปิดหน้าเว็บขึ้นใหม่ซึ่งสามารถเปลี่ยนได้เองดังตัวอย่างด้านล่างนี้
แสดงหน้าต่างนี้เดือนละหนึ่งครั้งเมื่อสั่งเปิดหน้าเว็บขึ้นใหม่คือ
var fifteenDays = 1000*60*60*24*30;
แสดงหน้าต่างนี้สัปดาห์ละหนึ่งครั้งเมื่อสั่งเปิดหน้าเว็บขึ้นใหม่คือ
var fifteenDays = 1000*60*60*24*7;
แสดงหน้าต่างนี้วันละหนึ่งครั้งเมื่อสั่งเปิดหน้าเว็บขึ้นใหม่คือ
var fifteenDays = 1000*60*60*24;
แสดงหน้าต่างนี้ชั่วโมงละหนึ่งครั้งเมื่อสั่งเปิดหน้าเว็บขึ้นใหม่คือ
var fifteenDays = 1000*60*60;
แสดงหน้าต่างนี้นาทีละหนึ่งครั้งเมื่อสั่งเปิดหน้าเว็บขึ้นใหม่คือ
var fifteenDays = 1000*60;
แสดงหน้าต่างนี้ทุกครั้งที่สั่งเปิดหน้าเว็บใหม่ขึ้นคือ
var fifteenDays = 1000;

วิธีเปลี่ยนสีพื้นหลัง
นอกจากนี้สามารถปรับสีพื้นหลังของหน้าต่างได้โดยแก้ค่าของ background แต่ละจุดได้ดังนี้
สีที่ใช้เททับบนหน้าเว็บขณะที่กำลังแสดงหน้าต่างนี้ซึ่งค่าเริ่มต้นเป็นการทำให้หน้าเว็บมืดลงคือ
#cboxOverlay{background:#000
สีพื้นหลังเครดิตกล่อง Likebox ที่เขียนว่า Powered By | Blog Gadgets นี้คือ
#cboxContent{background:#fff
สีพื้นหลังด้านในกล่อง Likebox นี้คือ
<div id='subscribe' style='padding:10px; background:#fff


Credit:
http://www.spiceupyourblog.com/2012/01/one-time-facebook-pop-up-like-box-for.html
http://www.mybloggertricks.com/2012/01/jquery-popup-for-facebook-likebox.html
http://www.mybloggertricks.com/2012/02/facebook-likebox-jquery-popup-with.html
http://allbloggingtips.com/2012/02/15/another-cool-jquery-popup-for-facebook-like-box-v2/

Post Status




13 ความคิดเห็น:

ไม่ระบุชื่อ กล่าวว่า...

ขอบ คุณมากคร๊าฟฟฟ หามานาน

Unknown กล่าวว่า...

ทำไมมัน เด้ง มาครั้งเดียว แล้วพอเปิดใหม่ก็ไม่ขึ้นอีกแล้วอะครับ

Max กล่าวว่า...

ครั้งต่อไปจะเด้งออกมาเมื่อ Cookies เดิมหมดอายุครับ

Unknown กล่าวว่า...

คือบล็อคผม มันเป็น ธีม แบบที่หน้าแรกต้องรอโหลด ก่อนถึงจะขึ้น อะครับ แล้วพอเอาโค้ดนี้ไปใส่ มันไม่เด้งตั้งแต่หน้าแรก แต่พอกดเข้าเมนูที่ลิ้งไปยังบทความอื่น มันจะเด้งขึ้นมา ทุกครั้งที่เปลี่ยนหน้า ผมตั้งเป็น var fifteenDays = 1000; จะมีวิธีไหนไหมครับที่ให้ เด้งหน้าแรก แล้ว พอหน้าอื่นก็ไม่ต้องเด้งขึ้นมาอีกถ้ายังไม่ปิดเว็บ

Unknown กล่าวว่า...

www.hornetanime.blogspot.com
ปล. จะทราบได้ยังไงครับว่า cookie เดิมหมดตอนไหน

Max กล่าวว่า...

ถ้าต้องการลบ Cookies ในทันทีก็ต้องสั่งล้างประวัติการเข้าเว็บครับ

Unknown กล่าวว่า...

เปลี่ยนสีพื้นของกล่องป๊อบอัพได้มั้ยครับ

Max กล่าวว่า...

ค่าสีพื้นหลังนั้นมีอยู่หลายจุดโดยขณะนี้ผมได้เขียนวิธีแก้ไขลงในส่วนอธิบายเพิ่มเติมแล้วครับ

Unknown กล่าวว่า...

ถ้าอยากให้มันสไลด์ตามเม้าต้องแก้ยังไงครับ ขอบคุณมากสำหรับโค้ดนะครับ ^^

Max กล่าวว่า...

เครื่องมือนี้โผล่ออกมาต้อนรับได้เท่านั้นแต่วิ่งตามเมาส์ไม่ได้ครับ

Unknown กล่าวว่า...

ของกระผมขึ้นว่าURL ไม่ถูกต้อง ต้องแก้ยังไงครับ

Max กล่าวว่า...

ให้สั่งคัดลอก URL ของเพจคุณมา แล้วให้นำข้อความที่อยู่ถัดจากคำว่า
https://www.facebook.com/
ไปวางลงแทนที่คำว่า
maxlayout
ในโค้ดด้านบนครับ

Unknown กล่าวว่า...

ในโทรศัพท์ มันเด้ง แต่ไม่ปรากฏ หน้าเพจ ของเรา ต้องแก้ยังไงครับ

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

หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น