รวมตกแต่งเว็บ
เฟชบุ๊ค ไลค์ป๊อบอัป Facebook Like Popup Box
วิธีทำ เฟชบุ๊ค ไลค์ ป๊อบอัป สำหรับ บล็อก หรือ เว็บไซต์ เพื่อให้สมาชิกใหม่ที่เข้าเว็บเรา ได้กดไลค์ กดแชร์ ไปยังแฟนเพจเฟชบุ๊ค ป๊อบอัป จะเด้งเตือนเพียงเดือนละครั้ง ข้อดีคือไม่ขึ้นถี่จนทำให้น่ารำคาญ แต่ถ้าหากเราล้างคุ้กกี้ใหม่ก็จะเห็นทุกครั้งครับ คัดลอกโค้ดด้านล่างนี้ไปใช้ได้เลยครับ
วิธีทำ
>>คัดลอกโค้ด
>>Gadget
>>HTML/จาวาสคริปต์ แล้ววางโค้ด (โดยไม่ต้องตั้งชื่อ)
>>บันทึก
เพิ่มเติม Facebook Like Popup Box for Blog.
1.ให้แก้ไข https://www.facebook.com/weblog2u ตรงส่วนนี้ให้เป็นชื่อแฟนเพจของคุณ
2. ในโค้ดข้างบน ป๊อบอัป จะเด้งเมื่อเปิดเว็บได้ 5 วินาที แล้ว หากต้องการให้มันขึ้นมาไวกว่า 5 วินาที ให้แก้ไขตรงส่วนนี้นะครับ .delay(5000)
แก้ไขเป็นวินาที ที่อยากให้แสดง ตามความเหมาะสม
1 วินาที = 1000
5 วินาที = 5000
10 วินาที = 10000
20 วินาที = 20000
60 วินาที = 60000
3.หากต้องการให้ ป๊อบอัป เด้งทุกครั้งที่มีการเปิดหน้าเว็บใหม่ ให้เอาโค้ดตัวนี้ออกนะครับ
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
วิธีทำ
>>คัดลอกโค้ด
>>Gadget
>>HTML/จาวาสคริปต์ แล้ววางโค้ด (โดยไม่ต้องตั้งชื่อ)
>>บันทึก
เพิ่มเติม Facebook Like Popup Box for Blog.
1.ให้แก้ไข https://www.facebook.com/weblog2u ตรงส่วนนี้ให้เป็นชื่อแฟนเพจของคุณ
2. ในโค้ดข้างบน ป๊อบอัป จะเด้งเมื่อเปิดเว็บได้ 5 วินาที แล้ว หากต้องการให้มันขึ้นมาไวกว่า 5 วินาที ให้แก้ไขตรงส่วนนี้นะครับ .delay(5000)
แก้ไขเป็นวินาที ที่อยากให้แสดง ตามความเหมาะสม
1 วินาที = 1000
5 วินาที = 5000
10 วินาที = 10000
20 วินาที = 20000
60 วินาที = 60000
3.หากต้องการให้ ป๊อบอัป เด้งทุกครั้งที่มีการเปิดหน้าเว็บใหม่ ให้เอาโค้ดตัวนี้ออกนะครับ
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
<!--Facebook pop up-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<style>
#fbox-background {
display: none;
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
#fbox-close {
width: 100%;
height: 100%;
}
#fbox-display {
background: #eaeaea;
border: 5px solid #828282;
width: 340px;
height: 230px;
position: absolute;
top: 32%;
left: 2%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#fbox-button {
float: right;
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
}
#fbox-button:before {
content: "CLOSE";
padding: 5px 8px;
background: #828282;
color: #eaeaea;
font-weight: bold;
font-size: 10px;
font-family: Tahoma;
}
#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
color: #aaaaaa;
font-size: 9px;
text-decoration: none;
text-align: center;
padding: 5px;
}
</style>
<script type="text/javascript">
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<br />
<div id="fbox-background">
<div id="fbox-close">
</div>
<div id="fbox-display">
<div id="fbox-button">
</div>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/weblog2u&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false" style="background: #fff; border: none; height: 200px; overflow: hidden; width: 339px;"></iframe>
<br />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<style>
#fbox-background {
display: none;
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
#fbox-close {
width: 100%;
height: 100%;
}
#fbox-display {
background: #eaeaea;
border: 5px solid #828282;
width: 340px;
height: 230px;
position: absolute;
top: 32%;
left: 2%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#fbox-button {
float: right;
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
}
#fbox-button:before {
content: "CLOSE";
padding: 5px 8px;
background: #828282;
color: #eaeaea;
font-weight: bold;
font-size: 10px;
font-family: Tahoma;
}
#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
color: #aaaaaa;
font-size: 9px;
text-decoration: none;
text-align: center;
padding: 5px;
}
</style>
<script type="text/javascript">
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<br />
<div id="fbox-background">
<div id="fbox-close">
</div>
<div id="fbox-display">
<div id="fbox-button">
</div>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/weblog2u&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false" style="background: #fff; border: none; height: 200px; overflow: hidden; width: 339px;"></iframe>
<br />
ขอบคุณ : http://www.theblogwidgets.com
แสดงความคิดเห็น
0 ความคิดเห็น