A Developers Blog: Android - Adding A Facebook Share Button That Shares A Screen Shot

This blog has moved to GitHub, and you should be redirected shortly...

Tuesday, July 14, 2015

Android - Adding A Facebook Share Button That Shares A Screen Shot

The purpose of this tutorial is to show you how to add a Facebook Share button to your Android Application that will share a screen shot.

I have added a new tutorial that shows just how to add a basic share button to your android application. You can read the tutorial here: Android - Add A Facebook Share Button

For this tutorial I was using: Android Studio 1.1.0, and Facebook SDK v4.0.0. You should be able to follow along with other versions of this software.

In order to follow along you will need the following:
  • Android Studio. If you do not already have this installed, you can get a copy from here: Android Studio. Just follow the download and install instructions from the website to get started.
  • You will need to have an existing project already created in Android Studio that is integrated with the Facebook SDK. If you do not have one, you can follow this tutorial: Android Facebook Integration Tutorial
If you have completed the following steps, we can get started.

1. Open up your Android Studio project, and navigate to your Android Manifest file. Once this is open, you will want to add the following activity:

2. Now, you will have to set up a content provider in your Android Manifest file. You will want to add the following code and replace "{APP_ID}" with your App Id:

3. To actually share your content, we will have to set up a Share Button for your application. To start with, open your "strings.xml" file located here:


4. In this file, add the following: <string name="share">Share</string>

5. Next, we will add the Share button to our "activity_main.xml" file. Open this file and add the following code:

You will want to update the "layout_width" and the "layout_height" with appropriate values for your application.

6. Now that we have the button setup, we will want to update our "MainActivity.java" file to add functionality to this button. We are going to setup the button so that when it is clicked, it is going to call a function that will take a screen shot of our activity, and then share this image to Facebook. As we are adding code, Android Studio should update the imports that are needed. First we are going to declare some variables for our share button, the image we will upload, and a counter:

7. Next, we will want to add a OnClickListener to our button, so we can call our function when it is clicked. In the onCreate() function, add the following code:

8. Lastly, you will then need to create the postPicture() function that is called when the Share button is clicked. Inside this function we will want to do the following things:
  • Take a screenshot of our current screen
  • Create am image from this screenshot
  • Have the sharing dialog pop up
  • If the user click yes, have the user login to their Facebook account, and then post the image to their wall
  • If the user clicks no, cancel the dialog
Here is the code for the function:


Here is an example of what your "MainActivity.java" file will look like if all you have is the share button: 

Now, when you test out your application, you should be able to click the Share Button, login to your Facebook account, and then share the image to your wall.

Summary: This tutorial showed you how to add a Facebook Share Button to your application, and how to take a screen shot of your main view, and from there use the Share Button to share this image on Facebook.

I hope you enjoyed this tutorial. If you have any questions or comments, please feel free to post them below.

Update 10/08/2015:

Here is an example of what your "AndroidManifest.xml" file will look like if all you have is the share button:

Update 10/18/2015:

Here is a link to a gist that I created that contains all of the files that I modified during this tutorial: Gist

The only things that should be different is the package name, and the your app id for Facebook.


Update 12/10/2015:

Here is a link to a new tutorial that shows how to add a basic share button: Android - Add Facebook Share Button

Labels: , ,

34 Comments:

At October 3, 2015 at 10:21 PM , Anonymous Garudiaro said...

Can you also post the full AndroidManifest.xml? I'm having an error on the performClick() and have no clue why. Here's the error:

java.lang.NullPointerException: Attempt to invoke virtual method 'int java.lang.Object.hashCode()' on a null object reference
at java.util.concurrent.ConcurrentHashMap.get(ConcurrentHashMap.java:746)
at com.facebook.internal.Utility.getDialogFeatureConfig(Utility.java:879)
at com.facebook.internal.DialogPresenter.getVersionSpecForFeature(DialogPresenter.java:253)
at com.facebook.internal.DialogPresenter.getProtocolVersionForNativeDialog(DialogPresenter.java:239)
at com.facebook.internal.DialogPresenter.canPresentNativeDialogWithFeature(DialogPresenter.java:73)
at com.facebook.share.widget.ShareDialog.canShowNative(ShareDialog.java:131)
at com.facebook.share.widget.ShareDialog.access$300(ShareDialog.java:53)
at com.facebook.share.widget.ShareDialog$NativeHandler.canShow(ShareDialog.java:239)
at com.facebook.share.widget.ShareDialog$NativeHandler.canShow(ShareDialog.java:231)
at com.facebook.internal.FacebookDialogBase.createAppCallForMode(FacebookDialogBase.java:184)
at com.facebook.internal.FacebookDialogBase.showImpl(FacebookDialogBase.java:147)
at com.facebook.internal.FacebookDialogBase.show(FacebookDialogBase.java:142)
at com.facebook.share.widget.ShareButtonBase$1.onClick(ShareButtonBase.java:168)
at com.facebook.FacebookButtonBase$1.onClick(FacebookButtonBase.java:359)
at android.view.View.performClick(View.java:4780)
at com.android.test.StudentMessageDoneActivity$1$1.onClick(StudentMessageDoneActivity.java:83)

 
At October 8, 2015 at 8:48 AM , Blogger Scott Westover said...

Hi Garudiaro,

I have updated this post, and at the very bottom you will see the complete AndroidManifest.xml that was used for this tutorial. The only thing you will need to do is update line 28 with your app id. For example, replace this:

FacebookContentProvider{YOUR APP ID HERE}

with

FacebookContentProvider566653655

 
At October 15, 2015 at 1:51 AM , Blogger geoorgiu said...

Hi! Great job with this tutorial!

But why my sharebutton looks like it is disabled. It is grey color and doesn't accept any click on it !!
I notice that in my xml of the activity, the xmlns:facebook.\....\res-auto is not used.
What i am doing wrong in code or i have to add something?
Tks in advance.

 
At October 18, 2015 at 8:51 AM , Blogger Scott Westover said...

Hi Geoorgiu,

Thanks for the comment. For your share button, are you adding it to an existing project, or did you just follow along with the two tutorials? If you are just doing the share button, it should work.

As for why the button is grayed out, there could be a number of reasons, and it is hard to say what it could be without seeing your code. I would double check the manifest and make sure that your app id matches your Facebook app id.

Would you be able to share your code?

Thanks!

 
At October 18, 2015 at 10:16 AM , Anonymous André Peixoto said...

Hello Scott,

I have the exact same issue that Geoorgiu mentioned previously, about the share button being like it was disable. I already checked the manifest and all seems to be correct.

Could you try to help me? Which part of my code would you want me to check?

BTW, great tutorial!

 
At October 18, 2015 at 12:37 PM , Blogger Scott Westover said...

Hi André,

Thanks for the comment. I would double check your setting for your Facebook App. When you generated your key hash, did you add it to the development key hash section?

Here is a link to a gist that I created that contains all of the files from the tutorials: https://gist.github.com/scottwestover/1514ea0404c14da5ff06

If you want to double check your code with these you can. The only thing you would need to update is your package information and your app id for Facebook.

Would you be able to share your code with me so I can take a look at it?

Thanks!

 
At October 18, 2015 at 12:46 PM , Anonymous André Peixoto said...

Hi Scott,

I just find out where was the problem. The button is only enabled after calling `shareButton.setShareContent(content);`. You can find more info about this here: http://stackoverflow.com/a/33199836/1204249

Thank you anyway!

 
At October 18, 2015 at 1:05 PM , Blogger Scott Westover said...

Hi André,

Your welcome. I am glad you were able to resolve your issue, and thanks for sharing your answer here.

 
At October 30, 2015 at 3:00 AM , Blogger Unknown said...

Hi scott,

why if I put the button (com.facebook.share.widget.ShareButton) in my xml file, my app will stop?

 
At November 4, 2015 at 1:23 PM , Blogger Scott Westover said...

Hi Arum,

Is the console throwing any errors? Without seeing the code or the error, it is hard to judge what could be causing the issue.

 
At November 18, 2015 at 1:59 AM , Blogger Unknown said...

After Pressing the Button just toast a message "share image to Facebook" i pressed yes but nothing happens.

 
At November 18, 2015 at 11:22 PM , Blogger Unknown said...

I saw the the method that is needed from the stack over flow that you share from the below comment. but it show error in canShare(), it asks create canShare method in the MainActivity.
Please share your code.

 
At November 24, 2015 at 9:44 AM , Blogger Scott Westover said...

Hi Vamsi,

Are you adding the share button to an existing project, or did you use an empty project like in the tutorial?

Are you seeing any errors in the console? Without seeing the code or the error, it is hard to judge what could be causing the issue.

Would you be able to share your code?

 
At December 9, 2015 at 2:19 AM , Blogger Parth Vora said...

Hi there this code is not working for me. Well i am doing it in a different way though. Here's my code:

ShareLinkContent content = new ShareLinkContent.Builder()
.setContentTitle("Social Media Integration")
.setContentDescription("The 'Social Media Integration' sample showcases simple Facebook integration in Android Application")
.setContentUrl(Uri.parse("http://developers.facebook.com/android"))
.build();

ShareButton shbtn = (ShareButton) view.findViewById(R.id.share_button);

shbtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
shbtn.setShareContent(content);
shbtn.performClick();
}
});

Thanking you to solve this issue ASAP.

 
At December 10, 2015 at 9:17 AM , Blogger Scott Westover said...

Hi Parth,

For your code, is it inside your onCreate() function? After you define your content, you should be able to call the setShareContent on your button without using an event listener.

Try using the following:

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//initialize facebook sdk
FacebookSdk.sdkInitialize(getApplicationContext());
setContentView(R.layout.activity_main);

ShareLinkContent content = new ShareLinkContent.Builder()
.setContentTitle("Social Media Integration")
.setContentDescription("The 'Social Media Integration' sample showcases simple Facebook integration in Android Application")
.setContentUrl(Uri.parse("http://developers.facebook.com/android"))
.build();

ShareButton shbtn = (ShareButton) findViewById(R.id.share_btn);
shbtn.setShareContent(content);
}

 
At January 29, 2016 at 4:17 AM , Anonymous Akanksha Gupta said...

Hi Vamsi,
I am facing the same problem.
Were you able to solve?

 
At January 29, 2016 at 4:20 AM , Blogger Unknown said...

Hi scott,

Do we need to have facebook messenger app in our mobile for this?

 
At February 12, 2016 at 12:50 PM , Blogger Unknown said...

For some reason, i get "An error occured. Please try again later." Any help?

 
At February 15, 2016 at 10:05 AM , Blogger Scott Westover said...

Hi Akanksha,

No, you shouldn't need the Facebook messenger app. If it is not installed on the phone, then the app should open the Facebook website in the default browser.

 
At April 27, 2016 at 5:43 PM , Blogger Unknown said...

hey how can I do automatically upload via android app not in web?

 
At May 13, 2016 at 1:19 AM , Blogger Gopi said...

Hi Scott,

when i click on yes on alert share dialog control is returning to facebook share dialog.could you please help in posting the saved screenshot to facebook wall.

 
At May 14, 2016 at 10:01 PM , Blogger Scott Westover said...

Hi Gopi,

I would double check your android manifest to make sure that is correct. Without seeing your code it is hard to say what the issue is. Can you share it?

 
At May 14, 2016 at 10:02 PM , Blogger Scott Westover said...

Are you getting this error when you are trying to share content?

 
At May 14, 2016 at 10:17 PM , Blogger Scott Westover said...

Hi Mark,

According to the documentation, it should default to the android app if it is installed. You can read more about it here: https://developers.facebook.com/docs/sharing/android.

 
At May 17, 2016 at 3:18 AM , Blogger Gopi said...

Sure!!

Here is a sample of my manifest,Samplefacebook is a class where i implemented the share dialog,

android:name="com.sample.rummyking.Samplefacebook"
android:keepScreenOn="true"
android:screenOrientation="sensorLandscape"
android:splitMotionEvents="false"
android:configChanges="keyboardHidden|orientation|screenLayout|screenSize"
android:theme="@android:style/Theme.NoTitleBar.Fullscreen" >


 
At May 19, 2016 at 10:25 PM , Blogger Scott Westover said...

Hi Gopi,

Without seeing the whole manifest it is hard to tell if that is where the problem lies. Do you have the following lines of code in your manifest:

'activity android:name="com.facebook.FacebookActivity"
android:configChanges=
"keyboard|keyboardHidden|screenLayout|screenSize|orientation"
android:theme="@android:style/Theme.Translucent.NoTitleBar"
android:label="@string/app_name"
provider android:authorities="com.facebook.app.FacebookContentProvider{YOUR APP ID HERE}"
android:name="com.facebook.FacebookContentProvider"
android:exported="true"'

For the Share dialog to work, these need to be included. You can find a full list of what needs to be included here: https://developers.facebook.com/docs/android/getting-started#app_id

 
At May 23, 2016 at 12:51 AM , Blogger Gopi said...

yes i did

 
At May 24, 2016 at 8:48 AM , Blogger Unknown said...

Hi , Thank you for posting. İt is great. If I use Facebook SDK 4.0.0 after, Facebook Share Button'color returns grey. It does not allow click. And FB SDK 4.0.0 is not working for me. It works only if I use ShareLinkContent instead of SharePhotoContent. I m working on it. Thank you again.

 
At June 9, 2016 at 1:24 AM , Blogger Riya said...

hiii scott

 
At June 9, 2016 at 1:27 AM , Anonymous Anonymous said...

Hiii scott
The App crashesh on findviewbyid for rrotview.it doesnt getting rootview.
her is code==
View rootView = view.findViewById(android.R.id.content).getRootView();

rootView.setDrawingCacheEnabled(true);

// creates immutable clone of image
image = Bitmap.createBitmap(rootView.getDrawingCache());
// destroy
rootView.destroyDrawingCache();
Plz help why this is happening.

 
At June 10, 2016 at 10:40 AM , Blogger Scott Westover said...

Hi Anonymous,

Did you any errors show when you compiled the app, or are you able to share your logs to see what the issue might be?

Usually an app will crash if you try to find your view before setting the content view in the onCreate function. I would double check your code, and make sure that this is set before you try to get the root view.

 
At June 10, 2016 at 10:40 AM , Blogger Scott Westover said...

Hi Photon,

Where you able to resolve your issue?

 
At September 10, 2016 at 11:33 AM , Anonymous Asma said...

Hi Scott , Thanks a lot for this tutorial ,
but i want to share text not image , what should i do ??

 
At December 15, 2016 at 7:29 PM , Blogger Scott Westover said...

Hi Asma,

I would take a look at this tutorial here: http://scottwestover.blogspot.com/2015/12/android-adding-facebook-share-button.html

This instead shows you can do a basic share button, which will allow you to share a link.

 

Post a Comment

Subscribe to Post Comments [Atom]

<< Home