Mostrar Link Curto das Postagens - Encurtador de Links no Blog

Sempre é importante criar novas formas de divulgar seu blog e atrair mais visitantes para suas paginas. Você pode mostrar o link encurtado no final de suas postagens o que pode facilitar as pessoas copiarem o link e postarem no Twitter ou alguma outra rede social. Concordamos que na divulgação do blog em redes sociais existem muitos tipos de botões de compartilhamento que já fazem o envio automático, mas sempre é bom dar mais uma opção principalmente porque ocupa pouco espaço na pagina do blog e serve como mais um incentivo a divulgação.

Entre na pagina editar HTML, nós sugerimos fazer um backup do template antes de alterar o HTML do blogger. Marque para expandir o modelo de widgets e procure por <data:post.body/> e coloque esse código logo depois.
<b:if cond='data:blog.pageType == &quot;item&quot;'><form onsubmit='return false;'>Link Curto
<input id='shorturl' onmouseover='javascript:this.select();void(0);' readonly='readonly' size='20' type='text'>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function encurtaURL(json){
document.getElementById("shorturl").value = json.short_url;
}
document.body.onload = function(){
if(document.getElementById("shorturl").value==''){
var el = document.createElement("script");
el.language='javascript';
el.src = 'http://bitw.in/api/link/create.json?url='+encodeURIComponent(window.location.href)+'&callback=encurtaURL&apikey=74231e775e05ca3fe3387eaf0c1c7be61da2bd23';
document.body.appendChild(el);
}
}
if(document.body.addEventListener){
document.body.addEventListener("load",document.body.onload,true);
}
//]]>
</script></input></form></b:if>

Outro posicionamento interessante pode ser mostrar o link no inicio da postagem e para fazer isso só precisa colocar o código que mostramos antes de <data:post.body/> ao invés de depois dele.

Além disso se quiser você pode colocar o código depois de <div class='post-footer-line post-footer-line-3'/>, isso faz o link aparecer mais para baixo depois do nome do autor da postagem, marcadores e link de comentários do blog. O html div class='post-footer-line post-footer-line-3 varia um pouco em cada template, mas o importante é achar post-footer-line-3 e também esse numero pode ser 1 ou 2, se colocar nesses outros trechos o link encurtado do seu post parecerá numa linha entre os marcadores ou nome do autor do blog dependendo de como está o seu layout de postagem.

mostrar link encurtado no blogger


Veja também:
5 Dicas para Ajudar na Divulgação de Blogs
Botões das Redes Sociais na Vertical - Compartilhar Posts
Erros que Fazem Perder Visitas no Blog
Como Comentar Blogs e Conseguir mais Visitas

Alguns blogueiros pediram ajuda sobre isso em comentários por isso fizemos esse tutorial, mas claro que nem todos gostam deste tipo de acessório usar no blog, então acho que cada um deve pensar se isso pode ajudar seu blog ou combinará com o seu template atual e assim decidir se deve ou não utilizar.

26 comentários :

  1. era pra estar assim:
    https://lh4.googleusercontent.com/-E3DK3ARrFhQ/Tt-VKqzeRGI/AAAAAAAAFoA/n8N-vFbc_6o/s640/ghjgj.JPG

    mais esta assim:
    https://lh5.googleusercontent.com/-ZC--AHhhlrc/Tt-VKRjU-AI/AAAAAAAAFn8/V9DZVWasfBg/s640/ghfdgh.JPG

    ResponderExcluir
  2. Não achei o , não há outro codigo?

    ResponderExcluir
  3. Ben
    não sei explicar o que aconteceu na sua pagina layout, tente fazer um backup do seu template e se já tiver um pode tentar colocar novamente.

    mas também pode ser erro de carregamento de pagina, tente excluir o historico de internet e ver se resolve, leia mais aqui: Limpar Histórico de Internet - Evite erro no Blog

    JC
    precisa marcar a opção expandir modelo de widgets na pagina editar html para achar esses códigos que falei.

    ResponderExcluir
  4. tenho 4 blogs ,não faz mal nao, não é ? , eu salvei uma copia do html de um deles e coloquei no outro ,fucionou corretamente , não tem problema colocar a copia de um templete de um blog no outro ?

    ResponderExcluir
  5. NÃO FUNCIONOU EM MEU BLOG PORQUE

    ResponderExcluir
  6. Angelo e Qui
    pode colocar pode copiar o template de um blog de seus blogs para o outro mas vão ficar com a mesma aparência.

    Sergio Jose
    veja se colocou o código no local correto

    fiz alguns testes e funcionou bem em todos eles

    ResponderExcluir
  7. Fabiano,obrigado pela dica e postagem.
    Só gostaria de saber se tem como deixar o texto "link curto" em cor de destaque, tal como vermelho etc. Obrigado!

    ResponderExcluir
  8. @victorzazuela veja que esse texto está no começo do codigo

    form onsubmit='return false;'>Link Curto

    então só precisa colocar a formatação usando o código span, assim:

    <span style='font-weight:bold; font-size:120%'>Link Curto</span>

    ResponderExcluir
  9. Não esta gerando os links dentro do formulário.

    ResponderExcluir
  10. é estranho dizer isso, nos testes que fiz funcionou perfeitamente.

    veja se não apagou algo por engano na hora de colocar o código

    ResponderExcluir
  11. Fabiano, muitíssimo obrigado. Deu certo.

    Vou procurar agora somente uma maneira de encurtar a caixa onde fica o link.
    Abração na alma!

    ResponderExcluir
  12. o tamanho da caixa é aqui
    size='20' type='text'

    altere esse numero 20

    ResponderExcluir
  13. Fabiano, mais uma vez obrigado...

    ResponderExcluir
  14. Fabiano, queria uma caixa "sugestão" vertical fixa, e que a sugestão inserida vá para o google moderator ou algum programa do tipo... Tem como me arrumar?

    ResponderExcluir
  15. publicamos sobre um menu fixo: Como Fazer um Menu Vertical Fixo no Blogger

    poderia usar para colocar o link para a caixa (pagina) de sugestão

    ResponderExcluir
  16. Bom pessoal...
    legal..
    mas nao precisoo agora...
    quando precisar.!
    aew
    parabéns pelo site

    ResponderExcluir
  17. Teria como trocar o encurtador? Tipo colocar o verd.in

    ResponderExcluir
  18. @Ian Szot por enquanto não tenho codigo para usar com outro encurtador

    ResponderExcluir
  19. Não aconteceu nada no meu blog!

    ResponderExcluir
  20. Muito obrigado! eu estava procurando um desses a muito tempo, se quiser ver como ficou vai no meu blog: http://www.terckt.de.vc "gostei muito".

    ResponderExcluir
  21. olá fabiano eu fiz isso!
    http://i.imgur.com/tCcrW.jpg

    mas continua isso...
    http://i.imgur.com/Mlepx.jpg

    não consigo encurtar os posts :/ será que você poderia me ajudar? obrigado!

    ResponderExcluir
  22. nem na pagina da postagem aparece? pq do jeito que colocou não vai parecer na pagina principal

    ResponderExcluir
  23. olá Fabiano, meu blog está aparecendo um pop up, do facebook de um tal de "face livro", ñ sei de onde vem, ñ vem do contador de visitas ou de de outro gadget antigo, suspeito q vem desse encurtador, já que foi a última coisa que adicionei...
    Vc tem alguma dica de como encontrar esse pop up no html do blog¡?

    ResponderExcluir
  24. se você suspeita de algum código tente remover esse código depois excluir seu historico de internet e testar novamente seu blog.

    Limpar Histórico de Internet - Evite erro no Blog

    .

    ResponderExcluir
  25. Tem como trocar o bitw.in pelo migre.me ?

    ResponderExcluir
  26. Ismael Junior vou pesquisar e fazer um tutorial sobre o migre.me

    ResponderExcluir