Google Fonts API

Recentemente o Google lançou uma nova API chamada Google Fonts, junto lançou um diretorio de fontes de alta qualidade que podem ser usadas em qualquer aplicação WEB independente do navegador usado.

É bem simples de se usar, mas ainda não tem muita variedade de fonts disponíveis.

Google font directory

É o repositório de fontes liberadas para o uso através da API, pode ser acessada no endereço http://code.google.com/webfonts

Como usar

É muito simples usar essa API.

No google font directory, você clica em cima da fonte que vc quer usar e depois em GET the Code. Copie o código de referencia do CSS e cola na sua página. Depois é só usar.

Exemplo
Referência

link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'

CSS

h1.Cantarell { font-family: 'Cantarell', arial, serif; }

HTML

<h1 class="Cantarell">Cantarell</h1>

Cantarell

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Google Charts

Eu ja me peguei algumas necessitando incluir gráficos em algumas aplicações que desenvolvi. Cheguei até a desenvolver uma função que gerava gráficos em barra, mas não era muito funcional e, além de de só poder utilizar gráficos em barra não era muito bacana.

Eis que descobri uma ferrmente bem bacana chamada Google Charts.

Mas qual a vantagem?

Basta que você insira uma tag img em seu código e no src dela você coloque um determinado endereço com alguns parâmetros.

Por exemplo.

Olha a url.

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

Viu como é simples. No site tem a documentação de como se elaborar outros tipos de gráficos.

Outros exemplos.
Acelera

Linha

Pizza

Mapa

Matematica

Radar

Entre Outros

• 1 comentário
• Comentar
• Permalink
• Compartilhe

Postando no Facebook com FCONNECT. Atualização;

Tempos atrás o Facebook alterou a forma de postar mensagens através da API.

Em posts anteriores eu havia escrito que “precisamos é criar um ‘template feed data’” e bla bla bla. Esqueçam. O Facebook mudou isso. Ficou mais fácil.

A função agora é a “FB.Connect.streamPublish”.

Quando precisei alterar a aplicação que eu desenvolvi, eu apenas alterei a função que chamava esta função da API. No post que eu havia feito, a função era a “facebook_publish_feed_story".

Para usar a função streamPublish, basta passar via JSON (ver post aterior) as informações que você quer exibir, respeitando, é claro, as especificações da API.

exmplo de JSON

var attachment = {‘name’:'Atualizando’, ‘description’:'Estou descrevendo a minha mensagem que pod ser um pedaço de um post…’, ‘href’:'http://www.leandrogarcia.com/blog/};

Este JSON acima adiciona o conteúdo da mensagem.
Neste abaixo, Eu adicono o texto que fica na parte de baixo da mensagem publicada.

var actionLinks = [{ "text": "Acompanhe também:", "href": "http://www.leandrogarcia.com/blog"}];

Neste a mensagem que aparece na caixa.

var message = “Esta mensagem vai aparecer na caixa de dialogo”;

E em seguida eu chamo a função;

FB.Connect.streamPublish(message, attachment,actionLinks);

A função completa fica:

function facebook_publish_feed_story() {
	var message = "Esta mensagem vai aparecer na caixa de dialogo";
	var attachment = {'name':'Atualizando','description':'Estou descrevendo a minha mensagem que pod ser um pedaço de um post...','href':'http://www.leandrogarcia.com/blog/};
	var actionLinks = [{ "text": "Acompanhe também:", "href": "http://www.leandrogarcia.com/blog"}];
	FB.Connect.streamPublish(message, attachment,actionLinks)
}

A variável message, você pode recebela na função. Vai da sua necessidade.

O Tyler, havia me perguntado sobre isso. O por que não estava funionando. Espero que esteja esclarecido.

• 4 comentários
• Comentar
• Permalink
• Compartilhe

Facebook Connect, como postar no mural do Usuário.

Acreditando eu que os dois posts anteriores foram seguidos, agora vamos postar o item no mural.

Para postar, a primeira coisa que precisamos é criar um “template feed data”. Vá até http://developers.facebook.com/tools.php?feed.

Procure o nome do seu aplicativo e clique em Proxima.

Neste ponto você começa a desenvolver ou criar o seu “template feed data”.

O template nada mais é do que umaforma com que o facebook recebe informações em JSON e exibe no perfil do usuário com sua prévia autorização.

O primeiro é o de uma linha, algumas variáveis são exclusivvas como actor e images. As variáveis são exibidas na forma de {*variável*}. Ex. {*actor*} escreveu um post. Sairia: Leandro escreveu um post.

Há o campo onde você desenvolve o template e abaixo, um onde você desenvolve o JSON, por padrão vem:

{“images”:[{"src":"http://pad.thedigitalmovement.com/_blaise/2007-06-15-dgen-breakfast.jpg", "href":"http://www.facebook.com"}, {"src": "http://pad.thedigitalmovement.com/_blaise/2007-06-13-roger-waters.jpg", "href":"http://www.facebook.com"}]}

Apenas imagens, mas você pode e deve acrescentar de acordo com sua necessidade.

Vamos criar um que envie o resultado de um jogo, o nome dos times, o escudo de cada time e o texto que você escreveu.

{“time1″:”Atlético-GO”,”time2″:”palmeiras”,”gols1″:”2″,”gols2″:”0″, {“images”:[{"src":"http://images.ig.com.br/placarus/escudos/atletico_goianiense_go.gif", "href":"http://images.ig.com.br/placarus/escudos/atletico_goianiense_go.gif"}, {"src": "http://images.ig.com.br/placarus/escudos/atletico_goianiense_go.gif", "href":"http://images.ig.com.br/placarus/escudos/atletico_goianiense_go.gif"}]},”comentario”:”vai corinthians”}

Com este JSON, ocê pode desenvolver seu template.

{*actor*} Comentou sobre {*time1*} {*gols1*} x {*gols2*} {*time1*} -> Leandro Garcia comentou sobre Corinthians 2 x 0 palmeiras

Ao clicar em próxima, você desenvolve o template maior, o que é mais comulmente usado.

Colocaremos o título da mesma maneira, embora não necessite ser igual.

{*actor*} Comentou sobre {*time1*} {*gols1*} x {*gols2*} {*time1*} -> Leandro Garcia comentou sobre Corinthians 2 x 0 palmeiras

Abaix no Histórico curto, colocaremos apenas o comentário digitado:

{*comentario*} -> Vai Corinthians

depois Próxima.

No próximo item você cria um link de retorno, no Texto do link da ação, por exemplo: Veja mais sobre o Jogo

no Link da ação ex. http://esporte.ig.com.br

Pronto, em todo post do mural vai haver um link para http://esporte.ig.com.br, você pode alterar da maneira como preferir, inclusive utilizar o JSON, como o número do jogo por exemplo. Vai da sua necessidade.

Clique em próxima e depois em registar coleção de modelo.

Será aberto um pop com o identificador do template. Copie-o e reserve pra mais tarde.

Bom agora você tem um template elaborado, hora de criar o código propriamente dito.

Criamos uma função em JS para publicar.

** O facebook alterou a forma de se publicar. Neste poste você consegue ver.

function publish($comentario){
{"time1":"Corinthians","time2":"palmeiras","gols1":"2","gols2":"0", "images":[{"src":"http://pad.thedigitalmovement.com/_blaise/2007-06-15-dgen-breakfast.jpg", "href":"http://www.facebook.com"}, {"src": "http://pad.thedigitalmovement.com/_blaise/2007-06-13-roger-waters.jpg", "href":"http://www.facebook.com"}],"comentario":"vai corinthians"}
facebook_publish_feed_story(141837730762, $template_data);
}

Onde 141837730762 é o id do template que você criou;

O código abaixo, faz a permissão;

function facebook_prompt_permission(permission) {
FB.ensureInit(function() {
FB.Connect.showPermissionDialog(permission);
});
}

O código abaixo faz a publicação própriamenst dita.

function facebook_publish_feed_story(form_bundle_id, template_data) {
FB.ensureInit(function() {
FB.Connect.showFeedDialog(form_bundle_id, template_data);
});
}

Criamod um botão para enviar a mensagem.

<input onclick=&quot;publish('Vai Corinthians')&quot; type=&quot;button&quot; value=&quot;Submit Comment&quot; />

ao clicar vai abrir um pop com a mensagem.

Clicando e Publish, estará publicado no Mural d Usuário no Facebook.

Vídeo de como publicar um Feed com Facebook Connect.

Mo próximo Post como crar uma página de comentários

** Atualização dia 10/03/2010

• 4 comentários
• Comentar
• Permalink
• Compartilhe

Facebook Connect, como conectar sua página com o facebook.

Para se conectar co Facebook, precisa-se seguir algunas passos básicos.

1º Quando você iniciar a tag HTML, você deveincluir nela uma sintaxe XML do Facebook. como o exemplo abaixo.

Antes

<html xmlns="http://www.w3.org/1999/xhtml">

Depois

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

2º Incluir ao final do documento, antes da tag </body> as linhas abaixo, onde 6f9a5e6aeeff75a6c5ef707dbc301e3f, é a Chave API que você cadastrou anteriormente.

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
<script type="text/javascript">
FB.init("6f9a5e6aeeff75a6c5ef707dbc301e3f","xd_receiver.htm");
</script>

3º Você deve enviar um arquivo html receiver para a mesma pasta do app no sevidor. O código deve ser exatamente o abaixo, sempre.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script>
</body>
</html>

Pronto, você conectou seu aplicativo. Simples, não?

Mas, vamos melhorar um pouco.
Vamos incluir o botão Fconnect, para conectar.

Isso é mais complicado.
Você precisa incluir a tag abaixo onde você quiser que o botão apareça.

<fb:login-button></fb:login-button>

Brincadeira, é bem simples.

Com isso você se conecta, mas não obtem nenhuma informação sequer.

Vamos melhorar mais um pouco.
Vamos colocar o botão do Fconnect e uma div com um id (user)

<div id="user">
Name: <input name="name" size="27"><br />
Ou você pode se conectar com <fb:login-button lenght="long" onlogin="update_user_box();"></fb:login-button>
</div>

É nessa div, que mais tarde as informações serão incluídas via Javascript.

vamos cirar a fução em Js para receber e arrumar as informações.

function update_user_box(){
var user_box = document.getElementById("user");
user_box.innerHTML =
"<span>"
+ "<fb:profile-pic uid=loggedinuser facebook-logo=true></fb:profile-pic>"
+ "Bem-vindo, <fb:name uid=loggedinuser useyou=false></fb:name>. Você está conectado à sua conta do facebook."
+ "</span>";
FB.XFBML.Host.parseDomTree();
}

Com essa função você recebe a imagem (avatar) do usuário e o nome dele e joga tudo naquela div que criamos anterormente (lembra?).

<!-- essa é a imagem -->
<fb:profile-pic uid=loggedinuser facebook-logo=true></fb:profile-pic>

<!-- essa é o nome -->
<fb:name uid=loggedinuser useyou=false></fb:name>

Pra finalizar, na última linha, onde incluimos A chave da API, nós fazemos uma pequena alteração.

FB.init("6f9a5e6aeeff75a6c5ef707dbc301e3f","xd_receiver.htm", {"ifUserConnected" : update_user_box});

Incluindo a sintaxe “{“ifUserConnected” : update_user_box}”, ao entrar na página, se o usuário estiver conectado ao facebook e ter permitido a página acessar seu perfil, não aparece o botão do connect, mas já as informações.

Em relação ao botão “Fconnect” não da pra alterar ao seu “bel prazer”, mas da pra usar alguns pré-confirgurados. Neste link você consegue visualizar as opções disponíveis.

É isso. Agora você já sabe como conectar ao facebook. No próximo post, vou ensira a postar alguma coisa no mural.

Para maiores informações sobre a API acesso o Wiki. http://wiki.developers.facebook.com/

Veja o vídeo explicativo

• 14 comentários
• Comentar
• Permalink
• Compartilhe

Facebook Connect: Como configurar o App

O facebook connect é uma API do Facebook que permite que você desenvolva suas aplicações, tais como comentários de blogs, utilizando informações da conta do usuário do Facebook, ou , também, permite que você poste mensagens no mural do usuário do facebook.

Veja o exemplo abaixo da utilização do Facebook Connect. O site utilizado é o www.techcrunch.com

Neste ponto abaixo, o usuário permite a conexão do site/aplicação com a conta dele no facebook.

Neste ponto ele digita o usuário e senha dele no Facebook.

Após validação da conta no facebook, o fconnect traz alguma informações de volta.

Uma vez postado o comentário, o facebook connect traz um pop para a confirmação da inclusão da mensagem no mural do usuário dentro do facebook.

Depois de confirmada, a mensagem é postada no Mural do usuário dentro do Facebook,

Este foi um exemplo da utilização do Facebook Connect em um blog, no caso o http://www.techcrunch.com/

Legal, já vi em funcionamento, mas como eu faço isso?

Em princípio parece difícil mas na verdade é bem fácil. Vamos lá.

A primeira coisa que você precisa é de uma conta no facebook. Acesse www.facebook.com e crie sua conta.

Após a criação da conta, deve-se adicionar ao menos um amigo para validar a conta (parece mentira, mas apanhamos muito até descobrir isso)

Após criar a conta e ter uma amigo adiconado, podemos criar um app.

Primeiro passo, acesse www.facebook.com/developers.

Permita o acesso ao developers.

Clique em set up a new application (do lado direito superior).

Preencha o Nome do APP e concorde com os termos de responsabilidade.

A partir deste ponto você começa a preencher os dados do APP.

Aqui você escolhe as imagens do app. A imagem(icone) que será exibido em cada postagem no mural e a imagem do app. (não é necessário incluir para funcionar, mas a utilização deixa o App mais completo)

Vamos usar o  Par o ícone (Meu Primeiro App)

Faça o mesmo processo para a imagem maior.

Não altere mais nada nesta tela.

Clique em Conectar.

Nesta tela preencha o campo “Conectar URL” com a URL de onde a página que utilizará o Fconnect vai acessar, exemplo, se o endereço da página for, por exemplo,  “http://www.meuprimeiroappnofacebook.com/mpa.php?id=1″, no campo você deve preencher “http://www.meuprimeiroappnofacebook.com”, nada mais.

Clique em Salvar alterações.

Pronto, você configurou seu primeiro App.

A chave de API, será utilizada posteriormente na página.

• 6 comentários
• Comentar
• Permalink
• Compartilhe

Facebook Connect.

Ultimamente tenho trabalhado bastante com redes sociais.

No momento tenho trabalhado bastante com a API do Facebook, a Fconnect.

Estou elaborando um tutorial a respeito do funcionamento da api, mas por enquanto vocês podem ler a wiki do facebook para o fconnect. http://wiki.developers.facebook.com/index.php/Facebook_Connect

Esteaqui é o primeiro trabalho que eu participei para desenvolvimento com a API FConnect.

http://app.esporte.ig.com.br/placar/forum/index.php?jogo=13004

• 2 comentários
• Comentar
• Permalink
• Compartilhe