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

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

 

Live Demo

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

প্রথমে আপনি আপনার ব্লগার ব্লগ লগইন করুন, এর পর ড্যাশবোর্ড থেকে 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()'>লাইক এবং ম্যাসেজ করুন
  </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()'>&#95;</div>
  <div class="pesan_chat">
    <p>নিচে থেকে আমাদের পেজ লাইক করুন সঙ্গে চাইলে আমাদের ম্যাসেজ ও করতে পারেন।</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%3Desobondhu.com%26origin%3Dhttps%253A%252F%252Fesobondhu.com%252Ff8f907cf72f9a4%26relation%3Dparent.parent&amp;container_width=0&amp;height=310&amp;hide_cover=true&amp;href=https%3A%2F%2Fwww.facebook.com%2Fesobondhu%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>

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

পোস্ট রেটিং করুন

আরও নতুন পোস্ট পুরানো পোস্ট