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á...
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! :)
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:
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).
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! ;)
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:
- http://twitter.com/statuses/user_timeline/dougleonardo.json?callback=twitterCallback2&count=3
- 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
Abraço.
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...