Mini PopUp de curtir a Fan Page no Facebook para o Blog

E aí pessoal, com algumas semanas sem postar nem um tutorial no Varias Dicas Para Blog, hoje vou mostrar como colocar um Widget, um pequeno Popup que tem um botão de curtir no Facebook.

Esse Widget é fácil de carregar, tem efeito deslizante e atraente,  é útil, pois facilita os visitantes do seu blog visualizarem o botão "Curtir no Facebook" , portanto, esse popup ajudará você a conseguir vários Fãs no facebook.

>> Veja uma Demostração da janela Pop UP: CLIQUE AQUI.

Observe que, ao descer a página do Blog, a janela Pop-Up aparece com um efeito deslizante ao lado direito do blog próximo ao roda-pé, e na janela aparece o Botão Curtir.

Como colocar no Blog:

Primeiro: Acesse o painel de edição do seu blog

A seguir vá na opção "Layout" e depois clique em "Adicionar um Gadget":

 Depois clique na opção "HTML/JavaScripts".

Segundo: Cole esse código dentro do HTML/JavaScripts:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#mbsocial").show("slow");else $("#mbsocial").hide("slow");});function closeMBsocial(){$('#mbsocial').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script> 

<style> #mbsocial{background:#f3f3f3;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;-moz-box-shadow:inset 0 0 3px #333;-webkit-box-shadow:inset 0 0 3px #333;box-shadow:inner 0 0 3px #333;padding:12px 14px 12px 14px;width:300px;position:fixed;bottom:13px;right:2px;display:none;z-index:3;height:100px;} .getmore a{display: inline-block;font-weight: normal;text-decoration: none;font-size:9px;color:#333!important; float:right;} .getmore a:visited{ color:#ddd;}</style>  

 <div style="display: none;" id="mbsocial"> <a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeMBsocial();">(X)</a>

<span style="font-family: Verdana; font-size: 15px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;font-weight:bold;color:#555;">Curta nossa Fan Page!</span><br />

 <a>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FNOMEdaSUAFANPAGE&amp;width=230&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:230px; height:62px;" allowtransparency="true"></iframe>

</a>  

</div>

 <div class='clear'></div>

Altere o Código:

veja que no código eu deixei destacado uma pequena parte em vermelho, aquilo se trata do endereço da fan page, então pra alterá, você vai substituir a parte destacada em Vermelho pelo endereço da sua Fan Page, veja bem o exemplo logo a baixo:

O endereço da minha Fan Page é esse aqui:

https://www.facebook.com/VariasDicasParaBlogs

Neste caso, eu ou você, somente irá utilizar a parte final do endereço que fica depois da "/" (barra), e substitui-lo no código:

VariasDicasParaBlogs

Depois de substituir é só salvar.

espero terem gostado