PopUp para curtir sua fan page no seu blog

Olá meninas, você já devem ter reparado em alguns blogs e sites, que ao entrar na página, aparece um pop up da fan page para curtir. Particularmente eu não gosto disso, pois além de eu achar que força a pessoa a curtir sua página, ainda é chato ver aquele pop up abrindo. Porém existem muitas pessoas que gostam, pois acham um jeito fácil de divulgar sua fan page hoje vou ensinar vocês como adicionar um pop up da sua fan page ao iniciar seu blog.

Vá no painel do seu blog, LAYOUT, ADICIONAR GADGET, HTML JAVA/SCRIPT, e cole o seguinte código.

<br /> <style> /* ColorBox Core Style: . */ #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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYsoXYeIb7c70IvwE3LXgACvw5CbA601F5xHfb2SVgcila4R0eqq5P8q_IPFZfbF-iGO20pmsBsOo79PZyemwXwy9RHbegyiBGJdDoDIhhbUGzAr_osuGHiMnPWlso9eeo1QlgWd0fgXNm/s1600/controls.png) no-repeat 0 0;} #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvIWfJF-nTKwgrbddG9SG48P7GZJQiSznGD7P9YysWAX4tOgNOLXmjr0yeBXDXXVYujwlldVWlfSsBuwrtrhVuKjcyCd-G-REG9FP6EBorxo_Gn6iQnfRlTYjhdn0uzGnAulFlCX3uBXyg/s1600/border.png) repeat-x top left;} #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYsoXYeIb7c70IvwE3LXgACvw5CbA601F5xHfb2SVgcila4R0eqq5P8q_IPFZfbF-iGO20pmsBsOo79PZyemwXwy9RHbegyiBGJdDoDIhhbUGzAr_osuGHiMnPWlso9eeo1QlgWd0fgXNm/s1600/controls.png) no-repeat -36px 0;} #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYsoXYeIb7c70IvwE3LXgACvw5CbA601F5xHfb2SVgcila4R0eqq5P8q_IPFZfbF-iGO20pmsBsOo79PZyemwXwy9RHbegyiBGJdDoDIhhbUGzAr_osuGHiMnPWlso9eeo1QlgWd0fgXNm/s1600/controls.png) no-repeat 0 -32px;} #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvIWfJF-nTKwgrbddG9SG48P7GZJQiSznGD7P9YysWAX4tOgNOLXmjr0yeBXDXXVYujwlldVWlfSsBuwrtrhVuKjcyCd-G-REG9FP6EBorxo_Gn6iQnfRlTYjhdn0uzGnAulFlCX3uBXyg/s1600/border.png) repeat-x bottom left;} #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYsoXYeIb7c70IvwE3LXgACvw5CbA601F5xHfb2SVgcila4R0eqq5P8q_IPFZfbF-iGO20pmsBsOo79PZyemwXwy9RHbegyiBGJdDoDIhhbUGzAr_osuGHiMnPWlso9eeo1QlgWd0fgXNm/s1600/controls.png) no-repeat -36px -32px;} #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYsoXYeIb7c70IvwE3LXgACvw5CbA601F5xHfb2SVgcila4R0eqq5P8q_IPFZfbF-iGO20pmsBsOo79PZyemwXwy9RHbegyiBGJdDoDIhhbUGzAr_osuGHiMnPWlso9eeo1QlgWd0fgXNm/s1600/controls.png) repeat-y -175px 0;} #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYsoXYeIb7c70IvwE3LXgACvw5CbA601F5xHfb2SVgcila4R0eqq5P8q_IPFZfbF-iGO20pmsBsOo79PZyemwXwy9RHbegyiBGJdDoDIhhbUGzAr_osuGHiMnPWlso9eeo1QlgWd0fgXNm/s1600/controls.png) repeat-y -211px 0;} #cboxContent{background:#fff; overflow:visible;} #cboxLoadedContent{margin-bottom:5px;} #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjxtczRGZ98Y5bpPcibAsExgjWplFb9fAf0ax_QMy9-iWFjm8YC-Ebk_CVe7FqTjooKKHNYGQ5-PNNTrSwlwq7zKR9aaKXgVhK7Lm6W2-eqNjhFKfrsx52pd1TZqTAyUNZsD0mj8uXQjBM/s1600/loading-background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0YN0XDYs-PNCa8RjyNSy9zxL97uDZiPlwZQN6fj4EEgu6P6kmtyhahJbYhpCRbvSdyyoCGkikrbuZ4PbLZ9rMPp9Lr2mCDPocl7Wo6mIJ4smmSPAL3zqMIVWMawv2NlFVyUDzRwQtHL5L/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYsoXYeIb7c70IvwE3LXgACvw5CbA601F5xHfb2SVgcila4R0eqq5P8q_IPFZfbF-iGO20pmsBsOo79PZyemwXwy9RHbegyiBGJdDoDIhhbUGzAr_osuGHiMnPWlso9eeo1QlgWd0fgXNm/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; } </style><br /> <br /> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script><br /> <script src="http://dl.dropbox.com/u/103852546/popup/popup.js"></script><br /> <script type="text/javascript"> jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) { var fifteenDays = 1000*60*60*24*30; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); $.colorbox({width:"400px", inline:true, href:"#subscribe"}); } }); </script><br /> <!-- This contains --><br /> <br /> <div style='display:none'> <div id='subscribe' style='padding:10px; background:#fff;'> <h3 class="box-title"> Curta nossa fan page.<center> <p style="line-height:3px;" > ▼</p> </center> </h3> <center> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FNOME-DA-SUA-FANPAGE&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe><br /> </center> </div> </div>

Você precisará fazer uma unica alteração no código, substituindo na linha
 www.facebook.com%2FNOME-DA-SUA-FANPAGE&

pelo nome de sua fan page. www.facebook.com/NOME DA SUA FANPAGE

Fácil e super útil para divulgação .