Índice das dicas

Adicionando um quadro RSS no seu blog ou site

Criado 16/mar/2007 às 12h17 por Júlio César Bessa Monqueiro

5
Com certeza muita gente gostaria de colocar as últimas notícias do Guia do Hardware automaticamente em seu blog, ou ainda, as últimas atualizações em termos de matérias, afinal, em nenhum outro lugar você acha textos iguais os nossos :-)

Mas pouca gente sabe que o processo de inclusão de um quadro RSS em um site ou blog é uma coisa muito simples: basta se dirigir à um site que faz o serviço pesado, simplesmente oferecendo um assistente e de dando o código HTML, e depois inseri-lo na sua página. A cada atualziação nossa, o quadro instantaneamente se atualiza, já com os novos textos, ou notícias.

Como a nossa meta é sempre te trazer as melhores informações, vamos para um passo-a-passo.

Primeiro, precisamos de algum site que faça a integração, isso é fácil através de uma pesquisa no Google através de "RSS integration", mas vamos popuar cliques. Aqui estão os melhores sites:

Vou usar aqui nesta dica o RSSInclude, o mais simples e funcional. Os outros oferecem também opções avançadas em HTML, vai de acordo com seu gosto :-)

Então, mãos à obra. Abra seu navegador em http://www.rss-info.com/en_rssinclude-simple.html:

site_html_m71ef1560
Vamos nos concentrar na parte de edição, dizendo o que significa cada campo:

site_html_58db6ff7
Insira um desses links no campo, de acordo com seu desejo.

  • Max. entries: Coloque o número de tópicos que irão aparecer no seu blog. Por exemplo, se digitar 10 e escolher o segundo link acima, esse vai ser o número de nóticias que vai ser exibido.

  • Table/IFrame width: Largura, em pixels, da coluna com os RSS

  • Background color: Cor do plano de fundo. Clique no ícone de paleta ao lado do campo para ver cores já prontas.

  • Border color: Cor da borda

  • Cell background color: Cor do fundo da célula onde estarão os textos

  • Open Links in a New Window: Selecione a opção caso deseje que os links, ao serem clicados, abram em uma nova janela

  • Integration: Escola a linguagem da integração. A mais usada, e eficaz, é a JavaScript. Se você possui uma página em PHP, pode escolher esta, e se tiver problemas de codificação (aparecer caractertes estranhos ao escolher uma das duas anteriores), esolha Iframe. Esta última é a forma mais rudimentar de integração.

Feito as escolhas, clique em "Create HTML", e a seguinte página vai ser mostrada:

site_html_5e2c38ca
O código HTML vai ser mostrado logo abaixo, e mais adiante uma pré-visualização de como ficou a coluna. Copie este código inteiro, semelhante à este (mas não igual: aqui vão as configurações que escolheu):

<script language="javascript" src="http://www.rss-info.com/rss2.php?integration=js&windowopen=1&rss=http%3A%2F%2Fwww.hardware.com.br%2Fultimas.xml&number=10&
width=300&ifbgcol=FFFFFF&bordercol=D0D0D0&textbgcol=F0F0F0&rssbgcol=F0F0F0&showrsstitle=1&showtext=1">
</script>

Um problema para muitos é que, ao adicionar o RSS das "Últimas atualizações" do site, o mesmo exibirá toda a descrição da matéria na coluna, podendo ocupar muito espaço no seu site ou blog. Para exibir somente os títulos no quadro de integração, altere a última tag da segunda linha do código (como o acima), de showtext=1 para showtext=0.

Agora, vá para a página de seu servidor de blog, ou abra o HTML de seu site. Vou citar abaixo o exemplo do Blogger, onde inseri o código no local que queria, na coluna abaixo de meu perfil:

site_html_m1031ddc3
Para evitar sustos, clique sempre numa pré-visualização, como o botão "Visualizar" acima. Se tudo estiver OK, clique finalmente em "Salvar alterações no modelo", ou salve da maneira de seu editor. Veja como ficou a integração no meu blog abaixo:

site_html_m31f76c7d
Você pode usar o Kolourpaint, por exemplo, em sua ferramenta "Conta-gotas", para ver a cor que quer deixar semelhante, como no caso acima, no qual deixei o fundo da tabela igual à do blog. Você simplesmente captura a tela com o botão "PrintScreen" do seu teclado, colocar no seu editor de imagens, e usar a ferramenta.

Agora que você aprendeu, corra e coloque logo a integração RSS de nosso conteúdo no seu blog ou site. Com certeza os visitantes vão gostar muito ;-).

5 comentáriosPor Júlio César Bessa Monqueiro. Revisado 23/mar/2011 às 15h30

Comentários

não deu
Criado 2/abr/2011 às 11h08 por Vinícius (anônimo)
Olha, tentei utilizar os links sugeridos para fabricar uma linha de codigo, porem ficou muito ruim.
4 dos links acima direcionam para 2 paginas (2 links diferentes levam prum mesmo lugar), os quais por algum motivo nao deu certo ou nao ficou legal.
O unico que deu certo ainda é o rssinclude, porem ele insiste em jogar um espaço para a barra de titulo, o que estraga o layout da minha pagina. Outra coisa, é que a personalização é restrita ao que o site oferece, gostaria de pegar apenas os titulos, sem fundo sem nada, e customizar tudo por css.
Alem disso, o codigo que ele me gerou nao é tao completo como o do exemplo, tipo nao tem showtext e tal...
Há alguma outra forma de transformar o rss para um codigo javascript ou php, enfim, para por no site, que nao seja atraves desses sites?

Se puder me ajudar, gostaria que me enviasse um email para viniciusfehlb@gmail.com.
vlw!
RSS criando novas páginas
Criado 25/fev/2011 às 19h14 por elton (anônimo)
tem como ler o RSS e postar a informação no meu blog como uma nova página para cada noticia? não sei explicar mto bem mas é isso, vlw

eltonce@itelefonica.com.br
Muito boa as dicas
Criado 8/fev/2011 às 15h03 por Flavio (anônimo)
Legal o artigo mas a empresa que eu hospedo meu blog, a inter.net ela me oferece um aplicativo para instalar no Wordpress que traz pra mim o RSS de modo que nem preciso instalar. Bem melhor.
perfeito!
Criado 12/set/2010 às 05h48 por Robson (anônimo)
Este do http://rssxpress.ukoln.ac.uk/lite/include/ é perfeito, os feeds, depois de usado css, ficam fantásticos, e carrega super rápido. Dica genial, parabéns Júlio César !!!
Valeu! por Julio Cesar Bessa Monqueiro