Ganhe curtida na sua página com a Pop-up do "Facebook Likes" em lightbox

Compartilhe:
Gerador de tráfego grátis!
Quase todos os dias, recebo perguntas de como ganhar curtidas na página no Facebook. Depois do sucesso do artigo Ganhar 80 curtidas diárias no Facebook, eu venho percebendo que mesmo sem usar o sistema mencionado neste artigo, eu consigo receber curtidas com este método, um tanto que fácil e prático.


É a melhor solução?

A maior parte dos blogs na internet já usam uma 'caixa de luz', mas, será que ela é boa para todo tipo de site? Eu diria que sim, então, se você veio aqui procurar uma maneira eficaz de receber curtidas, pense que a lightbox é a melhor forma de emitir um anuncio da sua rede social sem incomodar o internauta.

Como posso adicionar?

Essa lightbox é constituída por CSS, HTML e jQuery. Eu aconselho separá-las, ao invés de copiar o código e colar no Gadget do blog. Se você tem um fórum, é melhor ainda! Você pode separar adicionando o CSS na sua folha de estilos CSS, o HTML em um widget e o jQuery na função de JS do fórum.

Se você está pronto, então, adicione este CSS ao seu site:
/*
ColorBox Core Style:
.
*/colorbox
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*
User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(http://1.bp.blogspot.com/-PPvu-446sn4/Txrt1QsGH1I/AAAAAAAAFWw/_jWYVoR1HX8/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(http://1.bp.blogspot.com/-31strss_1-E/Txrt1J6NThI/AAAAAAAAFWo/4P12CJPj924/s1600/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
#colorbox {
position: fixed;
z-index: 9999;
width: 400px !important;
height: 727px !important;
}


Lembre-se: Se o seu caso é um Fórum, então, tire a tag style, para não dar problemas de codificação. :D Em seguida, vamos continuar para aplicar o HTML. Se for um blog, aplique em um gadget, acessando "Layout >>" e clique em Adicionar um Gadget do tipo 'HTML/Javascript' e adicione o HTML abaixo.
Se o seu caso for um fórum Forumeiros, acesse 'Painel de Controle >> Módulos >> Portal e Widgets >> Gestão dos widgets do fórum >>' e crie um novo Widget Personalizado.


Depois de ter feito isso, temos que modificar alguns detalhes do código.
width:300 = Largura da exibição dos dados da sua fã page dentro do lightbox.
colorscheme:light = Modelo e cores do plugin que exibe a sua fã page (muda-se no próprio site do Facebook)
height:258 = Altura da caixa.

Por fim, agora o que nos resta é o código jQuery. Se for para blogs, você pode colocar em um gadget junto com o HTML, sem problemas. Se for nos fóruns, acesse 'Módulos >> HTML e Javascript >> Criar um novo JS >> Adicionar um javascript >>' e depois, invista-o em Todas as páginas.

jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=false') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=false;expires=" + expires.toUTCString();
jQuery.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});


Feito? Salve. Normalmente, a caixa flutuante só é exibida uma vez. Ou seja, ela funciona com gerenciamento de cookies, que se for olhar a risca, não é bom de se usar no mundo atual do jquery que temos hoje. A melhor forma é usando o localstorage, mas, fica a critério de cada administrador, tanto de blog quanto de fóruns. :D
Sendo assim, quando cookie vencer, a caixa volta a aparecer, fazendo com que a mesma não seja aquela coisa chata de ficar se fechando toda hora que abrir o site.

RESULTADO:

 Então, se fizemos tudo certinho, aqui está o efeito em execução. É lindo, não é? Desta forma, toda vez que alguém lhe visitar, poderá ter a opção de curtir a página.


Muitos podem até querer saber se é bom obrigar a curtir. Entenda que é bom dar essa opção ao internauta para não correr o risco de perdê-lo para sempre. Fica a dica.

DOWNLOAD DO PROJETO:

Não funcionou? Então, baixe o arquivo único para aplicar:


5 comentários:

  1. Olá no meu não apareceu,acho que foi porque eu me perdi nesta parte "Por fim, agora o que nos resta é o código jQuery. Se for para blogs, você pode colocar em um gadget junto com o HTML, sem problemas." "

    Eu não entendo muito de códigos html, e pior colocar Css...

    Você pode me resumir esta parte? onde colocar? o ultimo código?

    ResponderExcluir
    Respostas
    1. Carah, o ideal é vc criar uma dúvida no suporte, porque eles pouco respondem nos comentários.

      Excluir

Na caixa abaixo você poderá adicionar seu comentário. Lembre-se de que, não será possível atribuir tags especiais, de imagens, links e cores. Somente tags Negrito, itálico são permitidos.

Obrigado por comentar!