আমরা অনেক ওয়েব সাইটে প্রবেশ করার সময় দেখতে পাই ফেইসবুক পপ আপ লাইক বক্স। ফেইসবুক পপ-আপ লাইক বক্স আপনি শুধু ওয়েব সাইটেই নয়, চাইলে ব্লগস্পট ব্লগেও ব্যাবহার করতে পারেন। ফেইসবুক পপ-আপ লাইক বক্স এর কাজ হলো আপনার ফেইসবুক পেইজকে একটি পপ-আপ উইন্ডোতে ভিজিটরের কাছে তুলে ধরা। ভিজিটর চাইলে আপনার ফেইজবুক পেইজে লাইক দিতে পারবেন এবং শেয়ারও করতে পারবেন।
যেভাবে এড করবেন ফেইসবুক পপ-আপ লাইক বক্স
উইজেট/গ্যাজেটঃ
ধাপ ২ । তারপর Dashboard থেকে নিচের চিত্র অনুযায়ী লাল বক্সের ভিতরের
মিনু বারে ক্লিক করুন।
ধাপ ৩ । মিনু বারে ক্লিক করার পর নতুন একটি মিনু ওপেন হবে, সেখান থেকে Layout এ ক্লিক করুন।
ধাপ ৪ । লেআউট এ ক্লিক করার পর নতুন একটি পেইজ আসবে ,সেখান থেকে “Add a
gadget” এ ক্লিক করুন।
ধাপ ৫ । তারপর নতুন একটি উইন্ডো ওপেন হবে, এ উইন্ডো থেকে HTML/Javascript যুক্ত করুন।
ধাপ ৬ । এখন Content
বক্সে নিচের কোড কপি করে পেস্ট করে Save এ ক্লিক করুন।
উযল্লেখ্যযে, Title বক্স খালি রাখতে হবে।
ব্যাস, ফেইসবুক পপ-আপ লাইক বক্স উইজেট/গেজেট
যুক্ত হয়ে গেল আপনার ব্লগে। নিচের কোডের লাল অংশটুকু বাদ দিয়ে সে জায়গায় আপনার
ফেইসবুক পেইজের লিংক দিন।
<script src='http://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: 37%;
-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>
<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/pages/Minitricksbd/&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://helplogger.blogspot.com/2014/12/facebook-popup-like-box-blogger-widget.html" rel="nofollow">MiniTricksbd</a></div>
</div>
</div>
<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: 37%;
-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>
<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/pages/Minitricksbd/&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://helplogger.blogspot.com/2014/12/facebook-popup-like-box-blogger-widget.html" rel="nofollow">MiniTricksbd</a></div>
</div>
</div>
নোটঃ এই পপ-আপ বক্স শুধু
যেকোন ভিজিটরকে একবার দেখাবে। আপনি যদি চান তাহলে প্রত্যেক ভিজিটরকে প্রত্যেকবার
দেখাবে। প্রত্যেকবার দেখানোর জন্য উপরের কোডের সবুজ অংশ বাদ দিয়ে দিন।
এই সহজ প্রসেসটি সম্পন্ন করতে যদি আপনি কোন
সমস্যার সম্মুখীন হন, তাহলে অবশ্যই কমেন্ট করবেন । আমি যথাসাধ্য চেষ্টা করবো আপনার
কমেন্টের রিপ্লাই দেওয়ার জন্য। আর হ্যা নিয়োমিত MiniTricksBD ভিজিট করবেন নতুন
কিছু পাওয়ার জন্য। ধন্যবাদ, ভালো থাকুন ।
2 মন্তব্য(গুলি)
ধন্যবাদ বস ,আমার ব্লগে আমন্ত্রন রইলো।
www.dewanfahim.blogspot.com
ধন্যবাদ বস ,আমার ব্লগে আমন্ত্রন রইলো।
www.dewanfahim.blogspot.com