•  
     

Adicionar botão de Like (Gosto/Curtir) ao Blogspot

Hoje vemos botões de Like do Facebook por todo lado. Não seria óptimo termos também um Like/Gosto/Curtir nos artigos do nosso site? É uma excelente forma de ter novos visitantes! Vamos então aprender como colocar o código para o botão!

O resultado final é semelhante ao seguinte:
Imagem
Imagem

1º Passo

Se queres simplificar, salta para o 8º passo.
Caso contrário vai à página de criação do botão de Like do Facebook.

2º Passo

1-Em “URL to Like” colocar apenas http://exemplo.com (já vamos tratar disto)
2-Desactivar “Send Button” (caso contrário será mais complexo inserir o botão de Like – não é explicado neste tutorial)
3-Personalizar as restantes várias opções como desejado

Imagem

3º Passo

Clicar em “Get Code” e escolher o separador “IFRAME”.

Imagem

4º Passo

Ao aparecer a janela, copiar o conteúdo da caixa de texto de cima.

5º Passo

6º Passo

Com algum cuidado (um carácter errado e não vai funcionar), fazer as seguintes substituições:

src= por expr:src='
http://exemplo.com por " + data:post.url + "
height=??" por height=??"'
por exemplo:

Código original:

<iframe src="http://www.facebook.com/plugins/like.php?href=http://exemplo.com&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>


Código alterado:

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'></iframe>

7º Passo

Deixemos o Notepad de lado por agora…

8º Passo

Ir até ao painel de controlo do Blogger.

9º Passo

Clicar no link “Design” do blog pretendido.

10º Passo

Clicar no link “Editar HTML” (Edit HTML).
Imagem

11º Passo

Fazer uma cópia de segurança do template actual (caso algo corra mal). Para tal, clicar em “Transferir modelo completo” (Download full template).

12º Passo
Garantir que “Expandir modelos do widget” (Expand widget templates) está activo.

13º Passo
Localizar o texto <div class='post-footer'> na caixa de texto.
(Para tal fazer CTRL+F e procurar esse texto.)

14º Passo

Copiar o código já alterado do 6º passo ou caso tenha alterado o código, copiá-lo do Notepad.

15º Passo

Logo após o texto <div class='post-footer'>, colar o código copiado.

16º Passo

Testar as alterações clicando em “Pré-visualizar”.

Se houver erros ou não estiver confiante, clique em “Anular Modificações” e páre por aqui. Faça as suas questões nos comentários caso isto suceda.

17º Passo

Se estiver tudo bem, clicar em “Guardar Modelo” e ver os resultados no seu blog!

Bom.. este deu algum trabalho mas valeu a pena!

Se quiserem também posso fazer uma versão para o WordPress!

Qualquer duvidem não hesitem!

Fonte:webtutoriais

Tai um Tutorial Bom ai Pra vcs...quem Gosta ai da um joinha e Nois;D
 
Bom tuto =D
 
Bom mesmo cara, vlw continue assim ! ^^
 
é Nois vlw .
 
Boa Mlk Otimo Tuto merece Joinha:]