Twitter API em jQuery para mostrar o Status em qualquer parte do seu Website

Informações sobre a Publicação

Você está actualmente a ler:
Twitter API em jQuery para colocar os Tweets no Website,
uma entrada em Webgrafismo.

Publicado: 8 Setembro, 2009 / 19:09

Categoria(s): Twitter

Twitter API em jQuery para colocar os Tweets no Website

Subscreva via ♥ ♥ Partilhe no ♥ ♥ ♥ ♥ Email

Se deseja colocar o status do Twitter no seu website, então esta API é para si. A aplicação é muito simples de implementar e permite ser personalizada com CSS. A partir de agora, não vai mais precisar de widgets ou aplicações de terceiros para apresentar os seus tweets.

Instalação do Twitter API:

Antes de iniciar o processo de instalação, você deve fazer primeiro o download do plugin. Depois precisa de chamar no Header do seu website a framework jQuery (caso ainda não a tenha), a folha de estilos em CSS, e finalmente o código Javascript que vai permitir a integração do status do twitter em qualquer parte do site.

1
2
3

<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="twitter.js"></script>

Agora no BODY da página que pretende inserir o status, adicione:

<div id="webgrafismo"><img src="carregamento-ajax.gif" class="carregamento-ajax"/>Carregando... Espere por favor!</div>
<script type="text/javascript">
  twitterAPI({
  'Utilizador':'pedromagalhaes',
  'Tweets':6,
  'containerID':'#webgrafismo'
  });
</script>

Na primeira linha é definida a layer “webgrafismo” que irá conter os tweets. Aqui é utilizado um carregamento ajax para informar o utilizador que algo está a ser carregado, e por isso deve esperar um pouco.

Na segunda linha é invocado o ficheiro “twitter.js”, que envia como parâmetros o “Nome de Utilizador”, “Número de Tweets” e finalmente a “Div” que contem os Tweets. Para este exemplo são apresentados “6″ tweets do utilizador “pedromagalhaes”, na layer “#webgrafismo”.

Resultado final:

Espero que a partir de agora não tenha justificações para não implementar o seu estado no Twitter no seu site/blog. Como vê a implementação do plugin é muito simples e permite grande personalização, bastando apenas ter conhecimentos básicos de HTML e CSS.

Se tiver qualquer dúvida sobre a implementação do plugin, não hesite em contactar-me.

Licença: Creative Commons 3.0 Share Alike
Demonstração: Twitter API
Download: TwitterAPI.rar

♥ ♥

Tutorialzine acabou de criar um tutorial que ensina a criar uma API em CSS e jQuery para o Twitter que permite mostrar os seus últimos tweets, ou dos seus amigos. Não é necessário qualquer código do lado do servidor, ou base de dados. Como resultado, o “ticker” irá facilmente ser incluído em qualquer página web, [...]

♥ ♥

O novo plugin jQuery – imgPreview permite aos utilizadores pré-visualizarem a imagem antes de a clicarem. Com elevado nível de personalização, pré-carrega a imagem assim que o utilizador está sobre o link. O plugin permite aos utilizadores pré-visualizar uma imagem antes de clicar, e mesmo sem necessidade, pré-carrega a imagem de modo a quando o [...]

♥ ♥

CrossSlide é um plugin que implementa jQuery em Javascript, comum a algumas animações em slideshow, tradicionalmente disponível apenas para o desenvolvimento web através de Adobe Flash ou outros plugins proprietários. CrossSlide baseia-se em animação com instalação em jQuery, por isso é tão portátil como os próprios navegadores jQuery em si. CrossSlide pode fazer simplesmente um [...]

Pedro Magalhaes

Sobre o autor

User Interface Designer e Front End Developer. Autor do site Web Grafismo e programador na empresa Visualforma no Algarve.

Respostas a “Twitter API em jQuery para colocar os Tweets no Website”

Ricardo 25.09.2009 a 16:38
Bom tutorial.

Queria perguntar qual a forma utilizada para colocar a nossa timeline (usando ou não o API do Twitter) em que apareçam as mensagens dos nossos followers (nosso perfil)?

O blog está muito bom!

Cumprimentos,
Ricardo
Pedro Magalhães 25.09.2009 a 17:16
Olá Ricardo, actualmente não dá.
Ricardo 25.09.2009 a 18:56
Obrigado pela resposta.
Já tentei vários plugins e alguns bastantes interessantes mas todos tem o problema do API do twitter.
Só mais uma coisa, sabes como funciona o http://twitterportugal.com/ ?
Sei que trabalha através do followers também, agora não consigo precisar é o sistema utilizado.
Continuação de bom trabalho!

Cumprimentos,
Ricardo
Pedro Magalhães 26.09.2009 a 0:14
A plataforma nesta momento é o WordPress, agora como funciona todo o processo nunca pensei nisso. Consulta a Wiki da API do Twitter: http://apiwiki.twitter.com Todo o desenvolvimento baseado no Twitter começa aqui. Cumprs.
André Trabuco 15.10.2009 a 15:58
Ótimo tutorial. Eu só gostaria de saber se é possível mostrar tweets de dois ou mais utilizadores de uma única vez. É possível?
Pedro Magalhães 15.10.2009 a 17:47
Olá André :) Em breve demonstrarei num tutorial como se pode fazer algo semelhante, ou seja, juntar vários feeds na mesma página, que podem ser do Twitter ou de outra fonte qualquer. Mas este script do post não faz isso. Cumprimentos
Luis 15.03.2010 a 13:39
Ola Ricardo, ja uso esse script ha um tempo mas minhas paginas são codificadas em UTF-8 e as acentuações do link do twitter fica descodificada, existe uma maneira de mudar isso? obrigado
Luis 15.03.2010 a 13:44
Oi Ricardo, pode desconsiderar meu comentario, acabei de abrir o .js e arrumei as strings por ali, obrigado. ai desculpe, é Pedro né =)