Códigos e Scripts Vanessa S.
Exibir Twitter Trackbacks no rodapé dos posts no Blogger
Mike More desenvolveu um script que permite mostrar em nosso blog, todos os backlinks ou trackbaks (RTs) que seus artigos receberam, ou seja, os links dos seus posts que foram enviados no Twitter. Também é uma boa forma de divulgar as pessoas que linkaram seu conteúdo.
Para quem não sabe,Trackbacks, são “links de retorno“, é algo como “caminho de volta“, e é um recurso muito utilizado no Blogger.
Quando você cria um artigo e alguém linka este artigo, ao final da sua postagem, aparecerão os backlinks que seu artigo recebeu (links de retorno). É óbvio que para isto você deve ter habilitado links de retorno no seu blog.
Agora é possível exibir os trackbacks dos seus artigos no Blogger, que foram enviados através do Twitter.
Se você quiser exibir em seu blog os Trackbacks (RTs) do Twitter que seus posts receberam, siga os seguintes passos.
Vou disponibilizar 2 modelos de listas para exibição:
1) Lista Animada – Demo
2) Lista Fixa – Demo
Importante: Este script funciona em conjunto com a biblioteca do JQuery, caso você já tenha esta biblioteca instalada em seu blog, não será necessário repetir a chamada dela.
Opção 1) Trackbacks Twitter em Lista Animada
1. Copie o conteúdo deste arquivo.txt
2. Abra o bloco de notas e cole o código que você copiou.
3. No local indicado (destacado em vermelho) inclua o endereço da sua imagem/icones que aparecerá no título.
4. Agora salve o seu documento: vá em “Arquivo >> Salvar como”, selecione “Tipo” como “Todos os arquivos” e nomeie o arquivo como twittertrackbacks.js (pode ser qualquer outro nome, só não esqueça do “.js” no fim do nome do seu arquivo)
5. Depois hospede o arquivo em seu próprio site de hospedagem.
– Veja relação com opções de Sites para hospedagem de arquivos.
6. Agora você deve inserir o link do Arquivo Hospedados no local indicado no código:
Acesse o painel do blogger, no menu “modelo”, clique em “editar html” e procure por </head>
Copie o código abaixo e cole ANTES de </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="URL-DO-ARQUIVO-TWITTERTRACKBACKS.JS"></script>
Agora vamos escolher o local para exibição dos Trackbacks.
1.1) Trackbacks exibidos antes dos comentários:
Procure por:
div class='post-footer-line-3'
e cole logo ABAIXO dela:
<div class="twitter-trackbacks"><h4>Twitter Trackbacks</h4></div>
1.2) Trackbacks exibidos abaixo dos comentários:
Procure por:
p class='comment-footer'
e cole logo ABAIXO dela:
<div class="twitter-trackbacks"><h4>Twitter Trackbacks</h4></div>
Opção 2) Trackbacks Twitter em Lista Fixa
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="URL-DO-ARQUIVO-TWITTERTRACKBACKS.JS"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('div.my-trackbacks').twitterTrackbacks({
n:10
,show_n:0
,inf_tip:1
});
});
</script>
Escolha o local onde quer que seja exibida a lista com os Trackbacks, seguindo os mesmos passos do tópico 1.1(antes dos comentários) ou 1.2(abaixo dos comentário), a única diferença é que neste script você deverá (abaixo do local que escolheu) colar este código:
<div class="my-trackbacks"><h4>Twitter Trackbacks</h4></div>
Aplicar estilos:
Agora você pode incluir estilos CSS, para isto procure pela tag: ]]></b:skin>
E cole ACIMA dela:
/* Titulo do widget */
.twitter-trackbacks h4{
margin:20px 15px 10px 0;
padding: 12px 0px 5px 30px;
font-weight:bold;
font-size: 18px;
color:#xxx;
}
/* Container com os trackbacks */
ul.ttw-inner{
height:60px;
padding:2px;
}
ul.ttw-inner li{
float:left;
overflow:hidden;
list-style-type:none;
position:relative;
padding:2px 2px 4px 2px;
margin:1px 0 5px 0;
border:1px solid #999;
padding:5px 5px 5px;
color:#xxx;
}
/* Autor Imagem */
ul.ttw-inner span.ttw-author-img{
display:block;
width:45px;
height:45px;
margin:0 5px 0 6px;
overflow:hidden;
left:0;
position:absolute;
}
/* link do Autor */
ul.ttw-inner strong a{
margin-right:5px;
}
/* Corpo da mensagem */
ul.ttw-inner span.ttw-body {
display:block;
margin-left:40px;
}
/* linha retweet data e reply */
ul.ttw-inner span.ttw-meta {
display:block;
font-size:60%;
margin:3px 0 0;
}
/* estilos dos links retweet data e reply */
ul.ttw-inner span.ttw-meta a{
text-decoration:none;
color:#xxx;
}
ul.ttw-inner span.ttw-meta a:hover{
text-decoration:underline;
color:#xxx;
}
Obviamente que você DEVE editar as definições dos estilos CSS de acordo com o estilo do seu template.
No código acima eu destaquei cada trecho com uma cor diferente para facilitar que você entenda o que cada trecho se refere.
Só serão exibidos Trackbacks em posts que receberam RTs, mesmo que sejam postagens antigas. Os trackbacks aparecerão somente nas suas postagens que foram Retwittadas.
Confira o script instalado no Blogosfera Legalizada, entre no post e verifique logo abaixo dos comentários recebidos, e aproveite e Retweet o artigo e apareça na lista dos Trackbacks enviados!
[alerta]ATENÇÃO: A funcionalidade deste script pode variar de acordo com o template.
Templates que possuem muitos scripts, acabam gerando “conflitos” entre si.
Caso este script não funcione em seu blog, verifique os demais scripts instalados no seu template e faça uma avaliação de quais realmente são mais necessários.
Para melhor entendimento, leia este artigo:Por que alguns scripts não funcionam no meu blog. [/alerta]
Ok, Clau, vou tentar ajustar. Obrigado
Prof_Michel
Infelizmente não tenho como saber o que ocorreu no seu template. Vc vai ter que tentar mexer no css, fazendo testes e visualizando até conseguir ajustar tudo conforme vc quer, mas não esqueça de fazer um backup antes viu, pra evitar transtornos se algo sair errado.
Oi, Clau, o script funcionou perfeitamente abaixo dos comentários, mas eu não estou conseguindo configurar o CSS, sendo que a imagem e os espaços estão desproporcionais. Alguma sugestão neste sentido? Obrigado.
Muito bom… Adorei!
Clau o script não está funcionando mais no meu blog, vc sabe qual deve ser a causa?
Pois então, só fiz a pergunta besta pois por mais que eu tente, só aparece o título e nada de RT. Mas obrigada, mesmo assim. Vlw!
Sybylla
ué, é só verificar se no seu template existe algum arquivo com essa chamada:
http://ajax.googleapis.com/ajax/libs/jquery/
Como eu sei se o JQuery está instalado no blog?
Thiago
Se o seu perfil do twitter tiver cadeado, os tweets não irão aparecer mesmo.
Clau, desculpa encher mais uma vez [com esse eu acho que são 5 comments] =X
Mas os retweets do novo twitter não aparecem…
Você sabe se tem como concertar isso?
abraço e desculpa por tanto comentário assim =X
[esse foi o ultimo, prometo] G_G
Dessa vez deu certo, eu fiz hospedei e não apareceu! Nada! Não ocorreu nenhum erro! Tem haver com JQuery?
Tipo, é pq não consigo hospedar, eu hospedo e quando ponho o link dá erro!
Lucas Rafael
Cada usuário deve hospedar os seus arquivos utilizados em seus blogs. Se eu hospedo em um site e disponibilizo apenas o link para os usuários usarem, ai depois eu resolvo excluir a minha conta,ou o próprio site acaba retirando o arquivo do ar, igual aconteceu com o Tynipic. Como que fica os usuários? Os arquivos vão simplesmente desaparecer, e os recursos deixarão de funcionar, por isso que cada um deve hospedar seus próprios arquivos nos sites que quiserem. Eu listei vários sites gratuitos para hospedagens, é só escolher um e pronto.
Clau,já que no tutorial precisa hospedar o arquivo .js
pq vc já não coloca no tutorial o arquivo hospedado!
Eu não tô conseguindo hospedar!
Atualiza.
Bjos
Clau,
Aparece esse código de erro:
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: The reference to entity "hl" must end with the ';' delimiter.
Clau,
obrigado pela atenção. Mas não deu certo e no momento desisti. Favoritei o artigo para quando trocar o template, ou contrate seus serviços para fazer uns ajustes no atual que gosto muito.
@Herege
Oi, Clau
Gostei muito do post e do efeito que traz ao blog.
Fiz como manda o tutorial e salvei. Depois voltei para trocar cores etc. e nunca mais consegui salvar. Fica aparecendo a seguinte mensagem: The reference to entity "d" must end with the ';' delimiter.
Impossível verificar todos os fechamentos da folha de estilos…infelizmente.
De qualquer forma, parabéns pelo seu trabalho.
Abraços
@Sr. De Tudo um Pouco:
Imagina, eu quem agradeço. E volte sempre que precisar viu…^^
De nada Clau, tô sempre aqui para ajudar, gosto muito do seu Blog, sempre uso as Dicas dele para melhorar meus Blogs, e ajudo avisando quando houver erros para que outras pessoas não tenham também.
Abraçoss e Obrigado por arrumar o Link do TwitterTrackbacks no Post.
@Sr. De Tudo um Pouco:
Já arrumei o link, tenta fazer download de novo.
Obrigada por me avisar.
Clau, o Link do arquivo do twittertrackbacks.js ( http://docs.google.com/Doc?id=19dPihl0AKW7eBlB-kX-bPFu1HKN1UIjxsn3J4FolVoo )não está abrindo.
eu queria fazer este update, espero seu retorno.
Abraços.
@Gizaa Veiga:
Que bom que conseguiu..
eu andei descobrindo uma falha no arquivo js do proprio criador do script, vou arrumar e atualizo o post, incluindo o link com o js corrigido.
Obrigada pela visita.
Já "dei um jeito" hehehe, obrigadaa 😉
Olá!
Estou "quebrando a cuca" com esse script rsrs
Ele funcionou,mas não sei por que o título não aparece, e fica tão esquizito assim… oque será?
Mesmo assim, super obrigado, adoro o Gothic !
[]s
parece meio louco coloquei antes dos comentarios e funcionou já tinha tudo pronto só mudei a div do Twitter Trackbacks e funcionou mais quando coloco abaixo de p class='comment-footer não funciona,sem explicação (ou tem?rsrs)
Abraço!
@webprincipiante.com:
Olha pelo que vi, vc incluiu na parte onde deveria ficar os backlinks do Blogger. Se vc mexeu na parte dos backlinks eu não sei como te ajudar, pq aqui no meu template, eu utilizo o modo backlink padrão do blogger. Não acrescentei hack nenhum, só acrescentei um icone, mas não mexi no código, e pra mim, aparecem 2 'comment-footer', e eu acrescentei o twitter trackbacks antes desse aqui:
<p class='comment-footer'> <b:if cond='data:post.embedCommentForm'>
Agora no seu template, não tenho como saber como é esta área, pq para cada caso é um caso.
OLá!
Só gostaria de saber porque no meu não aprece nada, e tenho rt no meu ultimo é 7 e não aprece só fica escrito twitter trackback,poderia me ajudar fiz como dito aqui não da erro nenhum só não aparece e olha que não tenho muitos scripts no blog, e aproveitando parece que o backlinks que o compulsivo fez um tuto não funciona na hora de colocar a div do backlink some a postagem não sei porque e vi que você tem aqui até acrescentou um icone..
Obrigado pela atenção!
oi clau, já estou começando a refazer todas as suas postagens plagiadas como também as de outros blog !
que leia essa minha postagem !
http://reidobloguinho.blogspot.com/2010/03/tirando-as-postagens-plagiadas-dos.html
quando eu acabar de refazer eu te aviso !
Ótima dicam eu estou pensando em talvez usar.
Gostaria de dar uma sugestão, uma vez que gosto e sempre acompanho seu blog: existe um recurso em um site que deixa os comentários do blogger bem melhores que o do wordpress, com uma funcionalidade muito grande para os visitantes, não vi essa dica em nenhum blog que fala do mesmo assunto que o seu. O site é o Disqus.com
Apliquei em meu blog essa semana e mudou muito a cara dele, deixou muito melhor, e é facilímo de instalar. Tenho certeza que os leitores do seu blog irão gostar.
Se quiser ver como ficou visite meu blog e confira, ateueatoa.com
Desde já agradeço
Fabenrik
ateu e atoa
Muito boa essa dica, vou ler direitinho e vou começar a usar no meu blog!
Eu poderia copiar os script's citando a fonte do seu blog ?