![[ Ferramentas Blog ]](/wordpress/wp-content/themes/fb5/images/logo.png){kind=logo}
Quanto mais opções de links e ícones de redes-sociais e formas de compartilhar seus artigos você oferecer, maiores são as suas chances de divulgação. Mas um blog sempre tem problemas de espaço para tantos ícones e botões. Então criei uma barra com o que tem de mais importante para ajudar a compartilhar no twitter, facebook e Google Buzz, bem como atrair assinantes de Feed.
O modelo que quero sugerir eu uso aqui no [ Ferramentas Blog ] e se aplica para quem tem blog no Blogger (Blogspot). É bem simples de usar e o resultado seria como na imagem abaixo e que você pode ver funcionando no rodapé de todos os meus posts:
São os 4 ícones de serviços que considero os mais relevantes e importantes para um blog: RT no Twitter, Compartilhar no FaceBook, enviar para o Google Buzz e Assinar o Feed. Para criar esse modelo eu baseei nos seguintes tutoriais:
- TweetMeme – RT para seus artigos no Twitter
- Botão para compartilhar links no FaceBook para Blogger
- Compartilhar no Google Buzz padrão do Blogger Blogspot
Como adicionar a barra no rodapé dos posts
É um processo bem simples e rápido e o código que elaborei usa tabelas para ficar mais fácil de você mesmo fazer modificações se quiser. Cabe em qualquer largura de blog, desde que maior que 400px.
Passo 1.
Entre no painel do Blogger e clique no menu "Layout" ~> "Editar HTML" e marque a opção "Expandir modelos de widgets" para ver todo o código-fonte de seu blog, como ilustra a imagem:
Passo 2.
Procure pela seguinte linha no código-fonte (ou algo bem semelhante a isso):
<div class=’post-footer-line post-footer-line-1′>
Pode ter pequenas variações, mas sem dificuldades você encontrará isso.
Passo 3.
Imediatamente ABAIXO dessa linha, cole o trecho que segue, só mudando o que for indicado.
<b:if cond=’data:blog.pageType == "item"’>
<br/>
<table bgcolor=’#FFFFE1′ style=’border-top: 1px dotted #3A6DA1; border-bottom: 1px dotted #3A6DA1;’ width=’100%’>
<tr>
<td align=’center’ valign=’top’ width=’20%’>Compartilhe:</td>
<td align=’center’ valign=’top’ width=’20%’> <script type=’text/javascript’>
tweetmeme_style = 'compact';
tweetmeme_source = 'NOME_TWITTER';
</script>
<script src=’http://tweetmeme.com/i/scripts/button.js’ type=’text/javascript’/></td>
<td align=’center’ valign=’top’ width=’20%’><a expr:share_url=’data:post.url’ name=’fb_share’ rel=’nofollow’ type=’button_count’/>
<script src=’http://static.ak.fbcdn.net/connect.php/js/FB.Share’ type=’text/javascript’/></td>
<td align=’center’ valign=’top’ width=’20%’><a class=’google-buzz-button’ data-button-style=’small-button’ data-locale=’pt_BR’ href=’http://www.google.com/buzz/post’ title=’Postar no Google Buzz’/>
<script src=’http://www.google.com/buzz/api/button.js’ type=’text/javascript’/></td>
<td align=’center’ valign=’top’ width=’20%’><a alt=’Assine nosso FEED Ferramentas Blog’ href=’URL_ENDEREÇO_FEED‘><img src=’https://ferramentasblog.com.br/imagens/rss-feed-button.png’/></a></td>
</tr>
</table>
<br/>
</b:if>
Destacado de vermelho é o código que define a cor de fundo da tabela, que você pode mudar como for melhor para o layout de seu blog ou simplesmente apagar para ficar transparente.
Já em rosa onde diz "NOME_TWITTER" coloque o nickname do seu twitter.
Por fim, onde está roxo e diz "URL_ENDEREÇO_FEED" coloque o link de seu Feed para as pessoas assinarem.
Salve o modelo e veja o resultado em seu blog.
Isso só aparecerá no rodapé dos artigos quando a pessoas entrar em uma postagem específica.
Outros artigos relacionados:
Olá Marcus.. ótima dica! Vou implementar no SHD.. Só uma sugestão.. se eu quisesse tirar o "compartilhe" e colocasse o um botão para postar no Orkut.. o que eu precisaria fazer? Parabéns pelo blog… cada vez melhor.. tô sempre por aqui.. Abraço do SHD..
OLá Marcos!
Mais uma dica que já coloquei em meu blog e graças a facilidade das tabelas(embora demorem para carregar mais tempo que as divs) eu mudei a porcentagem e acrecentei o botão do orkut que também é um importante meio de divulgação..
Abraço!
Era isso que eu tava procurando.
Todos que eu achava ocupavam muito espaço…
Vlw.
Muito boa essa dica, já coloquei no meu blog (servodecristo.com)
bati cabeça e adicionei o botão do diHITT, ficou muito bom, quando puder da uma olhadinha lá.
Olá Marcos, tudo bem?
Poxa adorei esta barra de ícones, bem prática, discreta, e assim não ficam vários botões logo após o título do post, e que acabava por deixar um visual meio poluído.
Parabéns por mais esta super dica!
Mas tenho uma dúvida, por favor será que você poderia me ajudar Marcos?
É que eu configurei direitinho e consegui colocar em meu blog. Porém, a barra e os botões do buzz e principalmente do Feed, ficou um pouco disforme, não sei se vc me entende.
Acredito que é pelo espaço (largura) disponível ser um pouquinho menor do que o teu.
Mas gostei tanto, que gostaria de deixar lá.
Será que vc poderia me dizer como faço para deixá-la mais harmônica, ou como eu poderia diminuir o espaço entre os botões para que ficasse legal como a tua?
Desde já te agradeço,
Paz e sucesso a ti,
Lucy
Marcos, graças pelas dicas, sempre inovadora. obrigado!!
@Lucy,
como eu disse o melhor é q a área de post tenha ao menos 400px de largura. Pode ser isso o problema que vc teve. Verifique o espaço disponível.
Olá Marcos,
Então, eu estou usando agora um modelo de template do Dicas Blogger que costumizei (DB2.0), e ele tem mais de 400px de largura.
Não é tão largo como o teu aqui, mas tem boa largura. Eu queria saber como diminuir um pouquinho só o espaço entre os botoes se é que isso é possível. Pois foi só o último botão 'rss' que ficou desproporcional, os demais ficaram bons. Na verdade ele coube lá, mas parece ter ficado maior q os demais.
Se pudesse me dar uma 'luz' ficaria imensamente agradecida, pois gostei tanto, queria muito continuar a usar.
Obrigada,
Lucy
@Lucy,
O código que diz "width='100%'" ou "width='20%'" para definir as larguras onde 100% é a largura total da tabela e 20% é a parte de cada ícone.
Se vc achar um ícone menor para o Feed, pode colocar outra imagem.
Ok Marcos,
Obrigada pela atenção, já me deu uma 'luz'.
Ajeitei lá e deu certo, acabei reduzindo a imagem do rss feed. Embora ainda tenha ficado diferente das demais, esta última, o restante consegui ajustar e ficou mais harmônico.
Era o que eu estava querendo.
Obrigada mais uma vez!
Ótimo artigo, Marcos. Era exatamente isso que eu estava procurando. Muito obrigada!
Muito bom !!!
Excelente tutorial,excelente barra!
Criei twitter e entrei no feeds burner só pra colocar
essa barra no meu blog recém-lançado, por saber a importância destes.
Abs e obrigada =)
Antes de tudo parabéns pelo blog. Tem sido uma grande ajuda.
Eu gostava que a barra aparecesse sem que fosse necessário entrar na postagem especifica. É possível?
@GTP,
Basta tirar as condicionais do código que correspondem à primeira e última linhas.
Pingback: Gadgets e Elementos de Página para Blogger Blogspot | [ Ferramentas Blog ]
Seria legal que, nessa barra, que o “buzz” fosse substituído pelo G+. 😉