Tutorial: Efeito Popup na fanbox do facebook

     Quem ai sentiu falta dos tutoriais Ecleticus? Acho que todos que visitam sentiram. Mas hoje trago um tutorial que acho que irão gostar, eu simplesmente acho um máximo o efeito, só não coloquei no blog ainda , por conta de muitos não gostarem, mas irei saber a opinião de todos nesse tutorial. Quem ai já viu por ai um efeito um efeito que assim que entra no blog aparece a janela do Facebook para curtir em PopuP, acho que poucos devem conhecer, mas para facilitar, irei mostrar um exemplo, basta vocês entrarem nesse LINK ou Veja a imagem abaixo.
     Então, gostaram do efeito? Então siga o tutorial abaixo e deixe seu blog com esse feito maravilho.. Vamos lá!

1. Acesse o painel do seu blog e clique na guia modelo.
2. Depois clique no botão Editar HTML.
3. Segure as teclas CTRL+F e procure por:
</head>
4. E, acima dele, cole o seguinte código:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.1' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/73386157/codigos/minipopup/jquery.cookie.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>

5. Em seguida, segure novamente as teclas CTRL+F e procure por:
]]></b:skin>
6. E, acima dele, cole o seguinte código:
#fanback{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}
#fan-exit{width:100%;height:100%}
#fanbox {background: white;width: 420px;height: 270px;position: absolute;top: 58%;left: 63%;-webkit-box-shadow: inset 0 0 50px 0 #939393;-moz-box-shadow: inset 0 0 50px 0 #939393;box-shadow: inset 0 0 50px 0 #939393;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: -220px 0 0 -375px;}
#fanclose {float: right;cursor: pointer;background: url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/fanclose.png) repeat;height: 15px;padding: 20px;position: relative;padding-right: 40px;margin-top: -20px;margin-right: -22px;}
.remove-borda {height: 1px;width: 366px;margin: 0 auto;background:#F3F3F3;margin-top: 16px;position: relative;margin-left: 20px;}

7. E, pela última vez, segure as teclas CTRL+F e procure por:
<body>
8. E, abaixo dele cole o seguinte código:
<div id='fanback'><div id='fan-exit'/><div id='fanbox'><div id='fanclose'/><div class='remove-borda'/>
<iframe src="//www.facebook.com/plugins/likebox.php?href=ENDEREÇO DA SUA FAN PAGE AQUI&amp;width=402&amp;height=255&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23E2E2E2&amp;stream=false&amp;header=false&amp;appId=329902783740649" scrolling="no" frameborder="0" style="border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;" allowTransparency="true"></iframe>
</div></div>

9. Na parte destacada de vermelho, requer o URL da sua página do blog, veja um exemplo abaixo.

    Então, gostaram do tutorial? Espero que sim, pois breve teremos mais..

Postado por: Jeff Bolton
bolton Capricorniano, 18 anos. Me vejo como uma pessoa muito empolgada, volátil e impulsiva, garoto natural, que é rápido para tomar decisões, apesar de nem sempre serem corretas. Não muito corajoso mas bem aventureiro, alguém que irá tentar qualquer coisa uma vez, alguém que gosta de aventuras.@ecletiicus

30 comentários:

  1. Jeff no meu dá erro, não sei porque?!

    makedressesanddreams.blogspot.com

    ResponderExcluir
  2. Muito legal esse efeito e fica super prático mas algumas pessoas entendem como vc se vc estivesse obrigando a curtir a fan page, eu acho...

    Jeff, obrigado pelos elogios, eu fiquei muito feliz viu? E desculpa o sumisso, rs fiquei fora da net essa semana mas vou tentar estar mais presente :)

    bjãoo

    ResponderExcluir
  3. AAh! Amei o tutorial...o efeito fica lindo mesmo! \Õ/
    E eu também estava sentindo falta dos seus tutoriais...rsrsrs

    Beeijo
    http://www.blogmymemories.com

    ResponderExcluir
  4. Estava com saudades dos tuto aqui, *-*
    http://perfeitateen.blogspot.com.br/

    ResponderExcluir
  5. Ah, que tutorial perfeito! Vai ajudar muito a galerinha! Tutorial bem feito só tem a agradar. Beijos! Já seguindo.

    http://mentesvelhas.blogspot.com.br/

    ResponderExcluir
  6. Gostei do tutorial,
    mas não encontrei a parte "body"

    Me ajuda? O que eu faço?

    Bjo

    http://meuryss.blogspot.com.br/
    Seguindo, te espero lá se gostar segue

    :)

    ResponderExcluir
  7. Efeito muuuuuuito show, lindo mesmo!

    Segue? @TheGlitterSwag
    http://girlsrepublic-s2.blogspot.com.br/

    ResponderExcluir
  8. Muito útil o tuto, mas eu não gosto muito desse efeito. Kiss :*
    charmenaveia.blogspot.com

    ResponderExcluir
  9. Eu uma vez entrei no blog e tinha o efeito que você ensinou. Bom vou ser sincera, não gosto muito desse efeito não kkk
    Mas já que você ensinou, vai ser util pra muita gente!

    http://novidadesdatekinha.blogspot.com

    ResponderExcluir
  10. esse efeito e mesmo divo rs, e você soube explicar direitinho.

    http://www.perfeitinhablog.com/

    ResponderExcluir
  11. *0* sempre quis saber como fazia isso!

    Singlejoao.blogspot.com.br

    ResponderExcluir
  12. Ameeei o tuto, super útil, heim?
    Beijos, momamoraes.blogspot.com

    ResponderExcluir
  13. Saudade dos tutos daqui ><
    To achando que vou tentar, conseguir eu não sei, mas pelo menos vou tentar.
    Beijos

    www.nadadeperfeicao.com

    ResponderExcluir
  14. Amei o tutorial,o resultado é super lindinho!!:3
    http://themudancas.tk/

    ResponderExcluir
  15. Amei o tutorial, muito bom *-*
    http://meninas-lindas-cdm.blogspot.com.br/

    ResponderExcluir
  16. Verdade, alguns realmente não curtem, mas eu acho legal e até mais fácil para alguem curtir a fanpage :D

    http://vitaminadepimenta.blogspot.com.br/
    @LariCrazy_

    ResponderExcluir
  17. É verdade, a fan box popup é um ótimo jeito de fazerem as pessoas curtirem o blog. *-* Gostei do post. E o layout do blog tá lindoo. Beijos, Giovana. http://girlsabout.blogspot.com.br

    ResponderExcluir
  18. Muito bom *-----*

    - Visite meu Blog: http://gah-principe-hype.blogspot.com/

    ResponderExcluir
  19. Bem útil, já vou testar no meu blog! hehe, beijos
    http://blogdaingridzinha.blogspot.com.br

    ResponderExcluir
  20. Nem deu certo :/

    - Visite meu Blog: http://gah-principe-hype.blogspot.com/

    ResponderExcluir
  21. Bem legal o efeito, fica bom demais.
    beijos.

    http://garotamarte.blogspot.com.br/

    ResponderExcluir
  22. Ótimo tutorial,assim ocupa menos espaço e fica mais organizado. Quando eu voltar com a página no facebook do meu blog,já que a outra deu problema,eu vou usar esse tutorial.
    http://i-teenbr.net.tc

    ResponderExcluir
  23. o meu só apareceu a primeira vez,depois não apareceu mais.
    porque?

    http://vagnerhotdowns.blogspot.com.br/

    ResponderExcluir
  24. gostei muito , mas quando clico no x ele nao feiche pq ?

    ResponderExcluir
  25. Tim é pra fechar, o tutorial está bem explicado, da uma revisada no tutorial e ver se fez tudo certinho..

    ResponderExcluir
  26. Eu ñ achei o body no html do meu blog

    livrodereceitasdigital.blogspot.com

    ñ coloquei as <> no body aki se ñ meu cometário ñ seria aceito, mais lá eu coloquei como é mandado

    ResponderExcluir
    Respostas
    1. Mais todo html é pra ter o body, se o seu código for dos próprios Templates do blog, ai não sei dizer, já não gosto de usar eles pro conta disso.

      Excluir
  27. E quando não tem a "body" no seu html? '-' Duvida!

    ResponderExcluir
  28. Vlw aii...funcionou certinho....

    ResponderExcluir