Com a febre das redes sociais, fica evidente que algumas aplicações (as que estão abertas ao público principalmente) necessitam de uma integração com as principais redes sociais do momento. Atualmente, quem está no auge é o Facebook, devido a isso, iremos fazer a integração da nossa aplicação com essa rede social.

Registrando a nossa aplicação

Primeiramente, para conseguir fazer a integração de sua app com o Facebook, é preciso possuir uma conta na rede social. Tendo uma conta no Facebook, o que é preciso agora é registrar nossa aplicação no mesmo. Para fazer isso, teremos que acessar o Facebook Developer. Faça o login com sua conta do Facebook (o ideal é ser uma conta que você não utilize para uso pessoal e sim para desenvolvimento de sistemas), e após isso clique em Register as a Developer, assim como mostra a Figura 1.

Página inicial do Facebook Developers
Figura 1. Página inicial do Facebook Developers

Após isso, aparecerá uma tela como mostra a Figura 2 marque a opção “I accept the Facebook Platform Policy and the Facebook Privacy Policy” e em seguida clique em Continuar.

Registrando a aplicação no Facebook
Figura 2. Registrando a aplicação no Facebook

Agora digite o número do seu celular para que o Facebook possa enviar um SMS para que possamos continuar o processo de registro da aplicação, esse procedimento é usado como procedimento de segurança para o Facebook. Após digitar o número do telefone, clique em continuar, assim como mostra a Figura 3.

Verificação de conta do Facebook
Figura 3. Verificação de conta do Facebook

Após isso, você receberá um SMS com um código para confirmação, digite-o e clique em continuar. Agora você colocará a linguagem na qual estará desenvolvendo a aplicação, no nosso caso iremos marcar a opção Android, assim como mostra a Figura 4.

Definição da linguagem de desenvolvimento da aplicação
Figura 4. Definição da linguagem de desenvolvimento da aplicação

Após isso aparecerá uma tela confirmando o procedimento, clique em Done para continuar. Após isso você será direcionado para a página principal, onde aparecerá à opção Criar novo aplicativo, após clicar nessa opção aparecerá uma tela como mostra a Figura 5.

Tela de registro da app
Figura 5. Tela de registro da app

Preencha as informações solicitadas de acordo com seu software e clique em Continuar.

Agora teremos que preencher um campo chamado Key Hashes, nessa nova tela que aparecerá, esse campo é justamente a assinatura do nosso projeto. Teremos que gerar ele a partir do arquivo *.keystore. Para isso teremos que baixar o OpenSSL que serve para gerar essa assinatura. Após baixar, descompacte o zip na pasta C:. Feito isso, teremos que gerar o Key Hashes. Primeiramente, abra o prompt de comando e digite o comando da Listagem 1 para adicionar o diretório do OpenSSL no path.

set PATH=%PATH%;C:\openssl-0.9.8k_WIN32\bin
Listagem 1. Adicionando o diretório do OpenSSL ao path

Para gerar a chave, digite esse comando da Listagem 2:

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore |
   openssl sha1 -binary | openssl base64
Listagem 2. Gerando a chave

Copie a hash que foi gerada, cole no campo Android Key Hash e conclua o cadastro da aplicação no Facebook. As configurações deverão ficar parecidas com as da Figura 6.

Nota: Copie o AppID e o App Secret, pois iremos precisar deles na hora da implementação do código fonte, o app ID será responsável por identificar sua aplicação.
Criando a referência da app com a rede social Facebook
Figura 6. Criando a referência da app com a rede social Facebook

Download da API do Facebook para o Android

Após registrar a nossa aplicação junto ao Facebook, iremos agora acessar a página https://github.com/facebook/facebook-android-sdk/ e iremos fazer o download da API, assim como mostra a Figura 7.

Página de download da API do Facebook para o Android
Figura 7. Página de download da API do Facebook para o Android

Após clicar em ZIP, irá aparecer uma página para realizar o download. Baixe esse arquivo e salve no local que desejar dentro do seu computador, esse projeto que foi baixado será integrado ao que iremos desenvolver mais adiante.

Importando o projeto do facebook SDK

Iremos agora criar, no Eclipse, um novo projeto. Clique em File > New > AndroidProject, o nome do projeto será facebooksdk (coloque esse nome no projeto) e selecione a opção Create project from existing source. Clique em Browser e escolha o diretório onde você descompactou a API do Facebook, que foi baixada, escolha a pasta facebook dentro do projeto e clique em OK. Feito isso clique em Finish.

Após isso, teremos que importar a biblioteca android-support-v4.jar, ela está na pasta libs do projeto do Facebook que foi baixado para seu computador. Para importamos essa biblioteca, teremos que adicioná-la ao Build Path. Para fazer isso, basta clicar com o botão direito sobre o projeto e selecionar Build Path > Configure Build Path. Na janela que for exibida, na aba Libraries, clique no botão Add External JARs, vá até o diretório onde você salvou o projeto do Facebook (projeto que foi feito download). Dentro da pasta libs estará o arquivo .jar, clique nele e em seguida em Abrir.

Nota: Se o projeto apresentar erros em relação a anotações @Override, você pode removê-las.

Criando o nosso projeto

Para começarmos, teremos que criar um novo projeto no Eclipse. Clique em File > New > AndroidProject e coloque o nome do projeto como quiser, neste exemplo irá se chamar DevmediaFacebook. Após termos criado o nosso projeto, teremos que adicionar a referência do projeto facebooksdk ao nosso projeto, para isso, clique com o botão direito sobre o projeto e selecione Properties.

No lado esquerdo, selecione Android e na parte inferior adicione a referência ao projeto clicando em Add... e selecionando o facebooksdk, assim como mostra a Figura 8.

Adicionando referência do projeto do facebooksdk ao nosso projeto
Figura 8. Adicionando referência do projeto do facebooksdk ao nosso projeto

O projeto que iremos fazer é bem simples, ele irá fazer login no Facebook ao iniciar e teremos como função atualizar nossos status com apenas texto e também poderemos fazer uma postagem com texto e imagem.

Implementando o código fonte da aplicação

Antes de continuarmos, teremos que declarar no AndroidManifest.xml a permissão de internet, para isso basta deixar o XML igual ao da Listagem 3.


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="devmedia.artigo.weslley"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="10" />
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".DevmediaFacebookActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
Listagem 3. XML responsável por declarar permissão de acesso à internet

Criando a tela do aplicativo

Iremos agora desenhar nossa tela principal, para isso teremos que abrir o nosso main.xml e teremos que deixá-lo como o da Figura 9.

Tela inicial do aplicativo
Figura 9. Tela inicial do aplicativo

Para fazer uma tela como essa, basta deixar o nosso main.xml como a Listagem 4, esse XML é o responsável por deixar a tela inicial da nossa app igual ao da Figura 9.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="O que você está pensando?"
                android:textAppearance="?android:attr/textAppearanceLarge" />

            <EditText
                android:id="@+id/editText1"
                android:layout_width="match_parent"
                android:hint="Digite algo para seus amigos"
                android:layout_height="wrap_content" />

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:layout_gravity="center"
                android:maxHeight="64dp"
                android:maxWidth="64dp"
                android:minHeight="64dp"
                android:minWidth="64dp"
                android:scaleType="fitXY"
                android:src="@drawable/semimg" />

            <LinearLayout
                android:id="@+id/linearLayout2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

                <Button
                    android:id="@+id/button3"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:onClick="galleryButtonClick"
                    android:text="Buscar Imagem" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/linearLayout1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

                <Button
                    android:id="@+id/button1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:onClick="updateStatusClick"
                    android:text="Postar" />
            </LinearLayout>
        </LinearLayout>
    </ScrollView>

</LinearLayout>
Listagem 4. XML responsável pela tela inicial da nossa app

Agora iniciaremos a implementação do código para enviar posts ao Facebook, para isso teremos que utilizar o app ID, aquele código foi gerado pela API do Facebook para identificar sua aplicação, iremos utilizá-lo como mostra na Listagem 5.


package devmedia.artigo.weslley;

import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.net.MalformedURLException;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.content.pm.ActivityInfo;
import android.database.Cursor;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.net.Uri;
import android.os.Bundle;
import android.provider.MediaStore;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.Toast;

import com.facebook.android.AsyncFacebookRunner;
import com.facebook.android.AsyncFacebookRunner.RequestListener;
import com.facebook.android.DialogError;
import com.facebook.android.Facebook;
import com.facebook.android.Facebook.DialogListener;
import com.facebook.android.FacebookError;

public class DevmediaFacebookActivity extends Activity {

	private static final String APP_ID = "AQUI IRÁ O APP ID DE SUA APLICAÇÃO";

	private static final String ACCESS_EXPIRES = "access_expires";
	private static final String ACCESS_TOKEN = "access_token";

	private Facebook facebook;
	private SharedPreferences prefs;

	private Bitmap fotoTirada;
	private ImageView imageView1;
	private File caminhoFoto;

	private Bitmap image;

	String[] salvarimg = new String[0];

	String corpo;

	private int cont = 0;
 
Listagem 5. Trecho de código responsável por identificar aplicação e sincronizá-la com a app do Facebook

Dentro do nosso método onCreate(), implementaremos justamente a chamada da tela do login do Facebook, caso o usuário não esteja logado na rede social, ele abrirá a janela de login semelhante à da Figura 10.

Ainda dentro do método onCreate(), iremos implementar a orientação da tela, que estará sempre “travada” como portrait (em retrato), e chamaremos nossa imageView, com a imagem padrão da tela iniciar. Veja como ficaria na Listagem 6.

Imagem referente ao login do Facebook, tela já integrada ao app que estamos desenvolvendo
Figura 10. Imagem referente ao login do Facebook, tela já integrada ao app que estamos desenvolvendo
    
public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.main);
	facebook = new Facebook(APP_ID);
	prefs = getPreferences(MODE_PRIVATE);
	// Carrega a accessToken para saber se o usuário
	// já se autenticou.
	loadAccessToken();

	// Caso não tenha se autenticado, abre o login
	if (!facebook.isSessionValid()) {

		// Chama a tela de login do facebook
		facebook.authorize(this, new String[] { "publish_stream" },
		new DialogListener() {
		// Login com sucesso, salva o accessToken
		public void onComplete(Bundle values) {
	      saveAccessToken();
		}

		// Os métodos abaixo devem ser
		// implementados para tratatmento dos
		// fluxos width="640" alternativos
		public void onFacebookError(FacebookError error) {
		}

		public void onError(DialogError e) {
		}

		public void onCancel() {
		}
	});
	this.setRequestedOrientation
		(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
	}

	imageView1 = (ImageView) findViewById(R.id.imageView1);
}
Listagem 6. Código responsável por exibir tela de login do Facebook

Após isso, iremos apenas implementar os métodos de buscar imagem na galeria de imagens, identificar se será enviado apenas post ou post e foto juntos, e os demais métodos de envio. Não estenderemos tanto explicando método a método, pois o código está todo comentado e se auto explica tranquilamente, os métodos devem ficar da forma da Listagem 7.

                                                                                                 
	public void galleryButtonClick(View v) {
		// apagaTemp();

		Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
		intent.setType("image/*");
		startActivityForResult(intent, 0);

		cont++;
	}

	// Evento de clique do botão para atualizar o status
	public void updateStatusClick(View v) {
		EditText edt = (EditText) findViewById(R.id.editText1);

		if ((edt.getText().toString().trim().equals(""))
			|| (edt.getText().toString() == null)) {

			Toast.makeText(this, "Ops!!!, Digite algo para seus amigos...",
			Toast.LENGTH_LONG).show();

		} else if ((edt.getText().toString().trim().equals(""))
			|| (edt.getText().toString() == null) || cont > 0) {

			corpo = edt.getText().toString();
			
			sendPhoto(edt.getText().toString());

		} else if (cont == 0) {

			corpo = edt.getText().toString();

			updateStatus(edt.getText().toString());
			

		}

		edt.setText("Aguarde enquanto publicamos o seu post, isso pode demorar um pouco...");
		edt.setEnabled(false);

	}

	private RequestListener requestListener = new RequestListener() {
		public void onMalformedURLException(MalformedURLException e,
			Object state) {
			showToast("URL mal formada");
		}

		public void onIOException(IOException e, Object state) {
			showToast("Problema de comunicação");
		}

		public void onFileNotFoundException(FileNotFoundException e,
			Object state) {
			showToast("Recurso não existe");
		}

		public void onFacebookError(FacebookError e, Object state) {
			showToast("Erro no Facebook: " + e.getLocalizedMessage());
		}

		public void onComplete(String response, Object state) {
			
			showToast("Publicação realizada com sucesso");

		}
	};

	// Método que efetivamente atualiza o status
	private void updateStatus(String status) {
		AsyncFacebookRunner runner = new AsyncFacebookRunner(facebook);

		Bundle params = new Bundle();
		params.putString("message", status);
		runner.request("me/feed", params, "POST", requestListener, null);
	}

	// Método que efetivamente atualiza o status com imagem
	private void sendPhoto(String status) {
		AsyncFacebookRunner runner = new AsyncFacebookRunner(facebook);

		ByteArrayOutputStream baos = new ByteArrayOutputStream();

		image.compress(Bitmap.CompressFormat.PNG, 100, baos);

		byte[] bytes = baos.toByteArray();

		Bundle params = new Bundle();
		params.putByteArray("picture", bytes);
		params.putString("message", status);

		runner.request("me/photos", params, "POST", requestListener, null);
	}

	private void showToast(final String s) {
		final Context ctx = DevmediaFacebookActivity.this;
		runOnUiThread(new Runnable() {
			public void run() {
				Toast.makeText(ctx, s, Toast.LENGTH_SHORT).show();
			}
		});
	}

	private void saveAccessToken() {
		SharedPreferences.Editor editor = prefs.edit();
		editor.putString(ACCESS_TOKEN, facebook.getAccessToken());
		editor.putLong(ACCESS_EXPIRES, facebook.getAccessExpires());
		editor.commit();
	}

	private void loadAccessToken() {
		String access_token = prefs.getString(ACCESS_TOKEN, null);
		long expires = prefs.getLong(ACCESS_EXPIRES, 0);
		if (access_token != null) {
			facebook.setAccessToken(access_token);
		}
		if (expires != 0) {
			facebook.setAccessExpires(expires);
		}
	}

	public void onActivityResult(int requestCode, int resultCode, Intent data) {
		super.onActivityResult(requestCode, resultCode, data);

		if (cont == 0) {
			// A API do Facebook exige essa chamada para
			// concluir o processo de login.
			facebook.authorizeCallback(requestCode, resultCode, data);
		} else {

			if (resultCode == RESULT_OK) {
				switch (requestCode) {
				case 0:

					Uri selectedImage = data.getData();
					String[] filePathColumn = { MediaStore.Images.Media.DATA };

					Cursor cursor = getContentResolver().query(selectedImage,
						filePathColumn, null, null, null);
					cursor.moveToFirst();

					int columnIndex = cursor.getColumnIndex(filePathColumn[0]);
					String filePath = cursor.getString(columnIndex); // file
						// path of selected image
					cursor.close();

					Bitmap yourSelectedImage = BitmapFactory
						.decodeFile(filePath);

					imageView1.setImageBitmap(yourSelectedImage);

					image = yourSelectedImage;

					break;

				case 1:
					fotoTirada = BitmapFactory.decodeFile(caminhoFoto
						.getAbsolutePath());
					imageView1.setImageBitmap(fotoTirada);
					break;
				}
			}

		}
	}

}
Listagem 7. Métodos da aplicação

Realizando os testes

Após termos implementado todas essas funcionalidades, chegou enfim a grande hora de testar.

Após termos realizado o login no Facebook, como mostrou a Figura 10, iremos nos deparar com a tela que irá instalar o serviço do Facebook no nosso aparelho e de fato sincronizar nossa app com a API deles (Facebook). Após essa tela ser exibida, escolha a opção Install, assim como mostra a Figura 11.

Tela de instalação da API do Facebook
Figura 11. Tela de instalação da API do Facebook

Após instalarmos o serviço da API do Facebook, temos que permitir que o mesmo escreva no nosso perfil através de um app de terceiros, como é o caso da gente. Para isso, escolha a opção Allow All, assim como mostra a Figura 12.

Permissão para escrever posts através de app
Figura 12. Permissão para escrever posts através de app

Agora iremos publicar apenas um post, para isso iremos digitar “Ola Facebook” e escolheremos a opção Postar, como mostra na Figura 13.

Postando no Facebook sem imagem
Figura 13. Postando no Facebook sem imagem

Veja a imagem do post na Figura 14.

Imagem postada via aplicação
Figura 14. Imagem postada via aplicação

Para postarmos um post com imagem é simples, basta digitar uma mensagem, clicar em Buscar imagem, escolher a imagem e clicar em Postar, assim como mostra a Figura 15.

Postar imagem com mensagem no Facebook
Figura 15. Postar imagem com mensagem no Facebook

Veja a imagem do post na Figura 16.

Postagem com foto via aplicação
Figura 16. Postagem com foto via aplicação

Conclusão

Bom, pessoal, trabalhar com API de terceiros nem sempre é fácil, mas vale a pena tentar implementar esse exemplo de publicação na rede social Facebook.

Com isso finalizamos mais um artigo, muito obrigado pela atenção de todos.