Bu yazımda sizlere Facebook Messenger'i blogger sayfamızda nasıl kullanabileceğimizi anlatmaya çalışacağım.
Sizlerle görüşmeyeli yaklaşık 2 haftaya yakın bir zaman dilimi oldu. Bu yazımda Facebook Messenger'i Blogger da nasıl kullanabileceğimize dair paylaşımda bulunacağım. Birçok blogger sayfasında kullanıcı ile iletişime geçmek için Zendesk, Tawk.to gibi online sohbet etme ve mesaj bırakma eklentisi kullanmaktadırlar. Ben size hemen hemen herkesin Facebook sayfası olduğunu düşünerek, aynı zamanda akıllı telefon, tablet gibi birçok İnternet bağlantısı olan cihazlarda devamlı Online olduğu varsayarak Facebook Messenger'i nasıl sayfamıza ekleyeceğimizi anlatacağım.
Bu arada sitemde Tawk.to kullanıyorum. Neden mi Messenger' a göre ziyaretçilerle ilgili çeşitli istatistikler bulundurduğu için. Sizler her zaman etkileşimde olmak isterseniz Facebook Messenger'i öneririm.
İlk önce yapmamız gereken Blogger sayfamızın "Tema - HTML Düzenle" bölümünden şablonumuza kod ekleyeceğimiz bölüme girmek. Daha sonra Ctrl+F ile </head> tagının hemen üstüne aşağıdaki CSS kodlarını eklemek olacaktır.
<style>
#fb-modal iframe{border:0;margin-bottom:-5px}
.overlay{position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,.6);overflow:hidden;transition:opacity .2s;display:none;z-index:100000}
.overlay .cancel{position:absolute;width:100%;height:100%;cursor:default}
.modal{margin:-165px 0 0 -150px;top:50%;left:50%;padding:0;width:300px;height:330px;box-shadow:0 0 50px rgba(0,0,0,.6);position:absolute;text-align:center;-webkit-animation-name:slideInUp;animation-name:slideInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.open_plugin{position:fixed;bottom:0;right:0;cursor:pointer;}
.open_plugin:hover .fb-close{display:block;}
.fb-close{position:absolute;top:-60px;right:5px;z-index:1070;display:none;width:276px;padding:5px 10px;font-size:13px;font-style:normal;font-weight:400;line-height:1.42857143;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.3);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.3);box-shadow:0 5px 10px rgba(0,0,0,.3);line-break:auto;}
.fb-close p{margin:0;padding:0}
.fb-close:before{bottom:-19px;right:10px;content:" ";border-top-color:#fff!important;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-width:0;border-width:10px;position:absolute;width:0;height:0;border-color:transparent;
border-style:solid;z-index:2}
.fb-close:after{bottom:-20px;right:10px;content:" ";border-top-color:#888!important;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-width:0;border-width:10px;position:absolute;width:0;height:0;border-color:transparent;
border-style:solid;z-index:1}
@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
</style>
<div onclick="showDiv()" class="open_plugin">
<svg style="width:45px;height:45px" viewBox="0 0 24 24">
<path fill="#007fff" d="M12,2C6.5,2 2,6.14 2,11.25C2,14.13 3.42,16.7 5.65,18.4L5.71,22L9.16,20.12L9.13,20.11C10.04,20.36 11,20.5 12,20.5C17.5,20.5 22,16.36 22,11.25C22,6.14 17.5,2 12,2M13.03,14.41L10.54,11.78L5.5,14.41L10.88,8.78L13.46,11.25L18.31,8.78L13.03,14.41Z" />
</svg>
<div class="fb-close">
<p>Merhaba, nasıl yardımcı olabiliriz? Yardım almak için bize mesaj gönderebilirsiniz.</p>
</div>
</div>
<div id="fb-modal" class="overlay">
<a class="cancel" href="javascript:void(0)" onclick="hideDiv()"></a>
<div class="modal">
<iframe src="https://rawgit.com/Bloggeritunes/amp/master/fbpage_plugin.html?page=zekeriyacanbal" frameborder="0" scrolling="no" width="300" height="330">
</iframe>
</div>
</div>
<script>
function showDiv() {document.getElementById('fb-modal').style.display = "block";}
function hideDiv() {document.getElementById('fb-modal').style.display = "none";}
</script>
