Adicionar a Meu favorito

Friday, 11 de September de 2009

Bom, com esta ferramenta você poderá criar um gadget que irá postar seus twetts diretamente de seu site ou blog para o seu TWITTER usando a API fornecida pelo site. Vamos lá então:

Crie o arquivo msgtwitter.php e digite o seguinte código:

URL DO SEU SITE/twittbr.js'>"; ?>

Este código irá pegar via método POST os dados e a mensagem que serão digitados em um formulário que criaremos a seguir e os envia para o Twitter através de sua API. Ainda ele grava em uma SESSION o nome do usuário. Você deve no final do código, onde está escrito URL DO SEU SITE inserir o endereço de onde você vai hospedar o script.

Agora criaremos a página de onde você digitará a mensagem, chame-a de twitter.php

Observe que dentro das tags HEAD foi importada a biblioteca curvycorners.js, este javascript pode ser baixado na internet em http://www.curvycorners.net/downloads/ . Ela cria DIVS com cantos arredondados pois o IE não reconhece o CSS que faz isto, faça o upload dela para o mesmo diretório deste script. Também importamos um arquivo CSS que cuidará o layout da página. No mais é simples para quem conhece um pouco de HTML e JS.

Crie o arquivo CSS e chame-o de layout_blog.css e digite este código nele:

#box{     position: absolute;     top: 0px;     left: 0px;     background-color: #6E9D00;     width: 285px;     height: 277px;     text-align: center;     border-radius: 10px;     -moz-border-radius: 10px;     -webkit-border-radius: 10px; } #topo{     position: absolute;     top: 01px;     left: 01px;     background-color: #6E7D00;     border-radius: 10px;     -moz-border-radius: 10px;     -webkit-border-radius: 10px;     font-family: Arial, Geneva, Helvetica, sans-serif;     font-weight: bold;     width: 283px;     height: 20px; } #cadastro{     position: absolute;     background-color: #E1E1E1;     font-family: Arial, Geneva, Helvetica, sans-serif;     top: 23px;     left: 01px;     width: 273px;     border-radius: 10px;     -moz-border-radius: 10px;     -webkit-border-radius: 10px;     text-align: left;     padding: 05px; } #botao{     background-color: transparent;     text-align: center; } input{     font-family: Arial, Geneva, Helvetica, sans-serif;     font-weight: bold; } .dados{     font-style: italic;     font-size: 12px;     font-weight: bold; } .msg_twitter{     font-family: Arial, Geneva, Helvetica, sans-serif;     font-weight: bold;     font-size: 12px; } a{     text-decoration: none;     voice-family: expression(this.target='_blank'); } a:link{color: #FAFAFA;} a:visited{color: #FAFAFA;} .usr{     font-size: 10px;     font-weight: bold; }

Não sou muito bom em CSS mas este código criará as DIVS e dará estilo aos elementos da página. Este código foi testado no IE e no Firefox e funcionou certinho.

Você até já pode testar o script chamando ele pelo navegador. Se você digitou todo código certinho, baixou a curvycorners.js e fez upload dos arquivos para um mesmo diretório, então não ocorrerá nenhum erro.

Agora criaremos um javascript que encapsulará nossa página em um iframe, chame-o de twitter.js

document.write('');

Salve e faça o upload dele e pronto, para fazer um teste crie uma página HTML com o seguinte código:

Em qualquer site ou blog que você inserir o JS <script type="text/javascript" src="http://URL DO SEU SITE/twittbr.js"></script> será exibido o gadget que você criou. Veja com fica no final neste link www.granasblog.blogspot.com

Espero que sirva para alguém e que vocês comentem o que acharam o script.

Abs...

Outros artigos

Assine o Feed desta categoria

• Sistema de Troca de Links com PHP e MySQL - 25/08/2009
• Mural de recados - 06/11/2008
• Usando substr - 16/09/2008
• Colocar um $_GET em seu index - 16/09/2008
• Ver mais...

Comentários do artigo [Novo comentário]