Botões de Social Bookmarking – Rec6, BlogBlogs, Linkk, Technorati, Digg e Outros – para Blogger Blogspot
UFA!
UPDATE! Ainda não acabou. Estive resolvendo uns erros no código. ATENÇÃO:
Se você já instalou o hack, lamento informar que terá de copiar os códigos de novo. Refaça o processo, pois você terá que inserir a URL do seu blog para que o hack funcione corretamente. As novas instruções estão incluídas no processo de instalação. Com este update, corrigi o problema que estava dando erro ao tentar incluir o blog nos Favoritos do BlogBlogs, e corrigi o link do Technorati, que estava apontando ao post, e não ao blog.
Ainda não sei qual é o problema com o widget de votos do Rec6; assim que descobrir a solução faço uma nova atualização. Peço desculpas pelos transtornos causados.
_________________________________________
Este post me deu um trabalhão, mas finalmente consegui: botões de social bookmarking para Blogger! Esses botões são uma excelente forma de divulgação e fidelização.
Agora você pode ter no seu blog links para os principais Social Bookmarks. Esses links permitem adicionar seus posts aos Favoritos em diversas redes sociais: nos nacionais Rec6, Linkk e Ueba, mais Technorati, Delicious, Digg e Stumble Upon. E como bonus, um link para adicionar seu blog aos favoritos do BlogBlogs!
Achou pouco? Tem mais! Depois de quebrar a cabeça, consegui decifrar o código necessário para incluir o widget do Rec6 que mostra automaticamente o número de votos que seu post recebeu, no melhor estilo Digg. O código disponibilizado pelo próprio Rec6 só funciona com o Blogger Clássico; mas você pode ter esse widget no Novo Blogger também. 
Vamos por partes. Dê uma olhada neste blog, para ver quais são suas escolhas. No rodapé do post, você vai ver duas linhas de botões, aparentemente iguais, se não fosse porque uma tem um ponto de exclamação depois da frase Adicione aos Favoritos!
Passe o mouse sobre os ícones da segunda linha. O texto Adicione aos Favoritos! vai mudar, por exemplo para “Adicionar ao Rec6″. Gostou? Eu também.
Então, porque estou oferecendo duas versões diferentes? Porque para ter esse efeito dinâmico, você precisa usar um arquivo de javascript hospedado por você mesmo, conforme eu expliquei neste post: Como Exibir Sumários dos Posts com Link de “Leia Mais” No Blogger – Blogspot. Se você não quiser ou não souber como fazer isso, pode usar a versão simples. A escolha é sua.
Por favor, leia todo este post antes de aplicar o método que desejar.
Botões de Social Bookmarking para Blogger – Versão Simples
1 - Como sempre, primeiro faça back-up do seu template.
2 - Na Tab “Editar HTML”, clique em “Expandir Modelos de Widget”.
3 - Procure pelo seguinte código:
<p class=’post-footer-line post-footer-line-3′/>
4 - Copie todo o código que está nesta página, e cole logo abaixo dessa linha.
UPDATE: Após colar o código no seu template, procure por esta linha, que está logo no começo do código que você acabou de colar:
<a href=’http://www.blogblogs.com.br/my/gadgets/fave?url=URLDOSEUBLOG‘
SUBSTITUA a parte em vermelho pelo endereço do seu blog, SEM A BARRA / AO FINAL.
Por exemplo: se eu fosse colocar o Blogando por Dinheiro, o final da linha ficaria assim:
/my/gadgets/fave?url=http://blosque.com‘
Cuidado para não inserir nem deletar nada. O problema é que o Blogblogs não aceita a URL com a barra no final, por isso dá erro. Inserindo diretamente sua URL, o problema é resolvido.
5 - Dê um preview. Você ainda não deveria ver nenhuma mudança. Tudo certo? Salve.
6 - Passe às configurações.
Botões de Social Bookmarking para Blogger – Versão Dinâmica
1 - Faça o download do script: clique neste link com o botão direito do mouse, e salve o arquivo favoritos.txt no seu computador.
2 - Mude a extensão do arquivo de txt para js, no próprio Notepad. Simplesmente abra o arquivo, selecione “Guardar como” e substitua favoritos.txt por favoritos.js
3 - Faça o upload do arquivo em sua conta. Uma opção grátis para hospedar seus arquivos é o Google Pages.
4 - Coloque a URL do seu script no seguinte código:
<script src=’Insira aqui a URL do script‘ type=’text/javascript’/>
Por exemplo: se eu estivesse hospedando o script na minha conta do Google pages, a URL seria:
<script src=’http://nospheratt.googlepages.com/favoritos.js‘ type=’text/javascript’/>
5 - Entre na sua conta do Blogger. Como sempre, faça antes um backup do seu template! Na tab “Editar HTML”, clique em “Baixar modelo completo”, e salve uma cópia do template no seu computador.
6 - Procure a tag </head>.
7 - Copie o código do script, com sua URL, e cole-o logo ANTES da tag </head>.
8 - Ainda na Tab “Editar HTML”, clique em “Expandir Modelos de Widget”.
9 - Procure pelo seguinte código:
<p class=’post-footer-line post-footer-line-3′/>
10 - Copie todo o código que está nesta página, e cole logo abaixo dessa linha.
UPDATE: Após colar o código no seu template, procure por esta linha, que está logo no começo do código que você acabou de colar:
<a href=’http://www.blogblogs.com.br/my/gadgets/fave?url=URLDOSEUBLOG‘
SUBSTITUA a parte em vermelho pelo endereço do seu blog, SEM A BARRA / AO FINAL.
Por exemplo: se eu fosse colocar o Blogando por Dinheiro, o final da linha ficaria assim:
/my/gadgets/fave?url=http://blosque.com‘
Cuidado para não inserir nem deletar nada. O problema é que o Blogblogs não aceita a URL com a barra no final, por isso dá erro. Inserindo diretamente sua URL, o problema é resolvido.
11 - Dê um preview. Você ainda não deveria ver nenhuma mudança. Tudo certo? Salve.
12 - Passe às configurações.
Configurações
A esta altura, você não vai ver os botões na Home do blog, pois eles estão configurados para aparecer só nas páginas dos posts. Se você prefere que eles apareçam na Home também, volte ao trecho de código que você adicionou após a linha <p class=’post-footer-line post-footer-line-3′/> e delete a primeira e a última linha, isto é:
<b:if cond=’data:blog.url != data:blog.homepageUrl’> e </b:if>
Se você não quer que os botões fiquem centrados, delete também as tags <center> e </center>. Eu já explico como usar outro alinhamento.
Você deve adicionar isto ao seu CSS, de preferência na parte onde estão os estilos do post:
.favoritos {
font-weight: bold;
}
.favoritos img {
border: none;
}
Note que antes de “favoritos” há um ponto. Não é erro, é assim mesmo.
No primeiro grupo, você pode configurar a fonte, margens, e o que mais quiser. Se você eliminou as tags que centralizam os botões, insira abaixo de font-weight: bold; esta linha: float: left;
Isso fará com que os botões fiquem à esquerda. Se quiser à direita, substitua left por right.
O segundo grupo faz com que os ícones não tenham borda. Se quiser que as bordas apareçam, delete-a. Se souber como, pode alterar essa linha para configurar as bordas como quiser. Nesse grupo também pode definir margens ou padding para os ícones.
Uma palavrinha sobre os ícones: os links que estão nos códigos apontam à imagens que estão hospedados na minha conta do Google Pages. Aconselho que você faça download delas e hospede-as você mesmo – nesse caso, não esqueça de trocar as URLs das imagens. É só procurar as linhas como esta:
src=’http://blogandopordinheiro.googlepages.com/stumbleupon.gif’
As imagens estão todas depois de src= Cuidado para não deletar as aspas que estão antes e depois da URL. Se você não quiser hospedar as imagens, não me oponho; mas não vou aceitar queixas caso os links deixem de funcionar por algum motivo.
Dê um preview, se tudo estiver certinho, salve. Já está pronto! Agora você tem links de social bookmarking no seu Blogger – Blogspot.
Widget com Número de Votos no Rec6
Este é bem mais simples de instalar.
1 - Como sempre, primeiro faça back-up do seu template.
2 - Na Tab “Editar HTML”, clique em “Expandir Modelos de Widget”.
3 - Procure pela seguinte linha de código:
<p><data:post.body/></p>
4 - Cole este código logo ANTES dessa linha:
<div class=’rec6′>
<script expr:src=’”http://rec6.via6.com/link.php?action=widget&url =” + data:post.url’ type=’text/javascript’/>
</div>
5 - Na parte do CSS onde estão os estilos do post, cole este trecho de código:
.rec6 {
float: left;
margin: 5px;
}
.rec6 img {
border: none;
}
Se você prefere que o widget apareça à direita, troque left por right. Pode aumentar ou diminuir a margem, colocar padding, etc.
6 - Dê um preview. Tudo certo? Salve!
Ainda não coloquei os botões de Social Bookmarking aqui porque não me deu tempo – mas testei tudo no blog onde você pode ver o script em funcionamento. Logo vou colocar tudo por aqui também.
Hack Original: Beautiful Beta
ACABOU!
UPDATE: Botões de favoritos e compartilhamento (Social Bookmarking)
Criação do Gregori Pavan – versão com 30 botões!
Compare Preços de:
Blog: Comunicação e Escrita Íntima na Internet
Blogs! Seja Um Editor na Era Digital
Alavancando Negócios na Internet
E mais: Acessórios para Internet, Ferramentas, DVD, Filmes, Celulares, Notebooks, Câmeras, Jogos, Wii, PS3 no JáCotei
Excelente dica!
Parabéns mesmo!
Estava procurando algo
assim pra por no novo template
do meu blog =D
[]’s
Digg is currently only an English-language content site. Please do not submit non-English content. [retirado do FAQ do Digg]
Enfim, sempre achei ridículo colocar botões do Digg em sites em português, mas cada um faça como quiser…
Já estou usando a dica, valeu.
Excelente! Parabéns! Foi uma mão na roda.
Sempre leio este blog e quero aproveitar a oportunidade para agradecer pelas dicas e dar-lhe, mais uma vez, os parabéns!
Abraços
Nosph, muito agradecido, ficou show os botoes para os bookmarkings.
O unico problema que tive foi com o botão de total de votos do rec6, por mais votos que a noticia tenha, sempre aparece 1 voto la. Não muda nada…
O que fazer?
Nosph, sem querer ser chato, mas só apra avisar
O esquema não esta favoritando no blogblogs, não esta encontrando a url do blog a ser favoritado.
E pelo que eu vi, a url que esta sendo cadastrada é a do post em questão, e não só a url do blog, era para ser assim mesmo?
No rec6 e no ueba parece que esta tudo ok.
Se encontrar mais alguma coisa estranha volto a informar
cadê que eu consegui fazer isso? Fiz exatamente como você mandou, mas no meu blog não apareceu nem pelo caramba.
Tentei aquele squema do blog do noel que também não funcionou pra mim.
Nunca vi template pra recusar favoritos como esse meu. Só consegui o do rec 6. O dos outros, nem a pau, Juvenal.
Bem, fiz exatamente como vc passou e ficou uma blz. Tudo bem que tive que atualizar pro modelo de layouts mas ficou uma blz!
obrigado Nosph (nome complicado, hein?)
Veja a obra que seu “aluno” fez:
http://meus365dias.blogspot.com/
um abraço!
A todos: Havia uns problemas com o hack, por favor leiam o post de novo, se ainda não o fizeram! Desculpem os transtornos!
PsyPlanet: Que bom, obrigada! Se tiver algum problema de instalação me avise, sim?
Daniel: Eu não uso o Digg por causa disso. Mas quanto tu acha que ia demorar pra que aparecesse alguém reclamando, se eu não tivesse colocado o Digg?
Se quiser retirar o Digg da lista, procure no código as linhas dele (o link e o link da imagem) e delete. Qualquer coisa, me avise.
Leandro: Muito obrigada!
W Brown: Obrigada pelo aviso! Os problemas dos botões já estão corrigidos; ainda não sei qual é a “questã” dos votos do Rec6. Estou trabalhando nisso! Assim que resolver posto de novo.
Philipe: Pelo que vi, seu template não tem a linha 3 no rodapé do post. Se quiser, me mande um email que eu te dou uma ajuda! E aí você me explica o que é o esquema do blog do noel, porque mim não sabe!
Fabio Santos: Show de bola, meus parabéns! Você vai longe! Gostei do seu template, e vi que você anunciou que vai ficar melhor ainda… Muito legal, boa sorte!
Olá moça, estou tentando adicionar mas as imagens ficam empilhadas, sabe o que pode ser?
Olá, estou com um problema com o Rec6, não importa quantos votos eu tenha, só aparece como “0″.
Obrigado pelo tutorial =)
Me desculpe, já consegui!
Ola
td bem?!
Eu não sei o que aconteceu direito mas eu fiz exatemente como você falou e quando eu fui tentar me favoritar no blogblogs ele entrou no blogblogs mas disse não achar a url do meu blog.
Eu revisei todos os passos, refiz e tal mas mesmo assim não tive sucesso.
Depois de algumas tentativas eu substitui o caminho inteiro que vai direto salvar no blogblogs e deu certo.
Eu fui ver o que tinha de errado e a única diferença era que não tinha o www e que TINHA o / no final. Por isso eu achei muito estranho.
Muito obrigado pelas dicas no seu blog.
Continue sempre assim que todos agradecem. abraço
Obrigado por mais esse tutorial,consegui colocar no meu blog aparecendo na Home.
Ostrock: Veja se não há alguma quebra de linha entre elas. Se não, pode ser alguma configuração no CSS que esteja afetando essas imagens, com margens ou padding. Se não, não sei!
Anônimo: Sim, o botão do Rec6 tem esse problema. Ainda não pude descobrir como resolver – se você resolveu, poderia me passar a solução, assim eu compartilho com os leitores? Obrigada!
Caps Lock: Estranho mesmo, pois eu só consegui fazer isso aí funcionar tirando a /! Obrigada pela dica.
Pafu’s: De nada!
Errado -
cio.us/post?url=” + data:post.url + “&t=” +
corrija o trecho do del.i.cio.us
Errado -
io.us/post?url=” + data:post.url + “&t=” +
ta faltando o Title!]
bjim
Depois que vi seu post, resolvi alem de adotar, aumentar.
Voce dava 8 opçoes, eu adaptei e fiz um rack com 30.
Os botões são para BlogBlogs, Technorati, Google Bookmarks, Yahoo, Ma.gnolia, Stumbleupon, Blinklist, Furl, Simpy, Spurl, Reddit, Segnalo, Bluedot, Ueba, Rec6, Linkk, Linkto, Websapiens, Ouvi dizer, Do melhor, Jasabia, Eu curti, Subindo, Linkloco, No clique, Med News, Blogosfera, Do tipo, Fixolas e Planet News.
Ficaria feliz que voce fosse ve.
Meu blog é http://gregoripavan.blogspot.com
Agradeço pelas suas dicas… e espero que as minhas tambem sejam uteis!
Gregori Pavan
http://gregoripavan.blogspot.com
Ah outra coisa como voce faz pra destacar suas respostas nos comentarios?
É que eu sou novo no blogger, antes eu tinha blog no UOL, mas tive alguns problemas… mas la, tinha um sistema que voce podia responder os comentarios. Aqui no blogger eu nao achei, e pelo que vi voce fez uma adaptaçao!
Aguardo resposta,
Gregori Pavan
http://gregoripavan.blogspot.com
Achei interessante esse post, como poderia fazer isso num blog do uol?
Ufa, não é por acaso que o inicio do post começa assim, finalmente acabei. Demorei um pouco para comentar porque estava testando um a um para ver se estava tudo ok pois vi alguns comentários com problemas, ainda bem deu tudo certo. Parabéns pelo trabalho. Se só para seguir as dicas achei difícil imagine ter que fazer tudo isso sozinho, na marra. Isso mostra o quanto eu ainda tenho que aprender.
Ficou muito show!!!
dedodeouro: Não vejo o que é que está errado, onde eu uso o hack o title aparece corretamente.
Gregory: Muito bom seu trabalho, está linkado no post. São úteis com certeza!
Quanto aos comments, já está na lista de posts a serem publicados.
Vivi: Infelizmente, não sei nada de blogs do UOL. Que tal mudar para o Blogger?
Mauro: Obrigada!
Na minha Template não tem essa linha
p class=’post-footer-line post-footer-line-3
Muito obrigado pela ajuda!
Dica esperta, e muito bem explicada.
Valeu!
Abração
Eduardo: Procure post-footer-line – o que você precisa achar são as linhas do rodapé do post. Podem ser um pouco diferentes, mas existem.
Se só existem duas linhas, Crie uma 3º linha usando o código do passo 9 (o do footer-line-3) e fechando com a tag apropriada. Daí, é só colar o resto do código como está explicado no post.
Ismael: De nada, volte sempre!
ufa!
que trabalheira, hein?
só que não sei se eu fiz alguma coisa errada, mas os botões não ficaram na horizontal… ficou um debaixo do outro.. dá uma olhada:
http://www.dramabarroco.blogspot.com
=).
Suelen, pelo que vejo esse é um problema do template que você usa (que deve ser o mesmo que causou o problema do Ostrock, mencionado lá em cima).
Experimente inserir esta linha de código, no CSS:
display: inline;
Logo após o :
border: none;
Deve ficar assim:
border: none;
display: inline;
Acho que isso resolve. Me avise, sim?
Errado:
io.us/post?url=” + data:post.url + “&t=” +
Certo:
io.us/post?url=” + data:post.url + “&title=” +
De novo?
Olá, Para criar o versão dinâmica nos passos abaixo:
6 – Procure a tag .
7 – Copie o código do script, com sua URL, e cole-o logo ANTES da tag .
8 – Ainda na Tab “Editar HTML”, clique em “Expandir Modelos de Widget”.
Eu acho que deveríamos expandis os modelos de widget antes do passo 6, por que se fizermos isso depois as alterações do passo 7 serão desfeitas.
Obrigado pelas dicas
Ola Nospheratt, tudo bem! Bom bom seu post, usei ele para atualizar meu template, só que os votos do Rec6 estavam dando problema no XML não é?. Não sei se você achou a solução mas para resolver eu troquei o trecho
action=widget&url
por
action=widget&url
Além das aspas que eu também precisei trocar!
Escrivi um post no meu blog explicando http://malcomtux.blogspot.com/2007/12/social-bookmark-e-votos-rec6-no-novo.html
Espero ter ajudado!
Ops! Não saiu! É
action=widget&url
por
action=widget&url
Nossaaa!!!
Caramba esse seu site eh nota mil. Vlw!!!
COntinue ajudando a galera ai.
Viva Nospheratt!!! ^^
Abraços!
Bye!
Marcelo Dantas: Você tem razão, faltaria um “Salvar” antes do passo 8. Obrigada pelo toque, vou dar um update no post assim que puder. Valeu!
Malcomtux: Putz, Milhões de obrigadas! Vou dar update no post com sua dica e linkar você (depois das festas, que ninguém é de ferro). Obrigada!!
Hideki: Muito obrigada, continuarei. Volte sempre!
De nada, novo leitor as ordens! E desde já agradeço o link! Meu blog já tem um tempo mas agora que estou tendo tempo para me inteirar mais, sou praticamente um novato na blogosfera!
Seja bem vindo, é um prazer tê-lo por aqui!
Só te peço paciência, ainda estou em ritmo de fim de ano, hahahahaha. Após o 7 de Janeiro creio que volte ao ritmo normal de trabalho.
eeiiii
socorro
voces sabem como aumentar o numero de votos no orkut?
estao falando q È um cdigo?
mas qual seria esse codigo?
mea judem por favo !
mandem um email se possivel q È melhor
Caah: Não faço idéia.
eu nao saio do inicio…
quando tento por
“”
antes do
o erro é esse…
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Open quote is expected for attribute “{1}” associated with an element type “src”.
eu nao saio do começo, quanto tento por
script src=’http://ygor.iaiaiaiaia.googlepages.com/favoritos.js‘ type=’text/javascript’/
(obs, nao pus “>” e “<” pq senao nao aparecia nos comments como acima)
antes do / head
o erro é esse
“Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Open quote is expected for attribute “{1}” associated with an element type “src”.”
Excelente Post, Parabéns, fiz tudo o que você recomendou e agora meu BLOG está com os Botões de Social Bookmarking! Você merece muito que eu, novato Bloggueiro, insira o teu BLOG nos meus prediletos!
Tem uma observação que preciso fazer: Sabe esse código, que você postou lá encima:
<a href=’http://www.blogblogs.com.br/my/gadgets/fave?url=URLDOSEUBLOG‘, além de outros grifados em vermelho?
Se nós selecionarmos ele é colarmos diretamente no HTML do BLOGGER, o BLOGGER não aceitará a formatação devido ao símbolo ANTES DO HTML e depois do URLDOSEUBLOG estar em desconformidade.
Tive de colocar esses símbolos novamente pois o GOOGLE os enxerga como sendo símbolos não aceitáveis, não me pergunte porque! A solução foi simples: no lugar deles, inseri o Símbolo “‘” (sem as aspas) e o Google reconheceu.
É só uma observação, pois outras pessoas podem estar passando por isso na hora de “copiar” e “colar” o código dentro do código do TEMPLATE!
Abração e Parabéns novamente!
Nospheratt, muito obrigado pelas dicas colocadas em seu blog. Tenho tentado seguir à risca o que você, o Compulsivo, a Cláudya e a Érika tem dito, pois minha vida, ou melhor, minha relação com o meu blog (pásmem) foi muito facilitada. Valeu!
Aragão: Se não é problema com as aspas – conforme eu falei antes, ao copiar o código você tem que substituir os acentos por aspas e aspas duplas – não sei o que pode ser.
Marquinhos: Muito obrigada por compartilhar a dica. O que aconteceu foi que quando migrei do Blogger para o Wordpress, o WP trocou todas as aspas por acentos. Ainda não consegui resolver isso – eu arrumo os códigos, e lá pelas tantas eles estragam de novo.
Ainda vou ver se consigo um plugin que resolva isso.
Rogério: De nada, fico realmente feliz em ser útil! Volte sempre!
Cara, muitíssimo obrigado pela dica acima. Meu blog ficou show de bola! Se puder dar uma olhada e me indicar outras ferramentas que possam melhorar meu blog eu agradeço. Obrigado. Abraços.
Gostaria de adicionar o ícone do Twitter, ou de outros serviços. É possível?
Testei essa budega aqui e deu certinho, perfeito, só que ao invés de usar os ícones criados por você utilizei aquele botão do AddThis, Vlw pela dica!
O script funciona, mas o FireBug acusa erro:
bookmarktext is null
document.getElementById(bookmarktext.id).innerHTML = sbValues[index];
Você sabe como consertar isso?
Olá, já cliquei em “Expandir Modelos de Widget”, mas eu não estou conseguindo localizar a linha
Eu posso criar essa linha?
Na minha template não tem essa linha post-footer-line
Não conseguir colocar da forma dinâmica.. Eu pensei que seria até difícil de achar um local pra hospedar o .JS. Já que o Google Pages não funciona mais. Conseguir encontrar o serviço DropBox. Só que tá dando um outro tipo de erro na hora de vizualizar o blog.