sexta-feira, 30 de dezembro de 2016

Facebook messenger widget Blogger enviar mensagem direto

Tags

facebook widget messenger blogger enviar mensagem

Hoje vamos compartilhar com você facebook messenger blogger widget por kompiajab para  enviar mensagem  de uma forma direta o que facilita a interação com sua fanpage no facebook, isso é atraente e pode ver isso em nosso Blog ao vivo se deseja adicionar isso a seu template siga os passos abaixo


Como instalar facebook messenger widget no blogger 

Faça login no Blogger no menu selecione modelo editar HTML então com as teclas combinadas 
CTRL+F busque por </head> logo acima disso copie e cole o seguinte código:


<style>
#modal1 iframe{border:0;margin-bottom:-5px}
.overlay{position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,.5);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,.5);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_fbplugin{position:fixed;bottom:0;right:0;cursor:pointer;}
.open_fbplugin:hover .popover{display:block;}
.popover{position:absolute;top:-60px;right:5px;z-index:1060;display:none;width:276px;padding:5px 10px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;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,.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);line-break:auto;}
.popover p{margin:0;padding:0}
.popover: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}
.popover:after{bottom:-20px;right:10px;content:" ";border-top-color:#999!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>

Agora procure por </body>  copie e cole o seguinte código antes disso:

<div onclick="showDiv()" class="open_fbplugin">
<svg style="width:44px;height:44px" 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="popover">
<p>Hello, how may we help you? Just send us a message now to get assistance.</p>
</div>
</div>
<div id="modal1" class="overlay">
    <a class="cancel" href="javascript:void(0)" onclick="hideDiv()"></a>
    <div class="modal">
<iframe src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/fb_pageplugin.html?page=mybloggerseo" frameborder="0" scrolling="no" width="300" height="330">
</iframe>
    </div>
    </div>

<script>
//<![CDATA[
function showDiv() {
   document.getElementById('modal1').style.display = "block";
}
function hideDiv() {
   document.getElementById('modal1').style.display = "none";
}
//]]>
</script>

Salve e veja o resultado.

Blogger
Disqus
Escolha o Sistem de Comentario

Nenhum comentário