Cara Membuat Widget Messenger Facebook Di Blog

Selamat datang agan atau agan wati kali ini saya akan berbagi tentang hal blogging, kali ini saya akan berbagi tentang cara membuat widget Messenger Facebook di blog. Pasti kalian sudah tidak awam dengan Messenger di Facebook. Messenger adalah layanan yang diberikan oleh Facebook untuk melakukan aktivitas chat dengan teman-teman anda yang memiliki Facebook.



Dengan adanya messenger lebih memudahkan untuk berkomunikasi dengan seseorang yang jauh. Hal ini dapat dimanfaatkan dalam hal blogging yaitu membuat widget Messenger pada blog anda. Hal ini akan lebih jauh memudahkan para pengunjung untuk melakukan kontak atau memberikan pesan kepada kita sebagai pemilik blog.



Langsung saja untuk tutorial cara membuat widget Messenger Facebook di blog :

Langkah

1. Login pada blog anda masing-masing,

2. Setelah itu pada menu dashboard pilih menu template,

3. Setelah itu pilih menu edit html,

4. Setelah itu cari kode </b:skin> atau </style> dengan cara

Ctrl

+

F

,

5. Setelah itu copy script css di bawah ini,

 .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;
}

6. Setelah itu paste script css tersebut tepat di atas kode </b:skin> atau </style>,

7. Setelah itu cari kode </body> dengan cara

Ctrl

+

F

,

8. Setelah itu copy script html dan javascript di bawah ini,

 <div class='chat_box' id='chat'>
  <div class='chatheader' onclick='showhidechat()'>Messenger Renaldy Ways
  </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>Hai! Kamu sekarang bisa kirim pesan ke Admin di sini, jangan lupa like fanspage kami, Terima kasih.</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%3Drenaldyways.com%26origin%3Dhttps%253A%252F%252Frenaldyways.com%252Ff8f907cf72f9a4%26relation%3Dparent.parent&amp;container_width=0&amp;height=310&amp;hide_cover=true&amp;href=https%3A%2F%2Fwww.facebook.com%2Frenaldyways%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>
 

Jangan lupa untuk mengganti renaldyways dengan ID Facebook atau Fanspage Facebook anda serta mengganti renaldyways.com dengan alamat blog anda!

9. Setelah itu paste script html dan javascript tersebut di atas kode </body>,

10. Simpan template.

Demo

Nah itu saja dari saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar anda, terima kasih.

Referensi Script http://www.kompiajaib.com/2016/07/membuat-kirim-pesan-messenger-fanspage.html

Share this