Pinceladas da Web

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:

<script type="text/javascript">
(function() {
	var e = document.createElement('script');
	e.src = document.location.protocol + '//connect.facebook.net/pt_BR/all.js';
	e.async = true;
	document.getElementById('fb-root').appendChild(e);
}());

window.fbAsyncInit = function () {
	FB.init({
		appId  : 'YOUR APP ID',
		status : true, // check login status
		cookie : true, // enable cookies to allow the server to access the session
		xfbml  : true,  // parse XFBML
		oauth  : true // enable OAuth 2.0
	});
};
</script>

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:

<a id="share-button" href="#" title="Facebook Share Button"><img src="facebook-share-button.jpg" alt="Facebook Share Button" title="Facebook Share Button" /></a>

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.