{"id":2783,"date":"2009-01-23T11:27:19","date_gmt":"2009-01-23T13:27:19","guid":{"rendered":"https:\/\/eliezerladeira.com.br\/blog\/?p=2783"},"modified":"2026-02-05T15:59:24","modified_gmt":"2026-02-05T18:59:24","slug":"como-criar-um-widget","status":"publish","type":"post","link":"https:\/\/eliezerladeira.com.br\/blog\/como-criar-um-widget\/","title":{"rendered":"Como criar um\u00a0widget"},"content":{"rendered":"
\n

Produza seu pr\u00f3prio widget\u00a0e exporte seu feed RSS para outros sites e blogs.<\/span><\/p>\n

Os widgets\u00a0<\/span>est\u00e3o no auge de sua popularidade. Com eles \u00e9 poss\u00edvel adicionar not\u00edcias, miniaplicativos, joguinhos e outros trecos digitais a qualquer blog ou site pessoal. Parece complicado de fazer, mas, em termos de programa\u00e7\u00e3o, um widget \u00e9 meramente um componente, classe ou p\u00e1gina que gera o conte\u00fado em HTML, JavaScript ou Flash capaz de mostrar as informa\u00e7\u00f5es desejadas. Neste tutorial, vamos montar um widget simples, capaz de baixar e mostrar as not\u00edcias de um canal RSS definido previamente, feito em PHP. O pacote de arquivos PHP e HTML usados no passo-a-passo pode ser baixado\u00a0clicando aqui<\/a>. Confira a seguir.<\/p>\n

1. Ambiente de desenvolvimento<\/strong><\/p>\n

\"Widget\"<\/strong><\/p>\n

Para come\u00e7ar, vamos instalar o pacote\u00a0WampServer<\/a>. Ele ser\u00e1 nossa base para testar o widget no computador local antes de envi\u00e1-lo para um servidor acess\u00edvel pela internet. A instala\u00e7\u00e3o \u00e9 bem simples, exigindo apenas, ao final, a indica\u00e7\u00e3o do navegador-padr\u00e3o a ser usado pelo pacote. Depois disso, crie uma pasta denominada widget, dentro do diret\u00f3rio C:wampwww, onde colocaremos os arquivos do widget.<\/p>\n

2. Instala\u00e7\u00e3o do componente<\/strong><\/p>\n

\"266_widget2\"<\/strong><\/p>\n

O principal componente que usaremos em nosso widget \u00e9 o Magpie RSS, um pacote para baixar e ler canais RSS. Para isso, descompacte o pacote Magpie RSS em uma pasta e copie os arquivos rss_fetch.inc, rss_parser.inc, rss_cache.inc e and rss_utils.inc para uma subpasta magpierss dentro da pasta widget criada acima. Al\u00e9m disso, copie para l\u00e1 tamb\u00e9m a pasta extlib.<\/p>\n

3. Baixando o RSS<\/strong><\/p>\n

Copie, agora, para a pasta widget, o arquivo magpie_simple.php, que est\u00e1 na pasta scripts do pacote do Magpie. Edite o arquivo, substituindo a linha define(\u00b4MAGPIE_DIR\u00b4, \u00b4..\/\u00b4); por define(\u00b4MAGPIE_DIR\u00b4, \u00b4magpierss\/\u00b4);. Grave tudo e acesse\u00a0http:\/\/localhost\/widget\/magpie_simple.php<\/a>. Digite o endere\u00e7o de um canal RSS e verifique se o componente Magpie est\u00e1 funcionando corretamente.<\/p>\n

4. Montagem do widget<\/strong><\/p>\n

\"266_widget4\"<\/strong><\/p>\n

Agora, use o editor\u00a0HTML KompoZer<\/a>\u00a0para definir o visual de nosso widget. Como queremos mostrar not\u00edcias em seq\u00fc\u00eancia, um visual tabular resolve bem. Lembre-se de deixar um texto referente a cada not\u00edcia, de forma a facilitar a localiza\u00e7\u00e3o dos pontos onde entrar\u00e3o essas informa\u00e7\u00f5es no c\u00f3digo HTML gerado pelo editor.<\/p>\n

5. Hora de juntar tudo<\/strong><\/p>\n

\"266_widget5\"<\/strong><\/p>\n

Com o visual em HTML e o Magpie funcionando, \u00e9 hora de juntar tudo. Use como exemplo o arquivo widget.php fornecido no pacote citado no come\u00e7o deste tutorial. A id\u00e9ia \u00e9 usar a vari\u00e1vel $widget para armazenar os comandos HTML. Ele come\u00e7a recebendo o HTML referente aos comandos anteriores ao conte\u00fado em RSS, depois, em um la\u00e7o foreach, gera as tags para cada not\u00edcia, recebendo, ao final, o restante do HTML. Ignore tudo o que vem antes de (incluindo o pr\u00f3prio) e depois de ao unir o HTML em uma p\u00e1gina PHP. Novamente, se preferir, simplesmente use o arquivo fornecido e mexa nos comandos iniciados por $widget .=. Por fim, n\u00e3o se esque\u00e7a de substituir o endere\u00e7o do RSS pelo do seu site.<\/p>\n

6. Teste local<\/strong><\/p>\n

\"266_widget6\"<\/strong><\/p>\n

Depois de cumprir o passo anterior, grave o arquivo widget.php na pasta widget e teste o resultado na URL\u00a0http:\/\/localhost\/widget\/widget.php<\/a>. Se tudo correu bem, o widget dever\u00e1 ser mostrado perfeitamente. Caso tenha ocorrido alguma mensagem de erro, verifique se h\u00e1 aspas dentro dos argumentos do comando echo e as retire. Outro erro comum \u00e9 esquecer de finalizar cada linha em PHP com ponto-e-v\u00edrgula.<\/p>\n

7. P\u00e1gina final<\/strong><\/p>\n

Com tudo funcionando, \u00e9 poss\u00edvel enviar o widget para um provedor online e permitir seu uso por blogs e outros sites. Envie toda a pasta widget. Para adicionar o widget a uma p\u00e1gina, basta usar o c\u00f3digo abaixo (substituindo o endere\u00e7o inicial pelo de seu site): Com isso, o widget aparece automaticamente. Vale a pena, posteriormente, mexer no c\u00f3digo para adicionar recursos ao widget, como par\u00e2metros para fixar o tamanho horizontal e vertical, n\u00famero de itens RSS baixados, entre outros. No pacote indicado inicialmente, h\u00e1 um arquivo widget_p.php com alguns desses par\u00e2metros prontos.<\/p>\n

\"266_widgetfalsa\"<\/p>\n

H\u00e1 alguns servi\u00e7os que permitem criar um widget com base em um canal RSS automaticamente, sem conhecimentos de programa\u00e7\u00e3o. Uma vers\u00e3o simples \u00e9 a do\u00a0Widgets.cc<\/a>, com poucas op\u00e7\u00f5es de personaliza\u00e7\u00e3o. J\u00e1 o widget do site\u00a0Grazr<\/a>\u00a0pode receber temas, utilizar listas de canais em OPML e ser publicado em p\u00e1ginas como Netvibes e Pageflakes.<\/p>\n

 <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Produza seu pr\u00f3prio widget\u00a0e exporte seu feed RSS para outros sites e blogs. Os widgets\u00a0est\u00e3o no auge de sua popularidade.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_layout":"default_layout","_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"ngg_post_thumbnail":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[3508,1079],"tags":[47,16,50,1008],"class_list":["post-2783","post","type-post","status-publish","format-standard","hentry","category-programacao","category-tecnologia","tag-blog","tag-dicas","tag-internet","tag-rss"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":339,"url":"https:\/\/eliezerladeira.com.br\/blog\/variaveis-variaveis\/","url_meta":{"origin":2783,"position":0},"title":"Vari\u00e1veis Vari\u00e1veis","author":"admin","date":"","format":false,"excerpt":"[ratings] Neste post mostrarei uma r\u00e1pida maneira de como criar sisteminhas que geram automa\u00a0automaticamente combos de HTML e como us\u00e1-los de maneira produtiva para uma exclus\u00e3o, por exemplo. Para se fazer isso, usa-se o conceito de uma vari\u00e1vel que n\u00e3o somente cont\u00e9m um valor que h\u00e1 distin\u00e7\u00e3o, que \u00e9 o\u2026","rel":"","context":"Em "Inform\u00e1tica"","block_context":{"text":"Inform\u00e1tica","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/informatica\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3633,"url":"https:\/\/eliezerladeira.com.br\/blog\/9-extensoes-essenciais-para-o-google-chrome\/","url_meta":{"origin":2783,"position":1},"title":"9 extens\u00f5es essenciais para o Google\u00a0Chrome","author":"admin","date":"","format":false,"excerpt":"O Google Chrome 4, como o seu concorrente Firefox, j\u00e1 tem milhares de extens\u00f5es dispon\u00edveis para download. Mas qual delas \u00e9 realmente boa? A resposta \u00e9: muitas. Mas para te ajudar, segue uma lista com 9 extens\u00f5es indispens\u00e1veis para o navegador. As extens\u00f5es, todas gratuitas, ajudam no trabalho do dia\u2026","rel":"","context":"Em "Internet"","block_context":{"text":"Internet","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/tecnologia\/internet\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":317,"url":"https:\/\/eliezerladeira.com.br\/blog\/manipulacao-de-dados-via-php-firebird\/","url_meta":{"origin":2783,"position":2},"title":"Manipula\u00e7\u00e3o de dados via PHP + Firebird","author":"admin","date":"","format":false,"excerpt":"[ratings] O PHP\u00a0\u00e9 uma linguagem com suporte nativo a diversos bancos de dados. Como estamos trabalhando com InterBase\/Firebird, segue um exemplo pr\u00e1tico de como a coisa funciona. Este exemplo foi testado com um servidor Windows 2000 e Firebird 1.0. A princ\u00edpio\u00a0voc\u00ea ter\u00e1 que ter instalado em seu computador o servidor\u2026","rel":"","context":"Em "Inform\u00e1tica"","block_context":{"text":"Inform\u00e1tica","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/informatica\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3721,"url":"https:\/\/eliezerladeira.com.br\/blog\/qual-e-a-sua-reputacao-na-web\/","url_meta":{"origin":2783,"position":3},"title":"Qual \u00e9 a sua reputa\u00e7\u00e3o na\u00a0web?","author":"admin","date":"","format":false,"excerpt":"Como descobrir se a sua imagem profissional na internet \u00e9 positiva ou se queima o filme?","rel":"","context":"Em "Curiosidades"","block_context":{"text":"Curiosidades","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/curiosidades\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":312,"url":"https:\/\/eliezerladeira.com.br\/blog\/iniciando-com-php-e-interbase\/","url_meta":{"origin":2783,"position":4},"title":"Iniciando com PHP e InterBase","author":"admin","date":"","format":false,"excerpt":"[ratings] O InterBase existe desde meados de 1980. Depois de v\u00e1rios anos na estrada, ele se tornou Open Source pela Borland em Julho de 2000. A vers\u00e3o que vou utilizar \u00e9 a 6.01 (= 6.0 + patch de seguran\u00e7a). Ela roda no Linux, v\u00e1rios derivados de Unix e no Windows.\u2026","rel":"","context":"Em "Inform\u00e1tica"","block_context":{"text":"Inform\u00e1tica","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/informatica\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":337,"url":"https:\/\/eliezerladeira.com.br\/blog\/php-5-construtores-e-destrutores\/","url_meta":{"origin":2783,"position":5},"title":"PHP 5 – Construtores e Destrutores","author":"admin","date":"","format":false,"excerpt":"[ratings] M\u00c9TODO CONSTRUTOR Na vers\u00e3o 4\u00a0do PHP geralmente d\u00e1-se um mesmo nome da classe para um m\u00e9todo fazendo com que ele seja executado quando o instanciamos. Para quem n\u00e3o entendeu imagine a seguinte situa\u00e7\u00e3o: Iremos construir uma pequena classe chamada \"Pao\".