ফেসবুক চ্যাট বক্স ম্যাসেঞ্জার সঙ্গে লাইক বাটন ব্লগার ব্লগের জন্য।



বন্ধুরা আজকে আপনাদের সঙ্গে শেয়ার করবো কিভাবে আপনি আপনার ব্লগার ব্লগে একটি ফেসবুক চ্যাট বক্স ম্যাসেঞ্জার ওয়েডগেট যুক্ত করবেন সঙ্গে তাতে লাইক বাটনও থাকবে। এর আগেই আমি শেয়ার করছি কিভাবে লাইক বক্স এর সঙ্গে ম্যাসেজ বক্স যুক্ত করবেন সেটা নিয়ে। যাই হোক সেটা ছিল ব্লগের সাইড বারের জন্য কিন্তু আজকে যেটা সেটা হচ্ছে শো এবং হাইড ইফেক্ট যুক্ত। আপনি বিভিন্ন ব্লগে দেখে থাকবেন একটা লাইভ চ্যাট ওয়েডগেট থাকে এটাও ঠিক একি জিনিস এবং একি ভাবে কাজ করে তফাত সুধু এটা ফেসবুক ম্যাসেঞ্জার সঙ্গে তাই যে আপনাকে ম্যাসেজ করবে তাকে অবশ্যই তার ফেসবুক অ্যাকাউন্ট এর দ্বারাই ম্যাসেজ করতে হবে। তাহলে আর কথা না বাড়িয়ে চলুন দেখে নেওয়া যাক কিভাবে ব্লগে এই মজাদার ওয়েডগেট টি যুক্ত করবেন।


ফেসবুক চ্যাট বক্স ম্যাসেঞ্জার সঙ্গে লাইক বাটন ব্লগার ব্লগের জন্য।


ফেসবুক চ্যাট বক্স ম্যাসেঞ্জার সঙ্গে লাইক বাটন ব্লগার ব্লগের জন্য
প্রথমে আপনি আপনার ব্লগারে লগইন করুন, এর পর ড্যাশবোর্ড থেকে Template অপশনে ক্লিক করুন তারপর Edit HTML এ ক্লিক করুন।
এবার থিম এডিটর অপশন চলে আসবে সেখান থেকে আপনি CTRL+F প্রেস করেন এবং এই </head> ট্যাগ টি সার্চ করেন। এই ট্যাগ খুজে পেলে তার ঠিক উপরে নিচের কোড গুল কপি করে পেস্ট করে দিন।

<style type="text/css">
.chat_box {
background: #fff;
width: 270px;
height: 435px;
position: fixed;
bottom: -400px;
right: 60px;
transition: all .3s;
border: none;
border-radius: 5px 5px 0 0;
-webkit-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.25);
overflow: hidden;
z-index:1000000;
}
.pesan_chat {
text-align: center;
text-decoration: none;
display: block;
height: 100%;
padding: 5px 5px 15px;
}
.chatheader {
margin: 0 auto;
padding: 0 10px;
height: 35px;
line-height: 35px;
font-size: 16px;
font-weight: 700;
color: #fff;
text-align: left;
display: block;
cursor: pointer;
background:#3a5897;
}
.pesan_chat p {
color: #616161;
font-size: 14px;
margin: 10px;
}
.close-chatfb {
position: absolute;
top: 0;
right: 0;
font-family: Arial;
font-size: 24px;
font-weight: 700;
cursor:pointer;
width:24px;
color: #fff;
height:35px;
line-height:35px;
text-align:center;
opacity: .7;
}
.maxi-chatfb,
.mini-chatfb {
position: absolute;
top: 0;
right: 20px;
font-family: Arial;
font-weight: 700;
cursor:pointer;
width:18px;
color: #fff;
text-align:center;
opacity: .7;
}
.maxi-chatfb {
font-size: 24px;
height:30px;
line-height:30px;
}
.mini-chatfb {
font-size: 20px;
height:25px;
line-height:25px;
display: none;
}
.close-chatfb:hover,
.maxi-chatfb:hover,
.mini-chatfb:hover{
opacity:1;
}
</style> 
এবার একি ভাবে </body> এই ট্যাগ টি সার্চ করেন এবং খুজে পেলে এই ট্যাগ এর ঠিক উপরে নিচের কোড গুল কপি করে পেস্ট করে দিন।




<div class='chat_box' id='chat'>
<div class='chatheader' onclick='showhidechat()'>ল&#2494;ইক এব&#2434; ম&#2509;য&#2494;স&#2503;জ কর&#2497;ন
</div>
<div class='close-chatfb' onclick='hidechatfb()'>&#215;</div>
<div class='maxi-chatfb' id='maxi-chatfb' onclick='showhidechat()'>&amp;square;</div>
<div class='mini-chatfb' id='mini-chatfb' onclick='showhidechat()'>_</div>
<div class='pesan_chat'>
<p>ন&#2495;চ&#2503; থ&#2503;ক&#2503; আম&#2494;দ&#2503;র প&#2503;জ ল&#2494;ইক কর&#2497;ন সঙ&#2509;গ&#2503; চ&#2494;ইল&#2503; আম&#2494;দ&#2503;র ম&#2509;য&#2494;স&#2503;জ ও করত&#2503; প&#2494;র&#2503;ন&#2404;</p>
<script type='text/javascript'>
//<![CDATA[
document.write('<iframe name="f11b13dc65e614" width="250px" height="310px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:page Facebook Social Plugin" data-src="https://www.facebook.com/v2.5/plugins/page.php?adapt_container_width=true&amp;app_id=&amp;channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2Fbz-D0tzmBsw.js%3Fversion%3D42%23cb%3Df100e25f3ae8bb8%26domain%3Ditsayeem.com%26origin%3Dhttps%253A%252F%252Fitsayeem.com%252Ff8f907cf72f9a4%26relation%3Dparent.parent&amp;container_width=0&amp;height=310&amp;hide_cover=true&amp;href=https%3A%2F%2Fwww.facebook.com%2Fitsayeem%2F&amp;locale=en_US&amp;sdk=joey&amp;show_facepile=false&amp;show_posts=true&amp;small_header=true&amp;tabs=messages&amp;width=250" style="border: none; visibility: visible; width: 250px; height: 310px;" class=""></iframe>');
//]]>
</script>
</div>
</div>

<script>
//<![CDATA[
function showhidechat() {
var o = document.getElementById("chat");
"0px" !== o.style.bottom ? o.style.bottom = "0px" : o.style.bottom = "-400px";
var o = document.getElementById("maxi-chatfb");
"none" !== o.style.display ? o.style.display = "none" : o.style.display = "block";
var o = document.getElementById("mini-chatfb");
"block" !== o.style.display ? o.style.display = "block" : o.style.display = "none";
};
function hidechatfb() {
var e = document.getElementById("chat").style.display = "none";
};
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
//]]>
</script>



উপর থেকে আপনি www.itsayeem.com/ দুবার আছে ওটা মুছে সেখানে আপনার ব্লগ ডোমেইন নাম বসান এবং itsayeem মুছে সেখানে আপনার ফেসবুক পেইজের User নাম বসান।


তাহলে আজকের মত এই পর্যন্ত। আবারও দেখা হবে নতুন কিছু নিয়ে। পোস্টটি ভাল লাগলে বন্ধুদের সঙ্গে সোশ্যাল মিডিয়াতে শেয়ার করুন, কমেন্ট করুন। কোন রকম সমস্যা হলে অবশ্যই কমেন্টে জানান।

Rules: Make sure your comment add content to the page. Then add your links thereafter. Irrelevant comments will be deleted.

Post a Comment

Add Comment (0)

Previous Post Next Post