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

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:

• Bitw.in – O melhor encurtador de links!

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.

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:

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”:

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:

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:

• Twitter Follow Button: Botão de Follow para Blogs
• Widget Tweet Button oficial do Twitter para Blogs
• Botão para compartilhar links no FaceBook para Blogger
• Adicionar botão “Curtir” (Like) do FaceBook nos artigos do Blog – Blogger e WordPress