Como adicionar um Facebook Popup Like Box no Blogger

Inserir um pop-up da likebox do Facebook permite que o visitante do seu blog curta suas páginas na rede social, e torne-se um assinante por meio da caixa de inscrição no plugin .

Gênero: Tutorial Blogger

____Nível de Dificuldade: Iniciante

Como ela funciona?

Sempre que um visitante visita seu blog/site este widget pop-up aparecerá automaticamente na tela e mostra botão de link facebook, twitter follow e botão caixa de inscrição e-mail. Se o visitante quiser fechar esta caixa de pop-up, em seguida, basta clicar na tela em área vazia ou pressione o botão ESC no teclado com este pop-up, você ganhará muito mais tráfego e fãs ao seu blog!

Como instalar o Popup no Blogger

1° passo: O primeiro passo é acessar sua conta do blogger, para que tenha total controle do blog. Para isso, acesse pelo endereço principal, não pelo endereço do seu blog. Acessar o blogger.

2° passo: Acesse o Layout do blog, para que possamos adicionar um widget.

3° passo: Clique em adicionar um novo widget.

4° passo: Agora é preciso escolher o tipo "HTML/Javascript, clique sobre ele para adicionar.

5° passo: Agora apenas adicione o código abaixo dentro da caixa de conteúdo do editor html. 

<link type='text/css' rel='stylesheet' href='https://dl.dropbox.com/s/ungb93kxgu18i8w/NBTFB_Twitter_RSS_PopOut.css'><style>#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: #0066B3;background: #fff !important;font-size: 18px !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;}.box-title1 {border:1px solid #ddd;background: #fff !important;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow: 5px 5px 5px #CCCCCC;padding:10px; margin:10px 0;}.enteryouremail{background: #fff!important;border: 1px solid #d2d2d2;padding: 0px 8px 0px 8px;color: #a19999; font-size: 12px;height: 25px; width: 165px;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius:5px;margin:0px;}.submitbutton{background:#0066B3;border: 1px solid #0066B3;text-shadow: 1px 1px 1px #333;box-shadow: 3px 3px 3px #666;font:bold 12px Arial, sans-serif;color: #fff;height: 25px;padding: 0 12px 0 12px;margin: 0 0 0 5px;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;cursor:pointer;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script><script src='https://dl.dropbox.com/s/cwtddhvie00mxk3/NBTFB_Twitter_RSS_PopOut.js'></script><script type='text/javascript'>jQuery(document).ready(function(){if(document.cookie.indexOf('visited=true')==-1){var fifteenDays=1000*60*60*24*2;var expires=new Date((new Date()).valueOf()+fifteenDays);document.cookie="visited=true;expires="+expires.toUTCString();$.colorbox({width:"400px",inline:true,href:"#subscribe"})}});</script><div style='display:none'> <div id='subscribe' style='padding:10px; background:#fff;'> <center> <h3 class="box-title"> Receba todas as atualizações via Facebook. Apenas clique em Curtir no botão Abaixo<p style="line-height:4px;" > <b>?</b></p> </h3> </center> <center> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Foficialbolanarede&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=175" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:175px;" allowtransparency="true"></iframe></center> <div style="width:350px; border-top:1px solid #e6e6e6; margin:8px 5px 0px 0px; padding-top:5px;"> <iframe data-twttr-rendered="true" title="Twitter Follow Button" style="width: 266px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.1347008535.html#_=1351358237637&id=twitter-widget-0&lang=en&screen_name=computadicas&show_count=true&show_screen_name=true&size=m" allowtransparency="true" frameborder="0" scrolling="no"></iframe><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script></div> <div class="box-title1 "> <center> <h3 style="color:#0066B3;"> <b>Você também pode receber as atuaizações Gratuitamente pelo Email:</b></h3> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=in4mal', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="in4mal" name="uri" type="hidden"/><input value="Enviar" class="submitbutton" type="submit"/></form> </center> </div> <p style=" float:right; margin-right:5px; font-size:9px;" > Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://btutoriaisblog.blogspot.com/" rel="dofollow">BrTutoriaisBlog</a></p> </div> </div>

Obs. Nesse caso não precisamos inserir um título para o widget pois não terá nenhum efeito no popup.

6° passo: Estamos quase lá! Agora você só precisa modificar algumas palavras antes de salvar.

Para alterar a caixa de inscrição por email

Substitua: http://feedburner.google.com/fb/a/mailverify?uri=in4mal com seu link do feedburner.

Substitua Blogspot/qlGrR com seu código do feedburner.

Botão Like do Facebook

Substitua: http%3A%2F%2Fwww.facebook.com%2FOficialBolanarede com o link da sua página do facebook. 

Botão follow do Twitter

Substitua: computadicas com seu username do Twitter

7° passo: Pronto! Agora é só salvar que seu Widget já deve funcionar muito bem!

Nota: Se você aprendeu com o tutorial respeite os direitos autorais do código, por favor, não remova os créditos do widget.