Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1498248146
Vida do cache: 1498291346
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Códigos e Scripts

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]

 



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

30 Comentários

  1. Prof_Michel disse:

    Ok, Clau, vou tentar ajustar. Obrigado

  2. .:: Clau ::. disse:

    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.

  3. Prof_Michel disse:

    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.

  4. vitalves.com disse:

    Muito bom… Adorei!

  5. Lucas Rafael disse:

    Clau o script não está funcionando mais no meu blog, vc sabe qual deve ser a causa?

  6. Sybylla disse:

    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!

  7. .:: Clau ::. disse:

    Sybylla
    ué, é só verificar se no seu template existe algum arquivo com essa chamada:
    http://ajax.googleapis.com/ajax/libs/jquery/

  8. Sybylla disse:

    Como eu sei se o JQuery está instalado no blog?

  9. .:: Clau ::. disse:

    Thiago
    Se o seu perfil do twitter tiver cadeado, os tweets não irão aparecer mesmo.

  10. Thiago disse:

    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

  11. Lucas Rafael disse:

    Dessa vez deu certo, eu fiz hospedei e não apareceu! Nada! Não ocorreu nenhum erro! Tem haver com JQuery?

  12. Lucas Rafael disse:

    Tipo, é pq não consigo hospedar, eu hospedo e quando ponho o link dá erro!

  13. .:: Clau ::. disse:

    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.

  14. Lucas Rafael disse:

    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

  15. Lucas Rafael disse:

    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.

  16. Arierom disse:

    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

  17. Max Martins disse:

    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

  18. ::Clau:: disse:

    @Sr. De Tudo um Pouco:
    Imagina, eu quem agradeço. E volte sempre que precisar viu…^^

  19. Sr. De Tudo um Pouco disse:

    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.

  20. ::Clau:: disse:

    @Sr. De Tudo um Pouco:
    Já arrumei o link, tenta fazer download de novo.
    Obrigada por me avisar.

  21. Sr. De Tudo um Pouco disse:

    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.

  22. .:: Clau ::. disse:

    @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.

  23. Gizaa Veiga disse:

    Já "dei um jeito" hehehe, obrigadaa 😉

  24. Gizaa Veiga disse:

    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

  25. Avelino disse:

    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!

  26. ::Clau:: disse:

    @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.

  27. webprincipiante.com disse:

    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!

  28. francinelson disse:

    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 !

  29. Fabenrik disse:

    Ó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

  30. Jamis Henrique disse:

    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 ?

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.