Como criar caixa com seus tweets recentes

Como Fazer Um Site >> Add-ons e Suplementos >> Como criar caixa com seus tweets recentes

Existe um API que pode ser usado para ir buscar informação ao twitter. Com um pouco de código javascript podemos fazer um widget para o nosso site que usa aquele API e devolve HTML simples para mostrar os nossos tweets recentes.

Vamos então ver como podemos criar uma caixa com os nossos tweets recentes usando aquele API:
1. Crie uma imagem do twitter que será usada na imagem de fundo da sua caixa de tweets recentes. Esta imagem é que vai dizer aos leitores que o conteúdo da caixa vem do twitter. Escolha por isso uma imagem apelativa. No meu caso usei uma imagem com um tamanho de cerca de 220 de largura, por 60 pixels de altura, que resultou bem para a caixa que eu defini.

2. Coloque o seguinte código no seu blog ou site e substitua "comofazerumsite" pela sua ID do twitter: <div id="twitter_div"><ul id="twitter_update_list"></ul> <a href="http://twitter.com/comofazerumsite" class="twitter-link">Siga o Twitter</a></div> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/comofazerumsite.json?callback=tw itterCallback2&count=3"></script> Na última linha a instrução "count=3" define que serão mostrados 3 tweets. Podemos alterar para o número de tweets que desejarmos. Se não fizer mais nada os posts recentes do twitter já aparecem na sua página, mas desorganizados, sem formatação, sem uma aparência agradável. Temos então que configurar a div "twitter_div" e o elemento ul. Para isso usamos CSS que é o próximo passo.

font-size: 11px. } #twitter_div ul li { color: #000. color: #d22929. } . font-color: #d22929. text-align:right.com/imagens/twitter. Arial. color: #000. border: 1px solid #0CF.3.jpg'). margin: 60px 15px 15px 15px. padding: 7px. } #twitter_div ul li a { text-decoration: underline. border-bottom: 1px dotted #666. width: 495px. display:block. text-align: left. um contorno azul claro. background-image: url('http://www. Coloque o seguinte código entre as tags <head> e </head> do seu documento html alterando o endereço da imagem: <style type="text/css"> #twitter_div { align: center. } #twitter_div ul li a:hover { text-decoration: none. font-family: Verdana. background-position: 22px 5px. Helvetica. font-size: 10px.seusite. Tem um fundo branco. padding: 45px 30px 10px 62px. background-repeat: no-repeat.twitter-link { padding: 0px. list-style: none. . } </style> Repare que esta é apenas uma formatação possível que foi optimizada por mim para uma caixa com 495px de largura.

Para activar o plug-in basta copiar um pequeno ficheiro para uma pasta do programa do Photoshop e já está. e será única e exclusiva. Mais abaixo vou indicar alguns desses geradores de favicon.ly/gVkrTw 127 days ago  Como aplicar uma Marca d’Água http://bit. faça download do plug-in aqui 2. Siga estes passos: 1. O favicon aparece também nos "Favoritos" junto ao nome dos sites que adicionamos àquela categoria. Criar uma imagem Passos para criar um Favicon no Photoshop após ter activado o plug-in de favicons: .ly/graVNR 121 days ago  Posts relacionados com imagens http://bit.  NVU em português http://bit.ly/hWniJs 128 days ago Siga o Twitter Criar um Favicon Como Fazer Um Site >> Add-ons e Suplementos >> Criar um Favicon O favicon é um pequeno icon com 16x16 pixels que aparece junto à barra de endereços do browser (junto ao URL) e nos separadores do browser. defina as suas próprias configurações. Faça as alterações que precisar a este código css. para salvar um ficheiro com a extensão ". Quem não tem este programa pode recorrer a geradores de favicon online.ico". se o programa Photoshop estiver aberto feche-o 4. abra o Photoshop 5. Criar um Favicon com o Photoshop Activar o plug-in O favicon é um ficheiro com a extensão". Só é possivel guardar ficheiros "ICO" no Photoshop através de um plug-in. Uma das formas mais fáceis de criarmos um favicon é usando o Photoshop.ico" é só fazer "Salvar Como" e escolher o formato "ICO" que agora já aparece na lista. O plug-in para gerar ficheiros ICO está disponivel gratuitamente para download aqui.letras a preto. para obter uma caixa de posts recentes do twitter que certamente se vai encaixar de uma forma perfeita no seu site ou blog. e links a vermelho. copie o ficheiro "ICOFormat" para a pasta "File Format" (essa pasta normalmente está localizada em C:\Programas\Adobe\Photoshop\Plug-Ins\File Formats) 3.

Quando a imagem estiver pronta será então reduzida para as dimensões de icon 16x16px. 4. entre as tags <head> e </head>. escolha o formato "ICO" da lista. mas pode não aparecer em versões do Internet Explorer superiores ao IE5.ico 2. se estiver contente com o aspecto final do seu icon faça "Save As". em http://seusite. que permita editá-la e que permita visualizar bem o que se está a fazer. quando terminar de editar a imagem.1. o código para o Favicon <link rel="shortcut icon" href="http://seusite. 3. Usar apenas duas cores normalmente resulta bem no aspecto final do icon. com uma dimensão suficientemente grande. No "Custom Shape Tool" pode usar um dos muitos icons que vêm com o Photoshop. Pode usar por exemplo uma imagem com 150x150px. têm que ter o seguinte código no interior das tags <head> e </head>: <link rel="shortcut icon" href="http://seusite. abra uma nova imagem. certifique-se que colocou nas páginas do seu site. e altere então as dimensões para 16px de largura e 16px de altura. nos separadores ou nos favoritos. Código para que o Favicon Funcione Todas as páginas do seu site para as quais você quer que o icon apareça na url do browser. não use muitos detalhes. Fazer upload do ficheiro favicon. certifique-se que colocou o ficheiro favicon. seleccione "Image Size".ico.com/favicon. Imagem 150x150 Icon 16x16 2. Nesse caso siga estes passos: 1.ico" /> . Upload do Favicon O ficheiro favicon deve ser colocado na raiz do seu site (no mesmo local aonde está o ficheiro index. quadrada.html).ico na raiz do seu site. portanto decidi ajudar quem estiver a tentar fazer a mesma coisa.ico para a raiz do seu site deve ser suficiente para que o Favicon apareça no Firefox. vá ao menu "Image".ico" /> Se mesmo assim o favicon não aparecer Eu tive alguns problemas em conseguir que o Favicon aparecesse no IE7.com/favicon.com/favicon. e salve o ficheiro com o nome favicon. pois quando a imagem for reduzida os detalhes podem desaparecer ou ficar imperceptiveis. ou seja.

ly/gVkrTw 127 days ago Como aplicar uma Marca d’Água http://bit.ly/graVNR 121 days ago Posts relacionados com imagens http://bit. limpe a cache do Internet Explorer: o Abra o Internet Explorer o Vá a "Ferramentas>> Opções da Internet" o o Elimine todos os "Ficheiros Temporários da Internet" Apague também o "Histórico" 4. Pode ser necessário pressionar a tecla F5 no seu teclado para forçar o IE a mostrar o Favicon.ly/hWniJs 129 days ago Siga o Twitter Banner Rotativo em javascript Como Fazer Um Site >> Add-ons >> Banner rotativo em javascript O que é um banner rotativo? Um banner rotativo é um banner em que fazemos passar vários anúncios publicitários diferentes. em que cada anúncio é exibido durante um determinado período de tempo. Agora introduza na barra de endereços o URL do site aonde você colocou o Favicon. feche o Internet Explorer. É o IrfanView. Se você já tiver um icon criado com a extensão ".    NVU em português http://bit. você pode usar um dos seguintes sites para o transformar num ficheiro ". É um programa simples mas funciona muito bem e permite também visualizar e transformar ficheiros GIF em ficheiros ICO. No site Favicon Generator você coloca o texto e as cores que pretende e automaticamente é criado um favicon para si. Quando preciso de instalar um banner rotativo . Você não tem o Photoshop? Geradores de favicons Se você não tem o Photoshop instalado no seu computador você pode conseguir um ficheiro com a extensão ".3.ico":   FavIcon (permite fazer favicons animados) favicongenerator Programa de conversão para ficheiros ICO Existe também um programa freeware que às vezes eu uso. Pode fazer download grátis do programa aqui. Se seguiu estas instruções o seu Favicon já deve estar a aparecer no seu browser.ico" através de geradores de favicons online.gif".

e dá para configurar várias opções. Em vez de exibir apenas um anúncio numa determinada zona do site. Para além da vantagem óbvia de aumentar a probabilidade de que seja exibido algo que interesse ao seu visitante. pode fazer a diferença.num dos meus sites uso o script bannerrotativo. Por isso. não muda. vai chamar muito mais a atenção de quem visita o seu site. E desta forma você pode fazer com que os cliques no seu banner aumentem substancialmente. Um banner rotativo também tem vantagens relativamente a um banner fixo no qual é exibida apenas uma publicidade. sem que isso implique encher o site de banners que iriam ocupar imenso espaço. principalmente quando aquilo que aparece numa área de publicidade é sempre a mesma coisa. rotativo. a não a verem. Muitas vezes os banners têm uma taxa de conversão muito baixa. O script exibe um anúncio aleatório a partir da lista de anúncios que for definida para cada localização. Veja o script em acção: Banner Rotativo Como Fazer Um Site Porquê usar banners rotativos? Um banner rotativo permite fazer um melhor aproveitamento do espaço disponível no seu site. o facto de rodar diferentes publicidades. pode fazer com que os visitantes acordem para esses espaços e que passem a ver os anúncios (que até lhes podem interessar). funciona muito bem. é estático.js. O tamanho pode ser ajustado. É muito simples.         Fácil de instalar Suporta um número ilimitado de anúncios Opção para forçar o tamanho do banner Abre links na mesma página ou numa nova página Banners inactivos são automaticamente removidos Permite definir localizações especificas para diferentes banners na mesma página Os mesmo banners não serão mostrados na mesma página Os anúncios rodam a cada X milisegundos Como instalar o banner rotativo? Para ver o banner rotativo a funcionar no seu site faça o seguinte: . usar um banner dinâmico. sem limitações. Isto explicase pelo efeito da habituação que leva os visitantes a ignorarem a publicidade. e pode ser definida uma data a partir da qual um anúncio é removido automaticamente do banner rotativo. você pode exibir vários. também o facto de não ser fixo. Características deste banner rotativo É um script simples mas com a possibilidade de exibir quantos anúncios quiser.

. Abra o ficheiro bannerrotativo. 3 . IMPORTANTE: Deve haver uma virgula no final de cada anúncio. Penso que os campos nome_site.seusite.js no servidor onde tem o seu site alojado. Neste caso o que pode é fazer o upload do ficheiro para uma conta "Sites" do Google.Faça upload do script para o seu servidor Coloque o ficheiro bannerrotativo.js"></script> Substitua a porção que está a vermelho pelo endereço exacto do ficheiro bannerrotativo. 'url_site'. No inicio do ficheiro você vai encontrar algumas opções comentadas.js com o Bloco de Notas do windows.se você quer que um anúncio apareça "para sempre". não pode deixar este campo em branco ou vazio . Mais abaixo vai encontrar uma lista de anúncios. Um anúncio novo deverá ser adicionado abaixo da porção de código var anuncios =[ . tal como no exemplo dado acima.js (localização em que ficou o ficheiro depois do upload que fez no ponto anterior). Se tem um site gratuito (por exemplo instalado no blogger. Clique no link para ver como pode fazer upload do ficheiro javascript para o Google Sites.Coloque o código entre as tags <head></head> Coloque a seguinte linha de código entre as tags <head> e </head> do HTML do seu site: <script type="text/javascript" src="http://www. Definir os anúncios que quer exibir no seu banner rotativo Para exibir a sua própria publicidade no banner rotativo só tem que editar o ficheiro bannerrotativo.com/bannerrotativo. 'url_imagem'.Faça download do script do banner rotativo Link para download do script bannerrotativo.1 . 2 . 4 . e usar o script a partir daquele endereço. 'mostrar_ate_data'.js. 'localizacao_banner').</script> Guarde as alterações que fez no seu site e o banner rotativo estará a funcionar.Defina onde quer que o banner rotativo apareça Para definir em que local da sua webpage quer que o banner rotativo apareça basta colocar o seguinte código no nesse local pretendido do HTML da sua webpage: <script type="text/javascript">mostrar_banner('LocalAnuncios1'). O linha do último anúncio não deverá ter uma virgula no final. O campo mostrar_ate_data é a data no formato DD/MM/AAAA a partir da qual o respectivo anuncio deixa de ser exibido.com) poderá não ser possível fazer upload do ficheiro. EXCEPTO para o último anúncio.js (clique com o botão direito do rato e escolha "Guardar ligação como" para guardar o ficheiro no seu computador). que poderá configurar facilmente. url_site e url_imagem dispensam explicações. Este é um dado que tem que existir. Cada anúncio segue a seguinte estrutura em que são definidos alguns dados: new anuncio('nome_site'. defina uma data avançada muitos anos para o futuro.

'14/04/2022'.imageshack. 'http://comofazerumsite. 'anuncios-topo').imageshack.jpg'.com/blog'. 'http://comofazerumsite.imageshack. como seria o caso.us/img694/383/cfusbanner300x250. '11/02/2029'.imageshack. o anúncio encolha e depois se expanda novamente para a dimensão da imagem. enquanto as imagens não estão ainda na memória do computador. e quisesse exibir anúncios específicos em cada um desses banners rotativos (ver exemplo abaixo). e outro em baixo.Como Fazer Um Site'.jpg'. E assim no topo desta minha webpage.jpg'.</script> e no fundo desta página coloquei: <script type="text/javascript">mostrar_banner('anuncios-fundo').js defini os seguintes anúncios: var anuncios = [ new anuncio('Como Fazer Um Site'. coloquei: <script type="text/javascript">mostrar_banner('anuncios-topo').jpg'.us/img411/2127/cfusbannerblog300x250. 'http://img694. 'http://img13. criando um efeito de "ressalto". '30/02/2023'.com'.O campo localizacao_banner deve ser usado para associar cada anúncio a uma local especifico na sua webpage.Como Fazer Um Site'.us/img217/9375/cfusbannerblog468x60. por exemplo.Como Fazer Um Site'.com/forum'. No ficheiro bannerrotativo. 'anuncios-topo'). new anuncio('Como Fazer Um Site'. Mas se usarmos só um banner rotativo.com/blog'.</script> Como os dois banners rotativos que defini têm tamanhos diferentes pode acontecer que em alguns browsers ao mudar o anúncio. '30/02/2023'. no fim da página. 'http://comofazerumsite. 'http://img217. 'anuncios-fundo'). e . só um tamanho.jpg'. 'http://comofazerumsite. Este ressalto em principio só vai ocorrer no inicio da exibição dos anúncios. no HTML. com o formato de 300x250. 'anuncios-fundo').com/forum'. se você quisesse um banner rotativo no topo da sua webpage e outro banner rotativo no fundo da sua webpage.com'. um no topo da página com o formato 468X60. new anuncio('BLOG . 'http://img411. Banners rotativos usados nesta página Nesta página usei dois banners rotativos para servirem como exemplos.us/img210/3057/cfusbannerforum300x250. '11/02/2029'.us/img190/5520/cfusbanner468x60.imageshack. 'http://img210. 'http://img190.Como Fazer Um Site'. '14/04/2022'. new anuncio('BLOG .imageshack. Guarde as alterações e faça upload do ficheiro para o seu servidor. new anuncio('FORUM .us/img13/594/cfusbannerforum468x60. Se deixar este campo vazio (certifique-se que deixa lá as aspas) então o respectivo anuncio vai ser exibido numa localização definida como "vazia" na sua webpage. 'http://comofazerumsite.jpg'. 'anuncios-topo'). 'anuncios-fundo') ] Como podem ver tive que criar dois tipos de localizacao_banner: a um deles chamei anuncios-topo e ao outro anuncios-fundo. new anuncio('FORUM . 'http://comofazerumsite.

sem ressaltos. mas você pode fazer com que apontem para os seus links de afiliado e dessa forma ganhar dinheiro com o banner rotativo.configurarmos no ficheiro bannerrotativo. etc. Neste caso inseri os banners no conteúdo da página mas o banner rotativo pode ser inserido em qualquer outra localização como por exemplo no cabeçalho. . E eu fiz com que os url_site apontassem para o site Como Fazer Um Site. mesmo na transição entre imagens.js que 'define_size': 1 nesse caso a dimensão mantém-se fixa. numa barra lateral.

Sign up to vote on this title
UsefulNot useful