Blogger Facebook Messenger Sayfa Eklentisi

Blogger Facebook Messenger Sayfa Eklentisi - Bu yazımızda blog sitelerine Facebook messenger sayfa eklentisi ile ilgili ipuçları sizlerle paylaşacağım. Blog sitelerinin neredeyse tümünün bir Facebook sayfası var. Şimdi Facebook sayfanız ile blog sitenizi birbiri ile daha yakın etkileşim içerisine almak için bir kaç farklı teknik kullarak Facebook messenger sayfa eklentisini blog sitenize entegre etmeye çalışalım.

Fabook Messenger Sayfa Eklentisi Blog Sitesine Nasıl Eklenir?

Ekranın sağ alt köşesinde bulunan popup butonu teması ile çalışan widget ekranın ortasında görüntülenir. Facebook messenger eklentisini bloga eklemek için Blogger hesabınıza giriş yapın. Blogunuzun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın ve aşağıdaki adımları uygulayın.

1- Aşağıdaki CSS kodlarını blogunuzda bulunan </head> kodunun bir satır üzerine ekleyin. Şablon kodları sayfasında aradığınız kodları bulmak için CTRL+F tuşlarını kullanarak bulabilirsiniz.

<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>

2- Aşağıdaki kodları blogunuzda bulunan </body> kodunun bir satır üzerine ekleyin.

<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=bloggereklentileri" 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>

Yukarıdaki kod içerisinde işaretlenmiş olan bloggereklentileri yeri Facebook sayfanızın adı ile değiştirin.

Ön İzleme