URL Encurtada no Final do Post Usando o Site Bitly

Ensinei recentemente aqui no TPV uma forma de colocar o URL do post encurtada (short link) no final do post utilizando 3 opções de sites que encurtam URLs.
» URL Encurtada no Final do Post para Divulgação

Porém, parece que este recurso não está funcionando como deveria, inclusive no artigo onde aprendi para ensiná-lo não está funcionando.
Já deixei um comentário lá avisando do problema e assim que obtiver uma resposta atualizo o artigo.

Então, para compensar este problema encontrei este tutorial que usa o site bitly.
Este tutorial se baseia em um app fornecido pelo próprio site.

Não Se Esqueça: » Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto: ♥ Sempre tente antes num blogue de testes. ♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar ♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

1º Passo - Faça seu cadastro no site bitly

Link: bitly

 

Você pode usar sua conta do Facebook, Twitter ou criar um login.
Pronto! Cadastrou no bitly? Espere as novas instruções no decorrer do artigo.

2º Passo Colocar o short link no final do post

Entre no seu blog » Vá em Modelo » Clique em Editar HTML » Clique em cima do Código e digite as teclas Ctrl+F para o Search do editor de HTML:
Leia: Como Acessar o Editor de HTML do Blog e Ativar o Search

1- Colocando o código CSS

Procure pela tag: ]]></b:skin>
Cole este código▼ acima desta tag.

form#shorturl {
color:#666;
font-size:11px
}
#shorturl input {
color:#999;
border:1px inset #CDCDCD;
padding:1px 5px;
}

2- Colocando a linha do short url

Encontre a linha:

<div class='post-footer-line post-footer-line-3'>

Se não encontrar esta linha procure por:

<div class='post-footer-line

Que poderá ser a line-1 ou line-2.

Abaixo de uma destas linhas cole o código:

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

Certifique-se de que o código ficará dentro da div post-footer-line.
Se a linha estiver assim:

<div class='post-footer-line post-footer-line-3'/>

Você deve tirar a barra / e fechar com a tag: </div>
→Colocando a linha do código do short url entre as duas linhas.
Veja como fica:

<div class='post-footer-line post-footer-line-3'>
<b:if cond='data:blog.pageType == "item"'><form id='shorturl'/></b:if>
</div>

3- Instalando o javascript

Agora procure pela tag </head>
Cole o script ▼ acima desta tag:

<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&amp;login=SEU_LOGIN&amp;apiKey=APIKey"></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 = "Share this link: &lt;input type='text' value='" + result['shortUrl'] + "' name='bitlyurl'/&gt;";
  }
  BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback');
 });
</script>

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

»Observe onde está escrito SEU_LOGIN e APIKey. Você irá substituí-los no próximo passo.

3º Passo- Configure o seu short url a partir da sua conta do site bitly:

Acesse sua conta do bitly.
Na página inicial onde fica seu nome de usuário no alto à direita acesse as CONFIGURAÇÕES → SETTINGS.

Em Settings » Clique em ADVANCED

Nesta tela clique em Show legacy API key

Irá expandir com as informações do seu Login e API key que você deverá copiá-los e colar no código do item 3 do 2º Passo deste tutorial

Volte lá e cole onde os seus dados estão sendo pedidos.

Pronto! Feito isso seu shortlink está configurado para aparecer em todos os seus posts.

Esta é uma forma de seus leitores divulgarem seus posts com links curtos.

Fontes- Tradução e Adaptação dos Posts:
♦ http://blog.btemplates.com/how-to-show-short-urls-on-blogger/
♦ http://www.mundoblogger.com.br/2013/04/link-encurtado-automaticamente-nos-posts-no-blogger.html