» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

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.

backup do template 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
URL Encurtada no Final do Post Usando o Site Bitly URL Encurtada no Final do Post Usando o Site Bitly Reviewed by Aurea R C on 6/16/2013 Rating: 5

2 comentários:

  1. Olá Áurea tudo bem, eu fiz todo procedimento tudo certinho, só que o campo com a Url encurtada no final dos posts em meu Blog não havia dado certo. OBS: Antes de eu incluir em meu blog eu costumo fazer um teste antes em um blog que fiz pra teste no Blogger no blog de teste deu tudo certo. Porém eu repeti os mesmos procedimentos só que a caixa com o url encurtado como eu disse no começo não aparece. Gostaria de Saber se pode me ajudar. Meu blog é esse: www.cristiansalles.com abraços.

    ResponderExcluir
    Respostas
    1. Olá Cristian,

      Encontre esta linha <div id="related-posts"> e cole o código do artigo resumido acima dela.
      Depois me conte se deu certo.
      Entrei em seu perfil no G+ e vi que não possui o link do seu blog.
      Sugiro que você leia este artigo: A Importância de ter o Link do Seu blog no Perfil do Google +.
      Seja bem vindo ao TPV!

      Excluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.