Disponibilizar caixa de link encurtado do post automaticamente – Bitw.in

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Para divulgar seus links no Twitter e em outras redes sociais, é comum usar um encurtador de links para economizar caracteres. Vou mostrar aqui como disponibilizar automaticamente o link encurtado de seus posts. Assim o visitante já pode copiar e colar o link onde desejar e divulgar no Twitter.

Você já conhece o Bitw.in, um poderoso encurtador de links que já apresentamos aqui:

Eles disponibilizaram alguns códigos para facilitar o uso do sistema e um deles é o código para adicionar uma caixa de texto com o link encurtado automaticamente de todos os seus posts. Exatamente como você pode ver no rodapé desse post, antes do bloco de anúncios AdSense.

bitw-caixa-link

O código que vamos mostrar pode ser usado tanto no WorPress.org quanto no Blogger.

A primeira coisa a fazer é pegar a “API KEY”. Para isso vá à página do Bitw.in, acesse sua conta e vá nas configurações (link direto: http://bitw.in/usuario/editar). Lá copie um código (cada conta tem a sua) onde está escrito exatamente “API KEY” e guarde isso, como ilustra a imagem:

bitw-api-key

Isso será necessário para adicionar ao código que vamos mostrar a seguir.

Se você usa o Blogger:

Caso seu blog seja no Blogger (BlogSpot), você poderá adicionar o código junto com uma condicional para que a caixa do link só apareça na página individual de cada post.

Para ficar no rodapé dos artigos, abra o painel do Blogger, clique no menu “Design” ~> “Editar HTML e marque a caixa que diz “Expandir modelos de widgets”:

design-editar-html-widgets-blogger

Então procure por alguma linha semelhante a alguma dessas a seguir:

<div class='post-footer'>

ou

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

Imediatamente ABAIXO de alguma delas, cole o seguinte código, só modificando o que está indicado de vermelho:

<!-- Caixa Bitwin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b style='float: left; margin-top: 3px;'>Divulgue no Twitter: </b>
<form onsubmit='return false;'>
<input id='shorturl' 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=API-KEY';
document.body.appendChild(el);
}
}
if(document.body.addEventListener){
document.body.addEventListener("load",document.body.onload,true);
}
//]]>
</script>
</form>
</b:if>
<!-- Caixa Bitwin -->

Onde está marcado “API-KEY” cole aquela chave da sua conta do Bitw.in pra que funcione para seu blog exclusivamente e seu vinculado à sua conta no serviço.

Salve o modelo e veja o resultado na página de seus posts.

Se você usa o WordPress.org:

Para quem tem blog no WordPress.org (com domínio e hospedagem próprios), vá ao painel de controle, clique no menu “Aparência” ~> “Editor” e procure pelo modelo “Post único (single.php)”, como ilustra a imagem:

editor-post-unico-WP

No local mais adequando para o seu blog (isso varia para cada tipo de layout, então é preciso testar para descobrir o local certo), cole o seguinte trecho só modificando o que está indicado de vermelho:

<!-- bitw -->
<b style='float: left; margin-top: 3px;'>Divulgue no Twitter: </b>
<form onsubmit='return false;'>
<input id='shorturl' 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=API-KEY';
document.body.appendChild(el);
}
}
if(document.body.addEventListener){
document.body.addEventListener("load",document.body.onload,true);
}
//]]>
</script>
</form>
<!-- bitw -->

Onde indicado por “API-KEY” cole a chave que você copiou da sua conta no Bitw.in. Então salve as alterações e veja o resultado nas páginas dos posts de seu blog.

Outros gadget e elementos de página para Blogs:

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

9 Comentários

  1. Ótimo tutorial! Como complemento, aconselho leitura dos tópicos relacionados a encurtadores de URL do blog HTMHelen. | Marcos, seu conselho é sempre usar o "Bitw" ou seu encurtador de URL preferido é outro?

    Responder

  2. PS: Há um comando em html, que quando usado, faz um único click do mouse, selecionar todo o texto de uma 'caixa de texto' (onde contém o link encurtado). Estou esquecido do comando, mas sei que você encontrará com facilidade. Este detalhe fará com que a cópia do links seja mais rápida.

    Responder

  3. @Metal,
    Obrigado pela dica. Vou procurar isso também.
    Eu uso preferencialmente o Bitw.in, pois acho mais prático e pra valorizar o trabalho dos criadores que também são blogueiros.

    Responder

  4. Gostei muito vou indexar no meu blog!!
    Lemos tenho uma dúvida: esses widgets só funcionam em blogs ou posso usar em sites feitos com o DreamWeaver?? Se puder me responder fico grato!!

    Responder

  5. @Ian,
    Acredito que seja sim possível usar esse modelo de código em outros sites, mas vc terá que ver mais detalhes na página do API do Bitw.in.
    Lá deve ter mais detalhes sobre como fazer isso.

    Responder

  6. Para realizar o processo de seleção automática, como o @Metal falou, usamos dois comandos dentro da tag imput. São eles:

    onfocus="this.select()" e onmouseover="this.focus()"

    Responder

  7. Completando o comentário do @diretorioblogger, na INPUT tem que remover o valor readonly e acrescentar o onfocus="this.select()" e onmouseover="this.focus()"

    Responder

  8. Pingback: Como exibir caixa de links do Post para compartilhar seu Blog | [ Ferramentas Blog ]

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.