Mostre o conteúdo do seu Flickr, Twitter e Delicious em seu site ou blog

Atendendo a pedidos, inclusive meus, meu amigo Doug - que deu palestra pra turma do Técnico em Multimídia no Senac Scipião em janeiro/2010, publicou um conteúdo super útil e atual sobre o uso de gadgets, badges e widgets de sites de redes sociais como o Flickr, Twitter e o Delicious em seu blog.

De acordo com o Doug, é legal que se saiba o mínimo de HTML para por em prática essas facilidades, mas isso não é absolutamente necessário. De maneira geral, o que se tem a fazer é apenas copiar os códigos HTML disponibilizados pelos próprios sites como Flickr e Twitter (ou por sites que criam estes módulos) e colá-los em seu blog ou site, desde que no lugar certo! ;p

Como diria meu amigo, a partir de agora nas palavras dele: - Bora lá!




Como apresentar meus updates do Flickr em meu site ou blog?


Inserir seus updates do Flickr em seu site é bem simples, mesmo se você não manja nada de HTML, e ao mesmo tempo, bem bacana se você manja e está a fim de personalizar a forma de apresentar isto em seu site.

Acesse a página de criação da badge do Flickr no seguinte endereço:
http://www.flickr.com/badge.gne.
Você precisará entrar com seu login e senha



Esta tela pede que você selecione o tipo de módulo que deseja criar: HTML (estático) ou Flash (animado). Escolha o que achar mais bacana. Se você manja de CSS, o módulo HTML permite que você tenha acesso aos estilos. :)

Feito? Bom, daí em diante é só seguir as instruções do Flickr para personalizar o módulo do jeito que deseja. Em mais três passos você terá possibilidades como:
• Escolher qual o conteúdo que deseja mostrar (tudo, um álbum específico, somente fotos com uma determinada tag...);
• Definir quantos itens serão mostrados, de que tamanho, se deseja mostrar sua imagem de perfil, se será um bloco vertical ou horizontal;
• Escolher as cores do módulo.

Depois de definir tudo, o último passo é copiar (ctrl+c) o código prontinho que o Flickr gera para que você cole no HTML do seu site ou blog. No meu caso, gerei um módulo HTML e o inseri na sidebar daqui do blog.



Cole em seu site ou blog e depois me diz se funfou! :)

Quero mostrar meus updates do Twitter em meu site


Se você usa o Blogger, dentro do painel de configurações / personalização, entre na aba layout e procure pelo link "adicionar um gadget". Faça uma pesquisa por "Twitter Updates" e clique nele para adicioná-lo. Daí basta seguir as instruções do Blogger.

Para quem manja de XHTML/CSS, vou compartilhar com vocês o código que uso aqui no meu blog, que se não me engano adaptei do Twitter Updates mesmo. Aí vai:

Estilos CSS:



HTML:


Importante:
No código acima, você precisa substituir meu nome de usuário do Twitter (dougleonardo) pelo seu nos seguintes trechos:

  1. http://twitter.com/statuses/user_timeline/dougleonardo.json?callback=twitterCallback2&count=3

  2. http://twittercounter.com/embed/?username=dougleonardo&style=black

Uma dica: se quiser aumentar a quantidade de updates a serem mostrados, no item 1 (a primeira URL em que você vai inserir seu nome de usuário) altere o valor em count=3 para a quantidade que quiser (ex.: count=6).

Compartilhando meus favoritos do Delicious em meu site


Se você usa o Delicious, ferramenta de favoritos do Yahoo, você também pode inserir em seu blog ou site o módulo de apresentação dos seus últimos sites favoritos.

Para isto, basta acessar:
http://delicious.com/help/linkrolls
Você precisará entrar com seu login e senha

Lá você poderá criar e personalizar o seu módulo e, automaticamente, gerar o código HTML correspondente. Depois, é só colar este código onde quiser em seu site ou na sidebar do seu blog!





Bom, é isso!
Aproveitem a aula grátis e o estímulo e acompanhem o blog do Doug ;p