Blogger Facebook Messenger Uygulaması

Arlina Design: Blogger Facebook Messenger Uygulaması 8.8.16
Facebook Messenger

Merhaba! Bu yazımızda blogcular için, blog facebook profilleri 'fanspage' ile blog messenger sohbet açılır sohbet penceresi uygulamısı hakkında bilgiler paylaşıyoruz. Şimdi ziyaretçiler blog yöneticisine fanspage messenger üzerinden doğrudan mesaj göndermeleri için, bloga facebook messenger kutusu ekleyeceğiz.

Blog facebook messenger uygulaması canlı sohbet gibi değildir. Çünkü bu uygulama geribildirim özelliğine sahip değildir. Sadece blog yöneticisinin facebook sayfasına doğrudan mesaj göndermek için kullanılmaktadır. Blog yöneticisi bu mesajları daha sonra fanspage haberci etkileşimleri üzerinden kontrol edecektir.

Blog Facebook Messenger Nasıl Uygulanır?

Facebook Messenger'i blogunuzda eklemek istiyorsanız, lütfen aşağıdaki adımları uygulayın.

1. Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinden Şablon > HTML'i Düzenle sekmesine tıklayın. Açılan sayfada CTRL+F yardımıyla ]]></b:skin> veya </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin.

.msn_fbbox {background: #fff;width: 270px;height: 435px;position: fixed;bottom: -400px;right: 60px;transition: all .3s;border: none;border-radius: 5px 5px 0 0;-webkit-fbbox-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.26);-moz-fbbox-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.26);fbbox-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.26);overflow: hidden;z-index:1000000;}
.pesan_msn {text-align: center;text-decoration: none;display: block;height: 100%;padding: 5px 5px 15px;}
.msnheader {margin: 0 auto;padding: 0 10px;height: 35px;line-height: 35px;font-size: 16px;font-weight:600;color: #fff;text-align: left;display: block;cursor: pointer;background:#304f90;}
.pesan_msn p {color: #666;font-size: 14px;margin: 10px;}
.off-fbmsn {position: absolute;top: 0;right: 0;font-family: Arial;font-size: 24px;font-weight:600;cursor:pointer;width:24px;color: #fff;height:35px;line-height:35px;text-align:center;opacity: .7;}
.maxi-fbmsn,
.mini-fbmsn {position: absolute;top: 0;right: 20px;font-family: Arial;font-weight:600;cursor:pointer;width:18px;color: #fff;text-align:center;opacity: .7;}
.maxi-fbmsn {font-size: 24px;height:30px;line-height:30px;}
.mini-fbmsn {font-size: 20px;height:25px;line-height:25px;display: none;}
.off-fbmsn:hover,.maxi-fbmsn:hover,.mini-fbmsn:hover{opacity:1;}

2. Yine bu sayfada CTRL+F yardımıyla </body> kodunu bulun ve aşağıdaki javaScript kodları </body> kodunun bir satır üzerine ekleyin.

<div class='msn_fbbox' id='msn'>
<div class='msnheader' onclick='showhidemsn()'>Blogger Eklentileri</div>
<div class='off-fbmsn' onclick='hidefbmsn()'>&#215;</div>
<div class='maxi-fbmsn' id='maxi-fbmsn' onclick='showhidemsn()'>&amp;square;</div>
<div class='mini-fbmsn' id='mini-fbmsn' onclick='showhidemsn()'>_</div>
<div class='pesan_msn'>
<p>Merhaba! Buradan bize yazabilirsiniz.</p>
<script type='text/javascript'>
//<![CDATA[
document.write('<iframe name="f22c24ed76d725" 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%3Dbloggereklentileri.blogspot.com%26origin%3Dhttps%253A%252F%252Fbloggereklentileri.blogspot.com%252Ff8f907cf72f9a4%26relation%3Dparent.parent&amp;container_width=0&amp;height=310&amp;hide_cover=true&amp;href=https%3A%2F%2Fwww.facebook.com%2Fbloggereklentileri%2F&amp;locale=tr_TR&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 showhidemsn() {
  var o = document.getElementById("msn");
  "0px" !== o.style.bottom ? o.style.bottom = "0px" : o.style.bottom = "-400px";
  var o = document.getElementById("maxi-fbmsn");
  "none" !== o.style.display ? o.style.display = "none" : o.style.display = "block";
  var o = document.getElementById("mini-fbmsn");
  "block" !== o.style.display ? o.style.display = "block" : o.style.display = "none";
};
function hidefbmsn() {
  var e = document.getElementById("msn").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>


Blog Facebook Messenger Açıklamaları

Blog facebook messenger uygulamasının çalışması için, aşağıdaki düzenlemeleri yukarıdaki javaScript kodları içerisinde kendi facebook sayfa bilgilerinize göre değiştirerek çalışmasını sağlamalısınız.
  • Yukarıda javaScript kodu içerisinde bulunan bloggereklentileri.blogspot.com kendi blog adınızı yazın.
  • Yine yukarıdaki jvaScript kodu içerisinde bulunan bloggereklentileri facebook sayfanızın ID adınızı yazın. Facebook sayfa ID adınız https://www.facebook.com/bloggereklentileri/ bu şekilde görünmektedir.
Tüm değişiklikleri ve kontrolleri yaptıktan sonra şablonu kaydedin ve blogunuzu kontrol edin.

Yorum Gönder