[Android] A Photo-sharing App using Facebook and Weibo API

I have spent some time to play around with Facebook and Weibo SDK for Android and create an app for photo-sharing to Facebook and Weibo with in-app log in. Here are the steps and tips. The source code is available in my Github Repo. Before it can be built and run, some steps need to be done first:

For Facebook (detail in section 2)

1. Download Facebook SDK and add the correct dependency path

2. Generate and filled in the key hash in the app development page

3. Fill in your own app id in res/values/strings.xml

For Weibo (details in section 3)

1. Add the weibo lib (.jar) file in libs.

2. Add app key in res/values/strings.xml

3. Add the test user in the app management if the user is not the developer

1. Create an app with simple UI

1.1 Main Activity Layout

The UI is minimum. Take notes that the uri (local path) of the image needs to be passed to the two new activities which are triggered by the “Facebook” and Weibo” buttons. Since the screen sizes differ for phones, some photo might be too large to be displayed, you may want to resize it before display (not done in the sample code).

Sample codes for starting activity with parameters:

...
private String selectedImagePath; 
...
facebookButton.setOnClickListener(new OnClickListener(){
    public void onClick(View arg0){
        Intent intent = new Intent(SocialShare.this, facebookUpload.class);
        intent.putExtra("bitmapPath", selectedImagePath);
        startActivity(intent);
    }
});

weiboButton.setOnClickListener(new OnClickListener(){
    public void onClick(View arg0){
        Intent intent = new Intent(SocialShare.this, weiboUpload.class);
        intent.putExtra("bitmapPath", selectedImagePath);
        startActivity(intent);
    }
});

The main UI:mainui

1.2 Dialog layout for Log-in

The Facebook Log-in button is default, and similar button for weibo log-in is drawn by myself. When the user logged in, the profile image is displayed for the confirmation of the user id.
dialog

2. Facebook Log-in

Here is a must-go-through tutorial for Facebook integration in Android app. The main points summarized below

2.1 Add dependency

If the Facebook lib conflict with the project, a error will be shown. Just delete the android-support-v4.jar file in libs folder.

dependency

2.2 Declare Activities in the Manifest

Delcare not only the self-defined activity from which the Facebook log-in is called, but also the default Facebook Log-in activity

<activity
    android:name="com.sample.socialshare.facebookUpload"
    android:label="@string/app_name"
    android:theme="@android:style/Theme.DeviceDefault.Dialog">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
    </intent-filter>
</activity>

<activity 
    android:name="com.facebook.LoginActivity"
    android:theme="@android:style/Theme.Translucent.NoTitleBar"
    android:label="@string/app_name"/>
<meta-data 
    android:name="com.facebook.sdk.ApplicationId" 
    android:value="@string/fb_app_id"/>

2.3 Generate Key Hash

The tutorial has talked about it carefully. It is an IMPORTANT step, I stuck in the development for a long time because I didn’t realize I should do this first! Use the keytool to generate the key hash and filled in at the development page app settings accordingly.

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

key_hash

2.4 Add the app_id to the project

Add the app_id provided by Facebook in the project /res/values/strings.xml

app_id_fb

If all the above have been carefully done, the Facebook Log-in should work and can share the photo within the app to Facebook now.

3. Weibo Log-in

3.1 Add the Weibo lib in the project

The weibo.sdk.android.sso.jar file should be included in the download zip file from the web. It should be put inside the libs folder. Also a class is copied from the sample code to manage the access token (AccessTokenKeeper.java).

weibo_lib

3.2 Fill the App Key

The same as the Facebook app, the app key is required in the res/values/strings.xml

Screenshot from 2013-04-03 11:31:543.3 Add the test user in the app

If the log-in user is not the developer of the sample app (app still under developing and testing, not approved yet), Weibo requires a declare of the test users in the app management page.

weibo_tester3.4 Get the Profile Image

Weibo SDK does not have default function to load the user profile image. We need to use the AccountAPI object and UsersAPI object, and listening for the query of an Json object.  The user profile image url is referred by the “avatar_large” parameter.

try {
	JSONObject ja = new JSONObject(result);

	userId = ja.getLong("uid");
	UsersAPI user = new UsersAPI(weiboUpload.accessToken);
	user.show(userId, new RequestListener(){

	@Override
	public void onComplete(String result) {
		// TODO Auto-generated method stub
		// CONVERT RESPONSE STRING TO JSON ARRAY
		try {
		   JSONObject ja = new JSONObject(result);
		   profileImageUrl = ja.getString("avatar_large");
		   userProfile = getBitmapFromURL(profileImageUrl);	
		   runOnUiThread(new Runnable() {
		    	public void run() {
		    	    if(profileImageUrl != null){		    					userDiaplay.setImageBitmap(userProfile);
                            }
                        }});							
                    } catch (JSONException e) {
			    // TODO Auto-generated catch block
			    e.printStackTrace();
		 }	 
         }
	 @Override
	 public void onError(WeiboException arg0) {
         }
         @Override
	 public void onIOException(IOException arg0) {
         }
	});
} catch (JSONException e) {
	// TODO Auto-generated catch block
	e.printStackTrace();
}

That’s it, the photo-sharing app. It has not been carefully tested and debugged, forgive me for all the bugs in the app, just for sharing.

One comment

  1. Hello Lu Yu,
    your app work fine with Facebook, and another APP Key for Weibo. But with my Weibo App Key I receive an error “redirect_uri_mismatch”. I think I have a problem with settings of the app, any idea ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: