Caixa flutuante para curtir no Facebook para Blogger



Coloque a likebox de sua página do Facebook flutuante no blog.

A importância de associar seu blog a redes já foi muito falada em artigos anteriores do Dica de Blog e voltamos a ressaltar nesse artigo. E uma das redes sociais mais utilizadas com certeza é o Facebook, com milhões de acessos por dia torna-a um meio de grande divulgação não só para blogs.

Hoje aprenderemos como colocar um likebox flutuante do Facebook no Blogger, que é, uma caixa com a opção de curtir a fan page de seu blog que fica fixa na lateral acompanhando o scroll da página. Encontramos várias opções como essa espalhadas em vários blog pelas web, mas que as vezes só te dão a opção de colocar a likebox de um dos lados da página.

Mas, agora você não será mais obrigado a usar da maneira que não quer. O Dica de Blog disponibiliza as duas opções para que possa escolher se quer do lado esquerdo ou direito. Abaixo você poderá conferir os códigos e em seguida o tutorial para colocar em seu blog, confira:

 ATENÇÃO: Troque a parte destacada em vermelho NOME DA PÁGINA, pelo nome de sua página no Facebook ou em alguns casos pelo ID que fica após o nome da página

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".theblogwidgets").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .theblogwidgets{background: url("http://3.bp.blogspot.com/-TaZRLv66f8g/UoMnTyTbF6I/AAAAAAAAAGY/U4qcf-SP6d0/TheBlogWidgets_facebook_widget.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:30%;} .theblogwidgets div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;} .theblogwidgets span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .theblogwidgets span a{color: gray;text-decoration:none;} .theblogwidgets span a:hover{text-decoration:underline;} } </style><div class="theblogwidgets" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FDicadeBlog&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"></iframe></div>
</div>

PASSO A PASSO

Instalando o JQuery

1- Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

2- Clique no código de seu template, pressione "CTRL+F" e pesquise por </head>

3- Logo ACIMA da tag pesquisada cole o seguinte código:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
4- Clique em "Salvar Modelo".

Obs: Caso já contenha o JQuery instalado em seu blog, desconsidere essa parte.

Adicionando o Widget

1- No menu lateral de seu Blogger, vá em "Layout".

2- Adicione um gadget do tipo "HTML/Javascript".

3- Dentro do conteúdo do gadget, cole o código do widget com a posição que você escolheu.

4- Clique em "Salvar" e depois "Salvar Organização".

Vá em seu blog e veja o resultado.

Deixe seu comentário, ele é a motivação do nosso trabalho.
Proxima
« Anterior
Anterior
Proxima »