Como encurtar Link automaticamente no final dos posts


Link encurtado automaticamente
Hoje estarei ensinando Como encurtar Link automaticamente no final dos posts (short link) na plataforma Blogger. 

Ele é bastante útil para todos os blogueiros, afinal, fazendo isso, você dará aos seus visitantes a oportunidade de compartilhar não somente pelas redes sociais, mais também, implantar seu link diretamente onde desejar, utilizando apenas o link da sua postagem. 

Para encurtar os links dos seus posts, iremos utilizar o site Bitly, uma ótima ferramenta que a maioria dos webmaster/blogueiros já conhecem.

Veja na imagem abaixo a caixa do short link.
Link encurtado automaticamente no final dos posts


É bem simples a implantação, basta seguir os passos do tutorial.
Eu sempre recomendo fazer um backup do seu template, ao instalar qualquer tipo de implementação de códigos dentro do HTML do seu blog e claro, dê preferências ao blogs de teste! Não sabe fazer Backup? Não tem problema, clique em: Como fazer um Backup ou restauração do seu blog.

  CADASTRO BITLY


1 - Acesse o site Bitly, clique no botão "Join now. It’s free!"  e crie sua conta gratuitamente. Você pode se cadastrar de 3 formas diferentes, pelo Twitter, Facebook ou por e-mal (login). 

2 - Caso você tenha criado um login, confirme o cadastro e pronto.


  LOGIN e API KEY


Já cadastrado e logado ao Bitly, clique sobre o seu nome de usuário, logo abaixo do cabeçalho, (alto à direita). Depois em "SETTINGS".

SETTINGS

2 - Na página seguinte, clique em "ADVANCED"

LINK ENCURTADOR


3 - Siga até o final da página e verá 2 caixas informando seu "LOGIN" e o outro chamado "API KEY"

LOGIN e API KEY


4 - Copie ambos e cole em um bloco de notas (sugestão), pois vamos precisar dessas 2 chaves a seguir.


  SHORT LINK ao BLOG


1 - Acesse o painel do seu blog e vá em "Modelo" e "Editar HTML"

2 - Agora, procure pelo código:  

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

 

• Ao adicionar nesta linha, seu encurtador ficará no final das suas postagens
• Caso não encontre, procure pelo que está entre as aspas (post-footer-line post-footer-line-3)

3 - Quando encontrar o código acima, logo abaixo dela, cole o código:

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


ATENÇÃO

Certifique-se de que o código onde será implantado esteja "aberto" dessa forma:

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

Caso esteja "post-footer-line-3' / >", você terá que retirar a barra ( / ) e depois fechá-la com a tag: </div>, colocando-a no final da linha do código do short url, dessa forma:

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



    JAVASCRIPT


1 - Agora procure pela tag

 </head> 

 

2 - Acima de </head> , cole o código que está abaixo:



3 - Altere onde está escrito LOGIN AQUI, pelo seu login e API KEY, pelo sua chave (como mostrado, logo no inicio, do titorial, em LOGIN e API KEY)


  PERSONALIZAÇÃO


1 - Ainda no código, procure por:

 ]]></b:skin>
 

2 - Acima dela, cole o código

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

• Altere a cor e o tamanho da fonte em:

form#shorturl {
color:#000;
font-size:15px
}

• Caso queira alterar a caixa (cor, borda e tamanho, faça em:

#shorturl input {
color:#999;
border:1px inset #CDCDCD;
padding:1px 5px;
}

► Tabela de cores: Clique Aqui

Caso você queira alterar "Compartilhe pelo Link", visto antes da caixa, terá que fazê-lo no código javascript.  veja abaixo:

   document.getElementById("shorturl").innerHTML = "Compartilhe pelo Link: &lt;input type='text' value='" + result['shortUrl'] + "' name='bitlyurl'/&gt;";
  }
  BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback');
 });
</script>

3 - Agora, salve e espere alguns minutinhos para que o site encurte todas as suas postagens e as armazene em sua conta.

Depois de tudo certinho e concluído, você poderá acessar sua conta para verificar e analisar os números de cliques e interações que todos os seus posts recebe.
Caso você tenha realizado tudo certinho e ainda sim, não consegue visualizar a caixa de encurtamento, então o problema não é do código e sim algum plugin ou javascript instalado em seu layout. Isso acontece muito em templates baixados da web. :(
Gostou? 
Beijinhos  


Os créditos pelos códigos são de btemplates
COMPARTILHE :  

Comentários
0 Comentários


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por seu comentário e por sua presença!

Apenas peço que leia:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com palavras de baixo calão, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comente a vontade, deixe sua opinião, crítique, esclareça suas dúvidas e dê suas sugestões ou dicas sobre o assunto referente à postagem.


Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.

É proibida a reprodução total ou parcial dos artigos deste blog sem autorização|Somente terá o direito de republicar os códigos publicados dando os devidos créditos.