วิธีทำ Popup ให้กด "Like" Fanpage สำหรับ Blogger

[khatha0808]

วันนี้ผมจะมาแนะนำวิธีทำ Poppup ให้กับ Blogger ของเราน่ะครับ วิธีนี้สามารถเพิ่ม Like ให้กับเพจเราได้ดีเลยทีเดียว (ทดลองทำมาแล้วประมาณเดือนนึง)

เรามาดูวิธีการทำกันครับ

ขั้นแรกเลย Add Widget ตัวนี้เข้าไปใน Blogger ของเรา ในส่วนของ Layout>HTML/Javascript น่ะครับ

โค้ด เลือก ขยาย

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</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_user_login') != 'yes'){
$('#fanback').delay(20000).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>

<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='fanbox'>
<div id='fanclose'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?

href=http://www.facebook.com/theblogwidgets&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'

style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>
</div>
</div>


วิธีปรับแต่ง
1. เปลี่ยนหน้า fanpage เป็นของเราโดย search หา http://www.facebook.com/theblogwidgets แล้วแทนที่ด้วย url ของเพจเรา
2. ปรับค่า Delay ที่จะให้ popup แสดง เวลาคนเข้ามาที่ Blog เรา ปกติแล้วจะเซทเวลาไว้ที่ 20 วินาที หลังจากคนเข้ามาที่ blog เรา 20 วิ แล้ว popup จะเด้งขึ้นมาให้คนกด Like ถ้าเราต้องการเปลี่ยนค่านี้ ให้ search หา .delay(20000) จากนั้น เปลี่ยนค่าได้ตามใจชอบ โดยแทนค่าดังนี้ 1 วินาที = 1,000 ครับ

เพียงแค่นี้ก็เป็นอันเสร็จเรียบร้อย ลองทดสอบดูได้ครับ

[e-business]

+1 ให้ครับ 

[beerqazasa]

อยากเห็นตัวอย่างอ่ะครับ

[khatha0808]

อยากเห็นตัวอย่างอ่ะครับ

ประมาณนี้ครับ

[Ceo_Md]

ขอบคุณครับ +1 ให้ครับ

[seo-1th]

ผมกำลังหาเลย ขอบคุณคับ

[oDarkIceo]

วันนี้ผมจะมาแนะนำวิธีทำ Poppup ให้กับ Blogger ของเราน่ะครับ วิธีนี้สามารถเพิ่ม Like ให้กับเพจเราได้ดีเลยทีเดียว (ทดลองทำมาแล้วประมาณเดือนนึง)

เรามาดูวิธีการทำกันครับ

ขั้นแรกเลย Add Widget ตัวนี้เข้าไปใน Blogger ของเรา ในส่วนของ Layout>HTML/Javascript น่ะครับ

โค้ด เลือก ขยาย

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</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_user_login') != 'yes'){
$('#fanback').delay(20000).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>

<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='fanbox'>
<div id='fanclose'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?

href=http://www.facebook.com/theblogwidgets&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'

style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>
</div>
</div>


วิธีปรับแต่ง
1. เปลี่ยนหน้า fanpage เป็นของเราโดย search หา http://www.facebook.com/theblogwidgets แล้วแทนที่ด้วย url ของเพจเรา
2. ปรับค่า Delay ที่จะให้ popup แสดง เวลาคนเข้ามาที่ Blog เรา ปกติแล้วจะเซทเวลาไว้ที่ 20 วินาที หลังจากคนเข้ามาที่ blog เรา 20 วิ แล้ว popup จะเด้งขึ้นมาให้คนกด Like ถ้าเราต้องการเปลี่ยนค่านี้ ให้ search หา .delay(20000) จากนั้น เปลี่ยนค่าได้ตามใจชอบ โดยแทนค่าดังนี้ 1 วินาที = 1,000 ครับ

เพียงแค่นี้ก็เป็นอันเสร็จเรียบร้อย ลองทดสอบดูได้ครับ

ถ้าใครคิดว่ากระทู้มีประโยชน์ ไม่ขอไรมากครับ รบกวนช่วยกด Like รูปให้หน่อยครับ ส่งรูปร่วมสนุกชิงรางวัล ipad ให้ลูกครับ

เข้าไปที่ link นี้ https://www.facebook.com/Tung.Itthipol/posts/628352407225868?comment_id=5601936&notif_t=like

จากนั้นช่วยคลิ๊ก like รูปของ "พี่ออกัส น้องออดี้" ประมาณ comment ที่ 7 อ่ะคร๊าาฟฟ

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

ขอโทษที่อาจจะยุ่งยากนิดนุง

และจะเป็นพระคุณมาก ถ้าหากช่วยแชร์ให้เพื่อนๆ ในกลุ่มไลน์ เฟส โซเชี่ยลต่างๆ ช่วยกด Like กันคนละที สองที อิอิ

ลองเอา code ไปนี้ไปเพิ่มใน Layout>HTML/Javascript
แล้วไม่เกิดผล ? หรือผมทำอะไรผิดหว่า

[natapan9823]

เป็นประโยชน์มาครับ

[NenaDesign]

พอกด Like แล้ว เข้ามาใหม่ ยัง Popup อยู่ไหมคะ

[iPhonZii]

เก็บไว้ก่อน

[kbvTH]

เป็นประโยชน์มาก ขอบคุณครับ

[Meaw-IE]

ขอบคุณครับ 

[goodwide]

 
ตั่งนาน
ขอบคุณครับ
ได้ใช้สักที

[nut_anek]

ขอบคุณครับ

[makoto]

ผมก็ไม่ได้ ไม่มีไรเกิดขึ้นเลย

[virussman]

ลองแล้วไม่ขึ้นเหมือนกันครับ หรือเป็นที่ทีมผม 

[i-happy]

  ยากมากๆครับ เฟสปรับเปลี่ยนตลอด

[kinmglovo2u]

ขอบคุณครับสำหรับข้อมูลดีๆ 

[Yingyoy029]

Thank you ka 

[aoy_atom]

  +1 Thank ค่ะ