Pinceladas da Web » JavaScript

ceplivre – API de CEPs para formulários

Pedro Rogério — Mon, 19 Dec 2011 09:57:46 +0000

Você provavelmente já deve ter passado por um daqueles formulários onde ao colocar o CEP da rua onde você mora, ele automaticamente preenche os outros campos com o seu endereço. Pois bem, por trás disso existe um simples código que busca em um banco de dados seu endereço através do seu CEP.

Até aí tudo bem, mas e para desenvolver uma engenhoca dessa? Manter o seu banco de dados com os CEPs de todo o brasil atualizados não é tarefa fácil, por isso indico a vocês um site que acabei descobrindo esses dias, o ceplivre, onde através do seu sistema provem informações básicas de endereços, códigos do IBGE, códigos DDD (Discagem Direta à Distância), altitude, área e coordenadas (latitude e longitude) de todas as cidades brasileiras.

Para você ter idéia, hoje o ceplivre conta com uma base de mais de 630.000 CEPs cadastrados que são atualizados diariamente. Manter uma base dessas atualizada não é tarefa fácil, por isso eles dispõem de diversos planos, desde o plano Free, onde você pode efetuar até 15 consultas por dia, até o Plano Premium, com pesquisas ilimitadas e acesso a todas as features do sistema.

O webservice do ceplivre é compatível com todas as principais linguagens de programação web, entregando dados em formatos CSV, XML e JSON. Para utilizar o sistema é simples, basta desenvolver uma rotina que faça acessos HTTP ao servidor, onde as URLs de pesquisa seguem a seguinte estrutura:


http://ceplivre.com.br/consultar/$tipo/$key/$busca/$formato

$tipo é o tipo de busca, por CEP (cep) ou por endereço (logradouro).
$key é a chave de autenticação enviada por e-mail na confirmação da assinatura.
$busca é o termo de busca. Se for um CEP, o código (01001-000). Se for um endereço, parte do nome (Paulista).
$formato é o formato do resultado da busca que pode ser XML (xml), CSV (csv) ou JSON (json).

Portanto, para efetuar uma busca em formato JSON, basta utilizar a seguinte URL:


http://ceplivre.com.br/consultar/cep/sua_key_aqui/01001-000/json

Estando tudo Ok, seria retornado o seguinte JSON:

{

    "cep": [
        {
            "tp_logradouro": "Praça",
            "tp_logradouro_id": "8",
            "logradouro": "da Sé",
            "bairro": "Sé",
            "cidade": "São Paulo",
            "uf_sigla": "SP",
            "ufnome": "São Paulo",
            "id_estado_ibge": "35",
            "cep": "01001-000",
            "muncoddv": "3550308",
            "ddd": "11",
            "altitude": "760",
            "latitude": "-23.548",
            "longitude": "-46.636",
            "area": "1522.986",
            "capital": "S"
        }
    ]

}

Agora por exemplo eu poderia manipular esses dados com JavaScript para dar mais interatividade ao meu formulário quando o usuário preencher o campo CEP.

ceplivre – API de CEPs para formulários

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Ajax Image Gallery

Pedro Rogério — Mon, 28 Nov 2011 09:53:39 +0000

Criar galerias de imagens provavelmente é o que os desenvolvedores mais fazem no dia-a-dia, e pra facilitar isso, vou deixar aqui um exemplo de um código paraa criar uma galeria de imagens com a utilização de Ajax.

O HTML é extremamente simples, crio um elemento para englobar a imagem maior, e os thumbnails são links para as imagens maiores:

...

E depois o resto fica por conta do JavaScript:

        //Flag criada para evitar que 2 imagens sejam abertas ao mesmo tempo
        var working = false;

	$('li a').click(function(e){
		e.preventDefault();
		if($(this).hasClass('active')) return;

		if(working){
	    	    return false;
	        }

		working = true;

		var imgUrl = $(this).attr('href'),
		img = new Image();

		$('li a').removeClass('active');
		$(this).addClass('active');

		$("#current").remove();
		$('#placeholder').addClass('loading');

		$(img).load(function(){
			$(this).css({display: 'none'});
			$('#placeholder').removeClass('loading').append(img);
			$(img).fadeIn();
			working = false;
		}).attr('src',imgUrl).attr('id','current');
	});

Ajax Image Gallery

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Instagr.am API

Pedro Rogério — Mon, 14 Nov 2011 09:50:31 +0000

O Instagram é um serviço de compartilhamento de fotos pelo celular, por enquanto disponível somente para usuários de iPhone (Sorry, Android Users). Através do aplicativo no celular, seus usuários tiram fotos em estilo Polaroid e podem enviá-las para seus amigos, compondo uma espécie de rede social. Assim como o twitter, você pode seguir pessoas e ser seguido, enviando as fotos que retratam o seu cotidiano junto com textos curtos, e vendo fotos de amigos. Dá ainda para dizer, por geolocalização, onde as fotos foram tiradas.

O serviço tem crescido drasticamente nos últimos dias, e hoje tem aproximadamente 12 milhões de usuários. E como qualquer outra aplicação pop, eles possuem uma API, onde você pode por exemplo mostrar suas últimas fotos em seu site, ou algo do tipo.

Antes de tudo, para utilizar a API do Instagr.am, você deve ir até o site e criar um aplicativo para obter um access token e um client id, sem os mesmos você não consegue fazer nada.

Com tudo isso OK, vamos a um exemplo prático, mostrar as últimas 20 fotos de um usuário qualquer do Instagr.am. O código responsável por isso você pode ver abaixo:

var accessToken = 'seu_access_token';
var username= "nome_do_usuario";
var limit = 20; //Limite máximo de fotos
var setSize = "small";

var instagram = function() {
	return {
		init: function() {
			instagram.getUser();
		},
		getUser: function() {
			var getUserURL = 'https://api.instagram.com/v1/users/search?q='+ username +'&access_token='+ accessToken +'';
			$.ajax({
				type: "GET",
				dataType: "jsonp",
				cache: false,
				url: getUserURL,
				success: function(data) {
					var getUserID = data.data[0].id;
					instagram.loadImages(getUserID);
				}
			});
		},
		loadImages: function(userID) {
			var getImagesURL = 'https://api.instagram.com/v1/users/'+ userID +'/media/recent/?access_token='+ accessToken +'';
			$.ajax({
				type: "GET",
				dataType: "jsonp",
				cache: false,
				url: getImagesURL,
				success: function(data) {
					for(var i = 0; i < limit; i+=1) {
						if(setSize == "small") {
							var size = data.data[i].images.thumbnail.url;
						} else if(setSize == "medium") {
							var size = data.data[i].images.low_resolution.url;
						} else {
							var size = data.data[i].images.standard_resolution.url;
						}
						$("#instagram").append("");
					}
				}
			});
		}
	}
}();

$(document).ready(function() {
    instagram.init();
});

Vocês podem ver aqui um exemplo funcionando do código acima.

Você também pode pegar as últimas fotos mais populares, o código responsável por isso está abaixo:

var accessToken = 'seu_access_token';
var limit = 32; //Limite máximo de fotos
var setSize = "small";

var instagram = function() {
	return {
		init: function() {
			instagram.loadImages();
		},
		loadImages: function() {
			var getImagesURL = 'https://api.instagram.com/v1/media/popular?access_token='+ accessToken +'';
			$.ajax({
				type: "GET",
				dataType: "jsonp",
				cache: false,
				url: getImagesURL,
				success: function(data) {
					for(var i = 0; i < limit; i+=1) {
						if(setSize == "small") {
							var size = data.data[i].images.thumbnail.url;
						} else if(setSize == "medium") {
							var size = data.data[i].images.low_resolution.url;
						} else {
							var size = data.data[i].images.standard_resolution.url;
						}
						$("#instagram").append("");
					}
				}
			});
		}
	}
}();

$(document).ready(function() {
    instagram.init();
});

Vocês podem ver aqui um exemplo funcionando do código acima.

Caso você queira buscar por alguma tag, utilize o código abaixo:

var accessToken = 'seu_access_token';
var limit = 20; //Limite máximo de fotos
var setSize = "small";

var instagram = function() {
	return {
		init: function() {
			instagram.loadImages();
		},
		loadImages: function() {
			var getImagesURL = 'https://api.instagram.com/v1/tags/html5/media/recent?client_id=be52cb013dda4c47a03cdd5689896c37&access_token='+ accessToken +'';
			$.ajax({
				type: "GET",
				dataType: "jsonp",
				cache: false,
				url: getImagesURL,
				success: function(data) {
					for(var i = 0; i < limit ; i+=1) {
						if(setSize == "small") {
							var size = data.data[i].images.thumbnail.url;
						} else if(setSize == "medium") {
							var size = data.data[i].images.low_resolution.url;
						} else {
							var size = data.data[i].images.standard_resolution.url;
						}
						$("#instagram").append("");
					}
				}
			});
		}
	}
}();

$(document).ready(function() {
    instagram.init();
});

Vocês podem ver aqui um exemplo funcionando do código acima.

Eu também posso buscar fotos por geolocalização, basta passar na requisição as coordenadas geográficas e ele busca todas as fotos em um raio máximo de 5 KM, como podem ver no código de exemplo abaixo:

var accessToken = 'seu_access_token';
var limit = 20; //Limite máximo de fotos
var setSize = "small";

var instagram = function() {
	return {
		init: function() {
			instagram.loadImages();
		},
		loadImages: function() {
			var getImagesURL = 'https://api.instagram.com/v1/media/search?lat=52.370275&lng=4.886055&distance=5000?client_id=be52cb013dda4c47a03cdd5689896c37&access_token='+ accessToken +'';
			$.ajax({
				type: "GET",
				dataType: "jsonp",
				cache: false,
				url: getImagesURL,
				success: function(data) {
					for(var i = 0; i < limit; i+=1) {
						if(setSize == "small") {
							var size = data.data[i].images.thumbnail.url;
						} else if(setSize == "medium") {
							var size = data.data[i].images.low_resolution.url;
						} else {
							var size = data.data[i].images.standard_resolution.url;
						}
						$("#instagram").append("");
					}
				}
			});
		}
	}
}();

$(document).ready(function() {
    instagram.init();
});

Vocês podem ver aqui um exemplo funcionando do código acima.

Instagr.am API

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Ler Feeds com o Google JSAPI

Pedro Rogério — Mon, 10 Oct 2011 10:46:00 +0000

O Google JSAPI é uma ferramenta muito poderosa. Ao invés de carregar uma biblioteca separada para cada API do Google você pode simplesmente carregar a JSAPI e através do google.load chamar a biblioteca de que precisa.

Nesse tutorial vou carregar a biblioteca de Feeds para ler um Feed RSS externo. O que você deve simplesmente é incluir a biblioteca do JSAPI na sua página:

Após isso, vamos criar a função responsável por fazer o parser do feed:

//O endereço do Feed que desejo ler
var rss = "http://feeds2.feedburner.com/pinceladasdaweb";
//Número de itens a serem mostrados
var itens = 8;

var Feed = function() {
	return {
		init: function() {
			var blog = new google.feeds.Feed(rss);
			blog.setNumEntries(itens);
			blog.load(function(data) {
				if (!data.error) {
					Feed.parser(data.feed.entries);
				}else{
					$("#feed").empty().html("Ocorreu um erro ao ler o Feed");
				}
			});
		},
		parser: function(entries) {
			var view = [];
			view.push('');
			for (var i = 0; i < entries.length; i+=1) {
				view.push(''+entries[i].title+'
'+entries[i].contentSnippet+'');
			}
			view.push('');
			$("#feed").empty().append(view.join(''));
		}
	}
}();

E no HTML simplesmente adiciono uma div com o id ‘feed’, com uma imagem de loading que a removo assim que o Feed for carregado:

Aqui vocês podem ver um exemplo.

Ler Feeds com o Google JSAPI

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Aprenda mais sobre o console do Firebug

Pedro Rogério — Sat, 08 Oct 2011 14:08:15 +0000

A utilização do Firebug não é voltada somente a inspeção de CSS, existem várias outras coisas que você pode fazer com ele que podem facilitar e muito a vida do desenvolvedor web. Com base nisso, deixa aqui um link com 10 dicas para se tornar um melhor desenvolvedor com o Firebug.

Já para o console do Chrome, deixo aqui um vídeo interessante criado por Paul Irish com algumas dicas legais:

Aprenda mais sobre o console do Firebug

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Slideshow com jCarousel

Pedro Rogério — Mon, 03 Oct 2011 10:28:02 +0000

Ao contrário do muitos pensam, o plugin jCarousel não precisa ser utilizado somente no desenvolvimento de um Carousel, ele pode também ser utilzado na criação de um Slideshow, e como vou mostrar, ele também funciona perfeitamente para isso.

A grande sacada do jCarousel é que ele possui suporte a controles externos, com isso basta então criar uma função que gere dinamicamente aqueles bullets que ficam logo abaixo do Slideshow, fazendo com que cada link ao ser clicado vá para sua imagem em questão:

function carouselSlideshow(carousel) {
	carousel.clip.hover(function () {
		carousel.stopAuto();
	}, function () {
		carousel.startAuto();
	});

	$('').insertAfter('.jcarousel-container');

	$('#slideshow li').each(function(index) {
			var number = parseInt(index) + 1;
			$('#bullets').append(''+ number +'');
	});

	$('#slideshow').delegate('#bullets a', 'click', function(){
		carousel.scroll($.jcarousel.intval($(this).text()));
		return false;
	});
};

Com a função pronta, basta chamá-la como um Callback dentro da chamada do jCarousel:

$('#slideshow ul').jcarousel({
	auto: 5,
	scroll: 1,
	wrap: 'last',
	initCallback: carouselSlideshow,
	itemVisibleInCallback: {
		onAfterAnimation: function(c, o, i, s) {
			--i;
			$('#bullets a').removeClass('active');
			$('#bullets a:eq('+i+')').addClass('active');
		}
	}
});

Slideshow com jCarousel

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Introdução ao YQL – Yahoo Query Language

Pedro Rogério — Wed, 21 Sep 2011 08:57:53 +0000

O YQL (Yahoo Query Language) é uma API do Yahoo criada para facilitar a vida dos desenvolvedores, onde ele reune milhares de serviços únicos. Essa API não é relativamente nova, já existe a um bom tempo, mas não vejo ninguém explorar seu potencial, por isso resolvi fazer esse post.

O YQL funciona de maneira similar a um banco de dados, onde os serviços são disponibilizados através de tabelas, onde podemos fazer consultas através de uma sintaxe semelhante a do SQL, sim, você poderá selecionar os dados a partir de uma simples select, ou combinando com subselects, e etc…

Pelo console, quando selecionamos uma tabela, já é mostrado um exemplo de como seria sua consulta, o que facilita para quem não tem conhecimentos sólidos sobre SQL. Por padrão, são exibidas as tabelas referentes aos serviços do Yahoo!, mas qualquer um pode adicionar novos serviços desde que o mesmo seja proprietário das informações ou as mesmas sejam explicitamente de domínio público.

Para ter acesso as tabelas públicas, basta fazer o seguinte, acesse o console, logo a direita você verá o título DATA TABLES, basta clicar em: Show Community Tables

Agora você tem acesso a todas as tabelas comunitárias. A partir daqui você poderia, por exemplo, consultar a tabela do W3C e executar a seguinte query no console.

select * from w3c.check where uri='www.yahoo.com'

Essa query é responsável por verificar e validar o HTML, tudo através do YQL, e o retorno disso tudo é um XML ou JSON, a partir daí eu posso fazer o que quiser com essas informações.

Em um outro exemplo que fiz aqui, efetuo a seguinte consulta no console:

select * from html where url='http://www.cssnolanche.com.br' and xpath='//div[@class="shadow"]//h2'

Essa query é responsável por acessar meu outro blog, ler todo o HTML, e com XPath pegar todo o conteúdo que está dentro da tag h2, que consequentemente está dentro de uma div com a class shadow. Vá até o console, escolha a opção XML ou JSON, clique em test e veja o resultado.

Após, eu posso pegar a REST QUERY gerada e fazer um parser com jQuery.

Em um outro exemplo também poderia pegar meu últimos Tweets, com a seguinte query:

select * from twitter.user.timeline where screen_name='pinceladasdaweb'

E depois fazer o parser do JSON gerado.

Em uma consulta mais complexa, poderia mesclar o feed dos meus 2 blogs e depois filtrar somente pelo título dos posts:

select channel.item.title,channel.item.link, channel.item.pubDate
    from xml where url in(
      'http://feeds.feedburner.com/pinceladasdaweb',
      'http://feeds2.feedburner.com/CssNoLanche'
    )
  | unique(field="channel.item.link")
  | sort(field="channel.item.pubDate", descending="true")

As possibilidades de uso do YQL são infinitas, mostrei aqui 3 exemplos básicos de uso, mas como você pode ver, o Dirceu mostra em seu blog como é possível fazer um Widget com os produtos do Submarino através do YQL e XPath. Ou então o Luis Cipriani que criou um Mash up para saber a localização das feiras livres aos domingos mais próximas de sua casa.

Introdução ao YQL – Yahoo Query Language

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Como criar um botão customizado de Share no Facebook

Pedro Rogério — Mon, 19 Sep 2011 08:56:37 +0000

Nesse tutorial vou ensinar aqui a criar um botão customizado para compartilhar o que você quiser no Facebook. Sua função é bem parecida com a do botão Send, com a diferença que o Send não é customizável.

Antes de tudo, você deve ter uma conta de desenvolvedor no Facebook, pois será necessário criar uma APP. Basta ir então ao Facebook Developers, clicar em Aplicativos, e tentar criar uma nova APP, caso sua conta não seja de desenvolvedor, ele lhe dará um aviso de verificação de conta, basta seguir os passos e pronto, sua conta a partir de agora é de desenvolvedor.

Estando tudo ok, vamos criar a APP para o nosso botão customizado. Em aplicativos clique em Create New App. Será abeeto um modal semelhante ao abaixo, basta preencher com o nome da sua APP e concordar com os termos do Facebook:

Se tudo ocorreu bem, sua APP foi criada, e agora vamos preencher algumas informações na APP, como na imagem abaixo:

Em Informações básicas > App Domain, coloque o domínio do site onde o botão deverá funcionar, sem o http e www. Mas atenção, esse deve ser o domínio de onde você quer que o botão funcione, se você testar o botão fora desse domínio, ele não funionará.

Logo abaixo, na seção Website, coloque novamente o domínio, agora você pode colocar o http e o www, como mostrados na imagem. Pronto, sua APP já está ok, bastando só salvar as alterações.

Vamos agora criar um arquivo HTML para testar o botão, e após basta adicionar esse código JavaScript a sua página, pode ser dentro do body mesmo:

Atente-se a colocar o ID da sua aplicação onde está marcado ‘YOUR APP ID’, ele fica localizado no topo da sua aplicação. Vamos agora criar a função que irá abrir o pop-up para compartilhar o conteúdo. No meu HTML eu adicionei um botão que ao ser clicado ele abre o pop-up:

Basta então agora, o JavaScript:

var el = document.getElementById('share-button');

el.onclick = function (e) {
	e.preventDefault();
	FB.ui({
		method: 'feed',
		name: 'Conteúdo do campo nome',
		link: ' sua_url_aqui',
		picture: 'url_da_imagem_aqui',
		caption: 'Conteúdo do campo caption',
		description: 'Conteúdo do campo description'
	});
}

Como podem ver, utilizei JavaScript puro para fazer o click no botão, mas você pode fazer o mesmo com jQuery, basta utilizar o seguinte código:

$('#share-button').click(function (e){
	e.preventDefault();
	FB.ui({
		method: 'feed',
		name: 'Conteúdo do campo nome',
		link: ' sua_url_aqui',
		picture: 'url_da_imagem_aqui',
		caption: 'Conteúdo do campo caption',
		description: 'Conteúdo do campo description'
	});
});

Vamos a explicação do significado de cada campo:

method: O nome do método, configure como feed para abrir a caixa de diálogo para divulgar conteúdo.
name: Texto da primeira linha da nossa caixa de diálogo. Pode conter no máximo 99 caracteres.
link: A URL que deseja compartilhar.
picture: A URL da imagem que deseja mostrar com a mensagem no seu perfil. Recomenda-se utlizar uma imagem com 90×90 pixels.
caption: A legenda do link. Máximo de 100 caracteres.
description: A descrição do link. Máximo de 270 caracteres.

Agora, ao clicar no botão, será aberta uma caixa de diálogo semelhante a essa:

Vocês podem testar a funcionalidade do botão nesse exemplo que criei. E não se esqueçam de dar uma passada no meu perfil no Facebook.

Como criar um botão customizado de Share no Facebook

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Responsive Slideshows

Pedro Rogério — Tue, 13 Sep 2011 12:00:12 +0000

Responsive Design é um conceito que visa apresentar a informação de forma confortável e acessível para qualquer dispositivo, ou seja, você pode acessar um site no PC e o mesmo no iPhone, por exemplo, onde a marcação HTML continua a mesma, mas através do CSS são feitas adaptações no layout que tornam sua navegação confortável. No momento não vou entrar muito em detalhes sobre esse assunto, só queria deixar aqui o conceito para aqueles que desconhecem essa técnica.

O intuito desse post é mostrar o conceito de Responsive Design aplicado a Slideshows, como você pode ver nos mesmos listados abaixo:

Blueberry

Plug-in para jQuery experimental voltado para layouts fluidos.

FlexSlider

Slideshow com opções de fade e slide, além de suporte a touch gestures.

PhotoSwipe

Slideshow criado visando especificamente os dispositivos móveis.

Slides

Mais um plugin para jQuery com recursos de looping e reprodução automática.

Responsive jQuery slideshow

Um simples slideshow desenvolvido com jQuery para demonstrar o poder do Responsive Design

Responsive Carousel

Plugin de carousel voltado para Responsive Layouts.

Elastislide

Plugin de carousel voltado para Responsive Layouts com suporte a Touche gestures.

Responsive Slideshows

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Carregar botão do Google+ via Ajax

Pedro Rogério — Wed, 07 Sep 2011 09:13:34 +0000

Já ensinei por aqui como carregar o botão de like do Facebook via Ajax e também o botão de Retweet, dessa vez vou ensinar como também é possível carregar o botão do Google+ via Ajax.

Para o perfeito funcionamento do código, você deve ter o jQuery na sua página, estando ok, assumo que você tenha o seguinte HTML:

Basta portanto então deixar que o JavaScript faça o resto:

$(window).load(function(){
	$.getScript('https://apis.google.com/js/plusone.js', function() {
  		$('div.plus').each(function() {
			gapi.plusone.go();
		});
	});
});

Como podem ver no exemplo, o botão só é carregado após o carregamento total da página.

Update:

Caso não queira utilizar jQuery para carregar o botão, você pode utilizar JavaScript puro, abaixo segue o código:

function loadJavaScript(file, onComplete) {
	var script = document.createElement('script');
	script.type = 'text/javascript';
	script.src = file;
	if (onComplete) {
		script.onreadystatechange = function() {
		if (this.readyState == 'complete' || this.readyState == 'loaded') {
			onComplete();
		}
	}
}
document.getElementsByTagName('head')[0].appendChild(script);
};

loadJavaScript('https://apis.google.com/js/plusone.js', function() {
	gapi.plusone.go();
});

Um exemplo com JavaScript puro você pode ver aqui.

Carregar botão do Google+ via Ajax

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Carregar botão Like do Facebook via Ajax

Pedro Rogério — Mon, 22 Aug 2011 08:16:57 +0000

Em um post anterior mostrei aqui como carregar o botão de Retweet do Twitter via Ajax, uma solução para aplicações onde o conteúdo é carregado via Ajax, ou, por outro lado, uma ótima solução por questões de performance.

Nesse post, seguindo a mesma idéia da solução anterior, vamos carregar aquele botão de Like e Send do Facebook via Ajax. O código JavaScript fica da seguinte forma (O código depende do jQuery para funcionar):

Bastando agora então no seu HTML, adicionar o botão do Facebook:

Vejam agora o exemplo. Como podem ver, o botão só é “renderizado” após o carregamento total da página.

Carregar botão Like do Facebook via Ajax

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Galeria de fotos com a API do Flickr e jQuery

Pedro Rogério — Sat, 23 Jul 2011 15:44:53 +0000

Nesse tutorial vou mostrar como você pode mostrar em seu site, blog ou onde mais você quiser suas fotos do Flickr com a utilização da API do Flickr, jQuery, Ajax e JSON. Você não precisa de conhecimento avançado para entender esse tutorial, basta conhecimentos básicos de jQuery e JSON.

Não irei me adentrar muito em detalhes sobre o HTML e o CSS, pois ele ficam a seu critério, portanto, vamos diretamente ao JavaScript:

Abaixo você pode ver a URL de requisição do Ajax:


http://api.flickr.com/services/feeds/photos_public.gne?id='+userid+'&format=json&jsoncallback=?

Na URL citada acima você encontra uma variável chamada ‘userid’, é nela que você deve colocar o seu ID de usuário do Flickr. Caso você não saiba seu ID de usuário no Flickr, basta visitar o site idGettr e digitar seu username. Já o jsoncallback é o códio que irei executar após o carregamento do arquivo JSON.

Nessa URL você pode ver um exemplo de uma resposta JSON com as últimas fotos de um usuário qualquer do Flickr:

Agora nosso código JavaScript então fica da seguinte forma:


function flickr(user){
	$.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?id='+user+'&format=json&jsoncallback=?', function(data){
		for(i=0; i<12; i++){
			$("").attr("src", data.items[i].media.m).appendTo("#flickr").wrap("<\/a>");
		}
	});
}

Para um melhor entendimento do código criei uma função chamada flickr com uma variável user, é nela que você deve passar o ID do usuário do Flickr, após uso um loop for para percorrer o JSON, pegar as últimas 12 fotos e colocar as mesmas dentro da div com o ID flickr.

Com o jQuery na sua página, basta então chamar a função ao carregar a página. Exemplo:

$(document).ready(function(){
	flickr('21088294@N00');
});

Vejam o exemplo da galeria em ação.

[Update 28-07-2011]: Aqui um exemplo com a utilização do Shadowbox: http://www.pinceladasdaweb.com.br/blog/uploads/flickr-photos/2/

Galeria de fotos com a API do Flickr e jQuery

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

JavaScript para Iniciantes

Pedro Rogério — Wed, 18 May 2011 14:16:47 +0000

Uma série de vídeos tutoriais para aqueles que estão começando agora com JavaScript:

JavaScript para Iniciantes

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Como mostrar updates do Twitter no blog

Pedro Rogério — Thu, 05 May 2011 13:19:45 +0000

Hoje em dia existem vários plugins para isso, mas criei um exemplo bem simples em jQuery para que você possa mostrar seus updates do Twitter no blog sem a utilização de plugin, e de fácil customização. Basta dar uma olhada no exemplo que criei, copiar o código e na função twitterTimeline() substituir pelo seu nome de usuário e o número de Tweets que deseja mostrar. Exemplo:

twitterTimeline('nome_do_usuario', 80);

Customize como desejar.

Como mostrar updates do Twitter no blog

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Carregar botão de Retweet via Ajax

Pedro Rogério — Thu, 14 Apr 2011 15:24:41 +0000

Uma dica rápida para aqueles que adoram performance. Estive procurando uma alternativa de como carregar o botão de Retweet do Twitter via Ajax, na documentação oficial do site eles não mencionam nada do tipo, mas fuçando descobri uma dica de Jonathan Moore onde ele ensina de uma forma simples a carregar o botão via Ajax.

Código de exemplo:

$('div.loadedViaAJAX').find('a.twitter-share-button').each(function(i) {
	var loadedTweetButton = new twttr.TweetButton($(this).get(0));
	loadedTweetButton.render();
});

Preparei um exemplo bem simples para ilustrar o funcionamento do script com a utilização de $.getScript() da jQuery.

Carregar botão de Retweet via Ajax

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?