After successfully establishing Pinterest authentication in Phimpme our next goal was to share the image on the Pinterest website directly from Phimpme, without using any native Android application.
Adding Pinterest Sharing option in Sharing Activity in Phimpme
To add various sharing options in Sharing Activity in the Phimpme project, I have applied a ScrollView for the list of the different sharing options which include: Facebook, Twitter, Pinterest, Imgur, Flickr and Instagram. All the App icons with the name are arranged in a TableLayout in the activity_share.xml file. Table rows consist of two columns. In this way, it is easier to add more app icons for future development.
<ScrollView android:layout_width="wrap_content" android:layout_height="@dimen/scroll_view_height" android:layout_above="@+id/share_done" android:id="@+id/bottom_view"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <TableLayout |
Adding Pinterest app icon on the icons_drawable array. This array is then used to inflate the icon on the list view.
private int[] icons_drawables = {R.drawable.ic_facebook_black, R.drawable.ic_twitter_black,R.drawable.ic_instagram_black, R.drawable.ic_wordpress_black, R.drawable.ic_pinterest_black);
|
Adding Pinterest text on the titles_text array. This array is then used to inflate the names of the various sharing activity.
private int[] titles_text = {R.string.facebook, R.string.twitter, R.string.instagram, R.string.wordpress, R.string.pinterest); |
Prerequisites to share Image on Pinterest
To share an Image on Pinterest a user has to add a caption and Board ID. Our first milestone was to get the input of the Board ID by the user. I have achieved this by taking the input in a Dialog Box. When the user clicks on the Pinterest option, a dialog box pops and then the user can add their Board ID.
private void openPinterestDialogBox() { AlertDialog.Builder captionDialogBuilder = new AlertDialog.Builder(SharingActivity.this, getDialogStyle()); final EditText captionEditText = getCaptionDialog(this, captionDialogBuilder); captionEditText.setHint(R.string.hint_boardID); captionDialogBuilder.setNegativeButton(getString(R.string.cancel).toUpperCase(), null); captionDialogBuilder.setPositiveButton(getString(R.string.post_action).toUpperCase(), new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { //This should be empty it will be overwrite later //to avoid dismiss of the dialog on the wrong password } }); final AlertDialog passwordDialog = captionDialogBuilder.create(); passwordDialog.show(); passwordDialog.getButton(AlertDialog.BUTTON_POSITIVE).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { String captionText = captionEditText.getText().toString(); boardID =captionText; shareToPinterest(boardID); passwordDialog.dismiss(); } }); } |
A user can fetch the Board ID by following the steps:
- Copy the Board URL from the Pinterest main page.
- Paste the URL in the dialog box of the website: https://www.nutt.net/how-do-i-get-pinterest-board-id/
- Copy the Board ID from the website and then past it in the AlertDialog Box.
Board ID is necessary because it specifies where the image needs to be posted.
Creating custom post function for Phimpme
The image is posted using a function in PDKClient class. PDKClient is found in the PDK module which we get after importing Pinterest SDK. Every image is posted on Pinterest is called a Pin. So we will call createPin function. I have made my custom createPin function so that it also accepts Bitmaps as a parameter. In the Pinterest SDK it only accepts image URL to share, The image should already be on the internet to be shared. For this reason, we to add a custom create Pin function to accept Bitmaps as an option.
public void createPin(String note, String boardId, Bitmap image, String link, PDKCallback callback) { if (Utils.isEmpty(note) || Utils.isEmpty(boardId) || image == null) { if (callback != null) callback.onFailure(new PDKException("Board Id, note, Image cannot be empty")); return; } HashMap<String, String> params = new HashMap<String, String>(); params.put("board", boardId); params.put("note", note); params.put("image_base64", Utils.base64String(image)); if (!Utils.isEmpty(link)) params.put("link", link); postPath(PINS, params, callback); } |
Compressing Bitmaps
Since Pinterest SDK cannot accept Bitmap I have added a function to compress the Bitmap and encode it to strings.
public static String base64String(Bitmap bitmap) { ByteArrayOutputStream baos = new ByteArrayOutputStream(); bitmap.compress(Bitmap.CompressFormat.JPEG, 100, baos); String b64Str = Base64.encodeToString(baos.toByteArray(), Base64.NO_WRAP); return b64Str; } |
Calling createPin function from the sharingActivity
From the sharingActivity we will call createPin activity. We will pass caption of the image, Board ID, Image bitmap and link(which is optional) as parameters.
PDKClient .getInstance().createPin(caption, boardID, image, null, new PDKCallback() { |
If the image is posted successfully then onSuccess function is called which pops a snackbar and shows the success message. Otherwise, onFailure function is called which displays failure message on a snackbar.
@Override public void onSuccess(PDKResponse response) { Log.d(getClass().getName(), response.getData().toString()); Snackbar.make(parent, R.string.pinterest_post, Snackbar.LENGTH_LONG).show(); //Toast.makeText(SharingActivity.this,message,Toast.LENGTH_SHORT).show(); } @Override public void onFailure(PDKException exception) { Log.e(getClass().getName(), exception.getDetailMessage()); Snackbar.make(parent, R.string.Pinterest_fail, Snackbar.LENGTH_LONG).show(); //Toast.makeText(SharingActivity.this, boardID + caption, Toast.LENGTH_SHORT).show(); } |
Conclusion
In Phimpme user can now send Image on Pinterest directly from the application. This is done without the use of the native Pinterest application.
Github
Resources
- To download the Pinterest SDK: http://assets.pinterest.com/sdk/android-pdk.tar
- Pinterest SDK implementation: https://developers.pinterest.com/docs/sdks/android/?
- How to create Pins: https://developers.pinterest.com/docs/rich-pins/overview/