terça-feira, 12 de março de 2013

PopUp para curtir a página do Facebook


Achei esse tutorial no Mundo Blogger e resolvi postar aqui, tenho certeza que vai ajudar a muitas pessoas que assim como eu,não sabia como fazer isso...


Você já deve ter percebido que, ao visitarmos alguns blogs, aparece uma popup divulgando uma página no facebook, convidando seus leitores a curtirem-na.
Atendendo a pedidos,hoje veremos como adicionar uma popup convidando seus leitores a curtirem sua página do facebook.


Adicionando uma Popup divulgando sua página no Facebook, certamente irá ajudar a aumentar o número de fãs na sua página, pois é uma forma de convidar seus leitores a acompanhar seu conteúdo através do facebook.
Este recurso funciona a base de um script que foi criado por Kakiboh. Eu fiz algumas adaptações e modificações no script original.
O diferencial desta popup é que ela possui um timer, onde você poderá estipular o tempo certo para o fechamento da popup.
A instalação é bem simples
Acesse o painel do blogger, vá até o menu “layout”, clique em “adicionar um gadget”, escolha o tipo “html/javascript” e cole o seguinte código:

<style>
#fblikepop {background-color: #fff;display: none;    position: fixed;    top: 200px;    _position: absolute;     width: 450px;    border: 10px solid #6F6F6F;    z-index: 200;-moz-border-radius: 9px;    -webkit-border-radius: 9px;    margin: 0pt;    padding: 0pt;    color: #333333;    text-align: left;font-family: arial,sans-serif;    font-size: 13px;} 
#fblikepop body {background: #fff none repeat scroll 0%;    line-height: 1;    margin: 0pt;    height: 100%;} 
.fbflush {cursor: pointer;    font-size: 11px !important;    color: #FFF !important;    text-decoration: none !important;    border: 0 !important;} #fblikebg {display: none;    position: fixed;_position: absolute;  height: 100%;    width: 100%;    top: 0;    left: 0;    background: #000000;    z-index: 100;} 
#fblikepop #closeable {color: #333;float: right;    margin: 7px 0 0 0;} 
#fblikepop h1 {    background: #6D84B4 none repeat scroll 0 0;    border-top: 1px solid #3B5998;    border-left: 1px solid #3B5998;    border-right: 1px solid #3B5998;    color: #FFFFFF !important;    font-size: 14px !important;    font-weight: normal !important;    padding: 5px !important;    margin: 0 !important;font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;} 
#fblikepop #actionHolder { height: 60px;    overflow: hidden;}
#fblikepop #buttonArea { background: #F2F2F2;    border-top: 1px solid #CCCCCC;    padding: 10px;    min-height: 50px;} 
#fblikepop #buttonArea a { color: #999999 !important;    text-decoration: none !important;    border: 0 !important;    font-size: 10px !important;} #fblikepop #buttonArea a:hover {    color: #333 !important;    text-decoration: none !important; border: 0 !important;} 
#fblikepop #popupMessage {font-size: 12px !important;font-weight: normal !important;    line-height: 22px;    padding: 8px;    background: #fff !important;} 
#fblikepop #counter-display {float: right;    font-size: 11px !important;font-weight: normal !important;    margin: 5px 0 0 0;text-align: right;line-height: 16px;}</style> 
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1");</script> 
<script type="text/javascript" src="http://connect.facebook.net/pt_BR/all.js#xfbml=1"></script> 
<script type="text/javascript">
 //<![CDATA[   
  kakinetworkdotcom01username="NOME-DA-SUA-PAGINA",
  kakinetworkdotcom01title="Encontre-nos no Facebook",
  kakinetworkdotcom01time="12",
  kakinetworkdotcom01wait="0",
  kakinetworkdotcom01lang="br"
 //]]>  
 </script> 
 <script type="text/javascript" src="http://mundoblogger.webs.com/scripts/popupFBlikebox.js"></script>
 <script type="text/javascript">
   //<![CDATA[ 
  $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});  
   //]]>
  </script>


Atenção aos trechos que você precisa alterar:
kakinetworkdotcom01username="NOME-DA-SUA-PAGINA",
kakinetworkdotcom01time="12" --> onde "12" corresponde ao timer, ou seja, aos segundos restantes para que a popup feche. Altere essa numeração de acordo com o tempo que você preferir.
Só altere os campos destacados em vermelho, não altere mais nada.

4 comentários:

  1. Olá Luciana, ótima dica! Passei para retribuir a gentileza e conhecer seu cantinho, parabéns!! Já seguindo e curtindo, beijos!
    http://www.bymargo.com.br/
    https://www.facebook.com/ByMargoBijus
    https://www.facebook.com/ByMargoArtesanatos

    ResponderExcluir
  2. Luciana!
    Agradeço a visita feita ao blog e espero que volte sempre.

    Desejo um dia repleto de alegria, abençoado e com muitas realizações!

    Blogueiras Unidas 1275!

    Luz , paz e amor no coração!
    Cheirinhos
    Rudy
    BLOG ALEGRIA DE VIVER E AMAR O QUE É BOM!

    ResponderExcluir