Colocar Curtir, enviar, tweet e +1 (Atualizado)

A dica é para quem deseja obter os códigos direto das "fontes". Anteriormente já havia mencionado os códigos para os botões curtir (antigo, sem o balão de "publicar no mural"), compartilhar (botão abandonado pelo face, mas que ainda funciona), tweet e +1 (este último o código é mais "alterável" do que o mais recente). O código dos "botões antigos" podem ser acessados pelo link: Botão: Twitter, Curtir, Compartilhar e +1. Blogger.

Por tanto agora, vou mostrar os como obter os códigos atualizados e diretamente nos sites dos desenvolvedores, complementando com umas explicações básicas. Segue:



Curtir e Enviar

Link para obter o código diretamente no site do facebook: http://developers.facebook.com/docs/reference/plugins/like/

Clique na imagem para ampliá-la

1 - Visualização automática: Observe simultaneamente como ficará os botões enquanto realiza as alterações.
2 - Aqui você pode inserir o link raiz da sua página "www.example.com", assim em todas as páginas do site ou blog, que alguém clicar em "curtir", aparecerá a página inicial do site ou blog nas publicações do face. Colocando o link da página do facebook (www.facebook.com/siteexample), as pessoas curtirão diretamente a página do face. E deixando em branco, a página publicada no face será exclusivamente a que a pessoa clicou em "curtir".
3 - Ative ou desative o botão "Send" (Enviar)
4 - Altera a forma que os botões são dispostos. "Standard" Botões mais texto, "button_count" Botão curtir com balão de contagem e botão enviar, mas sem texto. "Box_count" A mesma coisa do anterior só que o posicionamento é vertical.
5 - Determina o "limite" de espaço na horizontal em pixels dedicado aos botões.
6 - Visualização das pessoas que curtiram. Particularmente comigo, não ficou muito legal... Deixei desativada essa opção.
7 - Alternar o texto do botão "curtir" para "recomendar".
8 - Alternar a cor de fundo dos botões entre cor padrão (azulzinho) ou preto.
9 - Alterar a fonte das letras que compõe os botões.

Por último clique "get code" e copie o código presente nas duas caixas e juntos cole na devida posição do código Html do site ou blog. Ao final detalho melhor como posicionar este e os outros códigos no Html do blog (blogger).

Tweet

Link para obter o código diretamente no site do twitter: 

Clique na imagem para ampliá-la

1 - Escolha qual função será atribuída ao botão. Tweetar a página fazendo menção, hastag e com um pequeno texto automático, apenas seguir algum perfil indicado pela página ou blog, enviar apenas um marcador com texto ou enviar uma mensagem pelo twitter fazendo apenas uma menção. (A seguir detalharei o procedimento para a primeira escolha: "Tweetar a página fazendo menção, hastag e com um pequeno texto automático")
2 - Tweetar a página vigente ou uma página padrão (página principal do site ou blog, por exemplo).
3 - Texto padrão: Título da página ou algo de sua preferência.
4 - Exibir um "balão" ao lado do botão exibindo quantos cliques de tweetar foram recebidos.
5 - Fazer menção ao perfil do blog no twitter ou ao perfil do autor do blog, ou qualquer outro de sua preferência. Deixe em branco para desativar a menção.
6 - Recomendar algum outro perfil. Deixe em branco para desativar a recomendação.
7 - Marcador: Enviar junto uma Hastag. Deixe em branco para desativar a Hastag.
8 - Amplia o tamanho do botão.
9 - Desativar as sugestões personalizadas que aparecem quando a janela para tweetar abre.
10 - Idioma geral do botão.

Por último clique "get code" e copie o código presente nas duas caixas e juntos cole na devida posição do código Html do site ou blog. Ao final detalho melhor como posicionar este e os outros códigos no Html do  blog (blogger).

G+

Link para obter o código diretamente no site do G+:

Clique na imagem para ampliá-la

1 - Defina a 'língua' do texto que aparecerá no botão e/ou do texto em que aparece no momento do compartilhamento. 
2 - Visualização automática: Observe simultaneamente como ficará os botões enquanto realiza as alterações.
3 - Escolha o tamanho e o formato do botão.
4 - Escolha o layout do botão. "Inline" Botão mais texto. "Bubble" Botão mais balão. "None" somente o botão.
5 - Determina o "limite" de espaço na horizontal em pixels dedicado ao botão (apenas para a opção "inline").

Posicionando os códigos no Html do blog (Blogger):

Painel do blogger > Modelo > editar html > Expandir modelos de widgets > Ctrl + F > cole o seguinte texto: <div class='post-footer-line post-footer-line-1'> e após essa linha cole os códigos. A ordem de posicionamento se dá pelo o posicionamento no html.

E é isto! Espero que tenha ajudado! Qualquer dúvida, comenta logo aí embaixo, aproveita e clica em curtir! Abraços.
Previous Post
Next Post

post written by:

4 comentários: