Pular para o conteúdo principal

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

Em janeiro, fiz um workshop com a galera do SENAC e, dentre outras coisas, falei sobre o uso de gadgets, badges e widgets de sites de redes sociais em portfolios ou blogs. O conteúdo do workshop compartilhei com vocês aqui.

Isso pode ser uma ferramenta bastante interessante quando você utiliza estes canais de comunicação (Twitter, Facebook, Flickr, Delicious etc.) para compartilhar informações e conhecimento relacionado à sua área de atuação, pois permite que você centralize tudo isso em seu site ou blog.

Atendendo a alguns pedidos, principalmente da minha amiga Mirela Terce, vou listar aqui um pequeno guia de como instalar e utilizar algumas destas bugigangas virtuais. É interessante que você conheça o mínimo de HTML, mas não necessariamente.

De maneira geral, o que se tem a fazer é copiar os códigos HTML disponibilizados pelos próprios sites como Flickr e Twitter (ou por site que criam estes módulos) e colá-los em seu blog ou site. Simples né? 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!


Espero que tenham curtido!

Até a próxima! ;)

Comentários

Wagner Novaes disse…
cara, funfou legal, gostei da sujestão! Só uma dúvida, não tem como aumentar o tamanho? Queria colocar na página inicial do site que estou criando como provisório, até conseguir montar algo.


Abraço.
Doug. disse…
Legal! Tem como aumentar sim, mas de qual vc está falando?
Wagner Novaes disse…
Tem coisa que a gente escreve e chora depois, pq raios escrevi sugestão com "j"? uuahuha mas enfim, do flash feito no flickr, enquanto eu uso o flickr pra portfolio, eu queria deixar ele no centro do site em um tamanho legal...
Doug. disse…
hahah acontece véi! :P
então, o badge do flickr em Flash, eu acho que só pode ser personalizado no site do Flickr mesmo. Não lembro se tem a opção de aumentar ou diminuir o tamanho. Já o que é feito em html/css você tem mais liberdade pra mexer, mesmo depois de gerar o código. É só editar o código mesmo...

Postagens mais visitadas deste blog

"Disconnect for a while. Read a book"

Isso! Vou usar esta frase como desculpa pelo tempão sem publicar nada por aqui. Bom, na verdade não é nem de perto só uma desculpa mesmo. Mas não vamos falar disso, afinal já estou de semi-férias de novo, um pouco mais tranquilo. A frase título deste post é uma sacada genial de um anúncio criado pela agência israelita Brickman para a livraria Tzomet Sfarim, seguindo o conceito "minimal" do tipo "por que eu não tive essa idéia antes??". Fazendo um trocadilho com o nome do site de relacionamento Facebook , o anúncio diz: "Face a book", ou em português, "Encare um livro". Muito bom! Este anúncio eu vi em um site muito bacana que descobri ontem, o Ads Of The World .

Um cartaz para o #forasarney

Nos últimos dias todos ficaram sabendo do barulho que anda fazendo a campanha online que pede a renúncia do Presidente do Senado José Sarney. Lançada no Twitter pelo Rafinha Bastos há algumas semanas, a campanha foi tomando grandes proporções e cada vez mais pessoas passaram a trocar mensagens identificadas pelo tópico #forasarney, criticando a permanência de Sarney no poder. Até mesmo um blog foi lançado: o forasarney.com.br Bom, para demonstrar meu apoio a campanha, segue uma brincadeira que fiz com base no famoso cartaz criado por Shepard Fairey para a campanha de Barack Obama. É claro que, no nosso caso, o cartaz também tem a função de apoiar, mas apoiar a renúncia do Sr. Sarney. Quem sabe não adotam o cartaz na campanha? haha :) Quer imprimir? Baixe o PDF aqui. Aquele abraço!

As fontes mais odiadas pelos designers e mais amadas pelo mundão afora!

Essa eu li no blog 10.000 words e achei demais! Você já notou que algumas fontes são excessivamente usadas para determinadas coisas, sejam trabalhos feitos por designers (ou muitas vezes "dezainers") ou o convite feito pela sua amiga para chamar para uma festa? Com certeza por esse motivo essas fontes são tão odiadas pela maioria das pessoas que trabalham com criação. E pensando por outro lado, coitados dos tipógrafos ou designers que projetaram estas fontes... Designers iniciantes, cuidado com estas fontes! Elas são sedutoras, mas muito perigosas! hehe... Bom, então vamos às 9 fontes que deveriam morrer entrar em coma (um pouco mais de tolerância rs) por um tempo. Porque, afinal, essas pobres fontes só precisam de um tempo, um bom tempo! Ah, acrescentei duas que na minha opinião precisavam estar na lista também! • DEAR JOE Seu grande problema é que ela simplesmente não se parece com uma fonte cursiva. Neste ponto concordo com o 10.000 words . A dica que ele dá eu também re