Bom pessoal, estava tentando adicionar botões de social media bookmark no meu blogspot, como aqueles ícones do DIGG, DELICIOUS, Technorati, StumbleUpon, Reddit, RSS … e demorei um tempo para achar uma solução que realmente funcionasse.
Agora, compartilho a solução com vocês:
Começando
- Após logar na sua conta do Blogger, vá para a aba LAYOUT e escolha EDITAR HTML.
- Marque o checkbox onde diz “Expandir Modelos de Widget“. Ele precisa estar marcado!
Onde colocar o código?
Se o seu template de blogger for um dos padrões, procure dentro do código html o seguinte trecho (ou algo parecido): <div class=’post-footer’> e insira o código dos botões acima ou abaixo, conforme mostra a figura.
Caso você use um template personalizado, deverá achar o melhor local para inserir o código do social media bookmaring (no fim dos posts). De preferência, tente achar as linhas do código html referentes ao lugar onde os comments são inseridos, e insira o código acima delas.
Veja a imagem que mostra aonde você coloca o código, caso use templates padrão.
Agora, existem dois códigos que podem ser utilizados: o primeiro usando imagens(ícones) e o segundo código usa texto puro.
Código para exibir ÍCONES de Social Bookmarking Media:
<!-- Start of social bookmarks. Check http://scrapur.com/ for updates -->
<a target="_blank"><img src="http://i264.photobucket.com/albums/ii189/scrapur/1.gif" alt="Digg" /></a>
<a target="_blank"><img src="http://i264.photobucket.com/albums/ii189/scrapur/2.gif" alt="Technorati" /></a>
<a target="_blank"><img src="http://i264.photobucket.com/albums/ii189/scrapur/3.gif" alt="del.icio.us" /></a>
<a target="_blank"><img src="http://i264.photobucket.com/albums/ii189/scrapur/4.gif" alt="Stumbleupon" /></a>
<a target="_blank"><img src="http://i264.photobucket.com/albums/ii189/scrapur/5.gif" alt="Reddit" /></a>
<a target="_blank"><img src="http://i264.photobucket.com/albums/ii189/scrapur/6.gif" alt="Blinklist" /></a>
<a target="_blank"><img src="http://i264.photobucket.com/albums/ii189/scrapur/7.gif" alt="Furl" /></a>
<a target="_blank"><img src="http://i264.photobucket.com/albums/ii189/scrapur/8.gif" alt="Spurl" /></a>
<a target="_blank"><img src="http://i264.photobucket.com/albums/ii189/scrapur/9.gif" alt="Yahoo" /></a>
<a target="_blank"><img src="http://i264.photobucket.com/albums/ii189/scrapur/9.gif" alt="Simpy" /></a>
<!-- End of social bookmarks -->
Código para exibir LINKs de Social Bookmarking Media:
<!-- Start of social bookmarks. Check http://scrapur.com/ for updates --> <span style="font-size: 85%;"> Add Post To: | <a target="_blank">Digg</a>| <a target="_blank">Technorati</a>| <a target="_blank">del.icio.us</a>| <a target="_blank">Stumbleupon</a>| <a target="_blank">Reddit</a>| <a target="_blank">BlinkList</a>| <a target="_blank">Furl</a>| <a target="_blank">Spurl</a>| <a target="_blank">Yahoo</a>| <a target="_blank">Simpy</a>| </span> <!-- End of social bookmarks -->
Obrigada, estava procurando um modo de incluir apenas uma das redes sociais e o modo como está ordenado permite selecionar apenas algumas da lista. Perfeito!
Oi, é possível “disponibilizar” o código de todas as redes sociais? Ou seja.. por o código igualzinho tá no seu site?! Se possivel e-mail-me! Ficaria mto grato!
Bom Post! Bom Blog!
Flw!
Compeltando o “pedido” se possível. Com faz pra dar esse efeito fade nos botões que ficam “claros” qnd se passa o mouse em cima?!
Olá DaM,
incentivado pela sua dúvida, fiz o seguinte post:
Sociable WordPress Plugin – Ícones de Social Bookmarking
Dá uma olhadinha e me diz se ajudou, ok?!
Um abraço,
Rodrigo Filardi
Olá!!!
Valeu pela dica, já coloquei no meu blog.
Gostaria de incluir estas que estão no teu blog, seria possível vc disponibilizar o código por e-mail para que eu possa inclui-las.
Desde já agradeço.
Rose
Olá Rose!
Meu pai mora ai em Belém, tem muitas coisas gostosas para comer mesmo!
Dei uma passadinha no seu blog… que bom que eu tinha acabado de almoçar, senão ia ficar morrendo de fome com tantas receitas saborosas! rs
Aliás, sou mais um assinante do seu RSS, tá!
Esse código que uso no meu blog na verdade é um plugin para wordpress, já vem tudo pronto. Você só entra na área administrativa do plugin e seleciona quais você quer inserir, numa listagem de mais de 40 sites socias!!!
Se você tiver um blog em wordpress, poderá utilizar esse plugin chamado Sociable. O link dele é: http://yoast.com/wordpress/sociable/
Grande abraço!
Rodrigo Filardi
muito obrigado pelas dicas!!
já coloquei os botões no meu blog!!!
t+
Parabéns,
Muito bom seu artigo e me ajudou muito (e veio bem a calhar).
Bem na semana que fiz um artigo sobre Social Media…
Abraços
Rodrigo valeu mesmo cara!
As redes sociais hoje são uma grande sacada na web, seja para fazer amigos, clientes, compradores, ganhar popularidade, ou, simplesmente conhecer + pessoas, e sua barra me ajudou muito!
Abaixo o link que utilizei para fazer meus posts resumidos, mas vale o detalhe: Os posts antigos só terão aplicados a dica se você reeditá-los!
http://blosque.com/2007/07/como-exibir-sumrios-dos-posts-com-link.html
Abraços!
Oi, parabéns pela matéria.
Existe um serviço que agrega todos estes bookmarks, é o AddThis:
http://www.addthis.com
Aproveitando, eu uso o Favoritus para guardar meus bookmarks:
http://www.favoritus.com.br
ou
http://www.favoritus.com
Olá!!!
Muito boa a ferramenta, estava procurando por isso a muito tempo.
Porém, os links dos ícones não estão funcionando, inseri no meu site e no lugar de cada ícone aparece uma imagem de erro do photobucket. Por isso troquei pelo link.
Como faço pra deixar igual do seu site?
Obrigada!
Parabéns!Ótimo artigo e de fácil execução!
Muito obrigada pela dica, utilizava os “sexy bookmarks” no entanto, mudei de template e o mesmo se tornou inútil… Valeu!!!
Olá Rodrigo!
Obrigada pelo comentário. E sim, é um Blogger meu site, com muito orgulho kkkkkk. Um tema free que personalizei…E já utilizava fazia algum tempo. Até mais xau xau!
Estava mesmo procurando por um código assim. Estou precisando dar uma divulgada nas minhas postagens.
Olá, eu estou procurando on line exatamente esse serviço que você usou!
com os botoezinhos subindo ao passar o mouse.. é o mesmo que você acabou de postar no exemplo? creio que n ão, porquê a aparência é outra.. mas se for outro site, poderia me enviar por e-mail por favor? ou aqui mesmo como resposta, se não for muito incômodo! obrigada desde já, aguardo resposta!
;**
O Add this é a melhor ferramenta, utilizo-a no meu site.
qual é o código para deixar os bookmarks igual no seus site?