O Juitter é um plugin sensacional para Twitter desenvolvido pelo Rodrigo Fante usando JQuery.

 

O Juitter é um plugin sensacional para Twitter desenvolvido pelo Rodrigo Fante usando JQuery.
Quem me indiciou foi o Vinny por Email, para que eu ensinasse como instalar no Blogger.
Vou mostrar como coloquei no BloggerSPhera.

Download e Upload dos Arquivos JavaScript

Vá até o site do Juitter e faça o download, clicando no botão "Download Juitter Beta"
São 3 arquivos:

1. jquery-1.3.1.min.js
2. jquery.juitter.js
3. system.js

Hospede os dois primeiros em seu site preferido de hospedagem e anote o endereço. Se você já tem a o JQuery da biblioteca do Google API, não é preciso instalar novamente.
O terceiro JS (system.js) nós iremos substituir pelos códigos que vou mostrar.
Você pode criar um arquivo JS e hospedar também ou coloca-lo no código do Blogger (o que facilita posteriores edições).

Colocando os códigos no template

Na Guia "Layout" em "Editar HTML", salve uma cópia de seu template clicando em "Baixar Modelo Completo"
Cole ACIMA da tag </head> as chamadas para os arquivos JavaScript. Convém que você só use esse plugin na página inicial porque pode pesar no seu Blog (lembre-se do quanto o Twitter "baleia").

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<script language='javascript' src='http://endereço-do-arquivo/jquery-1.3.1.min.js' type='text/javascript'/>
<script language='javascript' src='http://endereço-do-arquivo/jquery.juitter.js' type='text/javascript'/>

Substitua os endereços correspondentes pelos endereços de seus arquivos hospedados.

Agora iremos mexer nos dados do arquivo system.js.


Eu estou usando o Juitter como busca (searchword). Você pode usa-lo assim, ou com as atualizações (fromUser) de 1 ou mais usuários, ou com as atualizações (toUser) para 1 ou mais usuários.


Cole o código logo após as chamadas dos scripts hospedados que você colou anteriormente:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<script language='javascript' src='http://endereço-do-arquivo/jquery-1.3.1.min.js' type='text/javascript'/>
<script language='javascript' src='http://endereço-do-arquivo/jquery.juitter.js' type='text/javascript'/>

<script language='javascript' type='text/javascript'>
$(document).ready(function() {
$.Juitter.start({
searchType:&quot;searchWord&quot;,
searchObject:&quot;palavra-1,palavra-2,palavra-3&quot;,

lang:&quot;pt&quot;,
live:&quot;live-30&quot;,
placeHolder:&quot;juitterContainer&quot;,
loadMSG: &quot;Carregando...&quot;,   
total: 10,
readMore: &quot;Leia mais em Twitter&quot;,
nameUser:&quot;image&quot;
});
});

</script>
</b:if>

• Se você quer um widget que busca determinadas palavras, em searchType mantenhasearchWord e em searchObject, coloque as palavras que você deseja que o plugin procure. Por exemplo, eu coloquei as palavras: rozanchetta e bloggersphera, assim:rozanchetta,bloggersphera. Com essas palavras, aparecem as minhas atualizações e tweets de outros usuários que utilizaram essas palavras.



• Se você quer um widget que mostre as atualizações de usuários, em searchType coloquefromUser e em searchObject coloque os nomes de usuários no Twitter. Por exemplo, eu colocaria; rozanchetta, e se o BloggerSPhera tivesse uma conta no Twitter, eu colocaria:rozanchetta,bloggersphera.



• Se você quer um widget que mostre todas as respostas que 1 ou mais usuários receberam, em searchType coloque toUser e em searchObject os nomes de usuários.

Em total você substitui pelo número de tweets que deseja mostrar.

Instalando o Widget

No final de sua Sidebar (ou no Footer, ou na coluna que desejar) entre </b:section> e </div>, coloque a div para o container do Juitter, com a condicional para que só apareça na página inicial:

</b:section> 
<b:if cond='data:blog.homepageUrl == data:blog.url'>  
<div id='juitterContainer'>
</div>
</b:if>
</div>

Estilos

Segue uma sugestão para estilos que você pode usar para seu widget (coloque-os antes da tag]]></b:skin> ) :

#juitterContainer {
width : 280px;
float : left;
height : 100%;
padding : 5px 15px;
margin : 0px 0px;
}

#juitterContainer ul li {
list-style : none;
padding : 0px 0px;
margin : 0px 0px;
}

#juitterContainer li {
list-style : none;
padding : 5px 0px;
margin : 0px 0px;
line-height : 18px;
border-bottom : 1px dotted #ccc;
}

#juitterContainer .juitterAvatar { 
float:right; 
clear: both; 
margin-left: 5px; 
padding: 2px; 
width: 30px; 
height: 30px; 
}

#juitterContainer li a:link, 
#juitterContainer li  a:visited {  
color : #0282D9;  
}

#juitterContainer li a:hover {  
color : #BC0C0F;  
}

Modifique esses estilos da maneira que ficar melhor em seu template.

O Leo Baiano desenvolveu, com base no Juitter, um plugin super-interessante para o Wordpress (veja no blog do Leo o plugin em ação). Esse plugin captura as tags dos posts e as usa como as palavras da busca. Com isso, abaixo do post aparecem todas as referências no Twitter àquelas palavras.

 

Technorati Marcas: O Juitter,é um,plugin,sensacional,para,Twitter,desenvolvido,pelo,Rodrigo,Fante,usando,JQuery