Mostrar Link Encurtado nas Postagens do Blog

Você pode disponibilizar o link encurtado no final dos posts para facilitar o compartilhamento em redes sociais. Essa é uma maneira simples de conseguir mais divulgação afinal temos sempre que pensar em conseguir mais divulgação do blog no Facebook, Google+, Twitter e outras redes, mas certamente blogs e sites com botões de compartilhamento e links curtos em locais de destaque têm mais chances de conseguir a divulgação através dos visitantes afinal quem visita o blog não vai ficar procurando pelo blog inteiro um jeito de compartilhar seu link.

Link Encurtado nas Postagens do Blog

Esse código para encurtar o link das postagens no Blogger usando o bit.ly é bem simples de instalar. Entre na pagina modelo e faça um backup do seu template para evitar problemas. Agora clique em editar HTML e marque a opção expandir modelo de widgets.

Procure no código HTML por </head> e coloque esse código antes dele:

<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&amp;login=bturls&amp;apiKey=R_37db93397f2c5d6b49a0f3d778d2e142"></script>
<script type="text/javascript" charset="utf-8">
BitlyClient.addPageLoadEvent(function(){
BitlyCB.myShortenCallback = function(data) {
// this is how to get a result of shortening a single url
var result;
for (var r in data.results) {
result = data.results[r];
result['longUrl'] = r;
break;
}
document.getElementById("shorturl").innerHTML = "Compartilhe esse Link: &lt;input type='text' value='" + result['shortUrl'] + "' name='bitlyurl'/&gt;";
}
BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback');
});
</script>

Note que na linha abaixo tem escrito Compartilhe esse Link: esse é o texto que aparece ao lado da caixinha com o link curto da sua postagem, portanto pode alterar o texto como desejar apenas tenha cuidado para não apagar nem modificar nada além disso.

document.getElementById("shorturl").innerHTML = "Compartilhe esse Link: &lt;input type='text' value='" + result['shortUrl'] + "' name='bitlyurl'/&gt;";

Agora procure por <div class='post-footer-line post-footer-line-3'> e coloque esse outro código depois dele:

<b:if cond='data:blog.pageType == "item"'><form id='shorturl'/></b:if>

Aqui podemos ter variações conforme o template então se não achar o código html pode ser <div class='post-footer-line post-footer-line-2'>, <div class='post-footer-line-1'> ou até mesmo depois do <post.body>. Isso varia conforme o template, mas enfim esse código que mostramos agora é onde aparecerá o link encurtado então pode testar até achar o melhor lugar no seu template.

Leia também:
Encurtador de Links no Blog
Botões de Compartilhamento Fixos no Canto da Pagina
Gadget com Postagens mais Recomendados nas Redes Sociais

Esperamos que gostem desta dica e lembrem-se sempre de facilitar as coisas para os visitantes do seu blog para que encontrem e compartilhem facilmente qualquer coisa que desejarem.

19 comentários :

  1. Gostei dess dica e eu sempre estou tentando melhora o meu mais ele não é muito famoso:
    http://sportesmundiais.blogspot.com.br/

    ResponderExcluir
  2. Funcionou! \o/ Há alguns meses eu procurei muito esse recurso e não encontrei o script. Obrigada por postar a dica. :)

    ResponderExcluir
  3. Olá Roberto, como vai? Não sei o porquê, mas comigo não funcionou! Em meu template tinha os códigos citados, e adicionei os citados aqui na página como dito, só que no site não apareceu. Poderia verificar aí para mim no meu site? Isso leva algum tempo para as modificações? Abraço!

    ResponderExcluir
  4. Fabiano, tem algum site que mostra o que foi copiado do meu blog?

    Por ex; o contador Who Amung, da pra saber, mas tem algum outro?

    ResponderExcluir
  5. Marcos

    o site http://www.copyscape.com/ mostra quem copiou seu blog

    outra dica interessante é pesquisar frases dos seus posts no google usando aspas, assim o google mostra resultados exatamente iguais aquele texto.

    ResponderExcluir
  6. ataa valeu, sobre essa do aspas eu não sabia, pesquisei aqui e mostrou alguns resultados, mas eu não ligo muito pra plágio não

    ResponderExcluir
  7. Fabiano eu tenho um domínio personalizo no Bitly, como faço nesse código ficar o meu personalizado?

    ResponderExcluir
  8. Rosiel T.S. tente encontrar informações sobre isso na ajuda do bit.ly

    não sei como fica o código para dominio personalizado.

    ResponderExcluir
  9. Olá Fabiano, há alguma forma de eu transformar a URL do meu blog em um nome, por exemplo, o meu blog é http://homemdemilalmas.blogspot.com.br/ e eu gostaria de usar uma abreviação para compartilhar m redes sociais, pesquisei e não encontrei algo que me gerasse a opção de fazer isso. Grato...

    ResponderExcluir
  10. Karl Mot você pode entrar no site do bit.ly e encurtar a url do seu blog. Veja no topo da pagina tem um campo de texto escrito

    paste a link ...

    coloque o endereço do seu blog lá.

    por exemplo o do nosso blog ficou assim:
    bit.ly/aq4QNK

    ResponderExcluir
  11. Fabiano acho que é só trocar essa parte login=bturls&apiKey=R_37db93397f2c5d6b49a0f3d778d2e142 pelo meus dados no Bitly, vou fazer o teste.

    ResponderExcluir
  12. É sim. Substitua R_37db93397f2c5d6b49a0f3d778d2e142 por sua Bitly API Key e bturls pelo seu nome de usuário no Bitly. Funcionou no GabbielSan Blog.

    ResponderExcluir
  13. Muito obrigado pelo tutorial ae ... funcionou certinho no meu e funcionando os links!

    Obrigado!

    ResponderExcluir
  14. Hum muito bom ai queria saber se voce tem uma tutorial como fazer um site de encurdado de url ...

    ResponderExcluir
  15. Muito boa a dica funciona perfeitamente, teria como usar um encurtador personalizado ao invez do bit.li ?

    ResponderExcluir
  16. Vida de Meme

    acho que para fazer com link encurtado e personalizado teria que fazer manualmente em cada postagem

    ResponderExcluir
  17. Não estou achando o head alguem me ajuda?

    ResponderExcluir
  18. ainda sim foi o unico que funcionou, muito obrigado!

    ResponderExcluir