Link encurtado automaticamente no final dos posts | Quero Dicas | Tutoriais para seu blogs


Link encurtado automaticamente no final dos posts


Link encurtado automaticamente
Hoje estarei ensinando como colocar um encurtador de links (short link) automático no final dos seus posts 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. Além de poupar muito espaço.

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

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

É bem simples a implantação, basta seguir os passos abaixo.
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.
  PASSO 1: 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.

  PASSO 2:  SHORT LINK

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? Então comente, faço questão de te ouvir, Beijinhos  

Os créditos pelos códigos são de btemplates Me Contrate!


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

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 xingamentos entre outros, não serão publicados ou respondidos.

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

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

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