As you normally do when you acquire a new mobile device,
you configure your social media accounts immediately on the device.
Now, if we have a Nativescript application,
can we leverage the social media accounts that are
already configured on your device in order to
share information to your social media accounts from within our Nativescript application?
This is where the Nativescript Social Share plugin comes to our aid.
Using this plugin, we can configure
our application to be able to share information through
the already configured social media accounts on
the mobile device from within our NativeScript Application.
So let's see how we can make use of the social share plugin.
As always, to get started,
let's first configure the social share plugin.
So add the prompt type DNS plugin and nativescript-social-share,
and let the plugin get installed.
And once the plugin is installed,
let's update our application.
Going to our application,
we're going to configure our 'dishdetail' component in order for us to enable
that user to share the details of
a specific dish that they like to their social media sites.
So going into the dishdetail component.ts file,
let me import *
as SocialShare from nativescript-social-share,
which we have already installed.
Now in addition, in order to get access to images,
I need to import the ImageSource function and
fromURL function from 'image-source'.
This is part of the core modules.
Now that we have configured this,
let's go in and implement a new function in our code called as SocialShare.
So this function will be used for enabling social sharing.
We will share the image of the dish to our social media accounts.
So let me say, let image: ImageSource.
As we realize,
the image is being obtained from the URL from the server side.
So, this is what we will configure using the fromURL meta that we
have just imported and we'll say (this.BaseURL + this.dish.image).
So that's how we are able to acquire the image from our servers.
And this then will return a promise.
So inside the promise,
I'm going to get
the ImageSource as the parameter for the resolve of my promise.
And in there, we'll say image = img,
and then will simply say SocialShare share image.
As you can see, you have two options;
you can share an image or you can share some text.
Now in this case I'm going to share an image.
You can also configure the SocialShare Plugin to share
a text message to your social media accounts.
So I'm going to share the image and we'll say,
'How would you like to share this image?'
This message will be shown when your device gives you the option of
selecting the appropriate social media account to which you want to share the image.
Also, they will do a "catch"
in case there is an error with the resolution.
And then in this case,
I'll just say console.log('Error loading image').
So here, my fromURL is unable to obtain the image.
So that's why we want to inform the user that this could not be done.
So this function now will enable us to share the image to our social media accounts.
So, how do we invoke this function?
Fortunately, we already have the action dialog that we have
configured as part of your second assignment.
So going into the action dialog,
now in the actions,
I'm going to also include along with the Add-to-favorites and add comments,
I will say "Social Sharing" as the third option there.
And then, going into the action options,
we will add an else if (result === Social Sharing).
Then we will invoke 'SocialShare' function on the spot.
That's it. Lets save the changes and then go and take a look at our application.
Going to our application on the device,
where the application starts.
Let's go to the Menu and to a specific dish here.
And in that dish,
now we can invoke the action dialog,
and you'll see that the social sharing option is available there.
Let's click on that.
And that should bring up
the various social sharing options that are available on my device.
So let me select tweet.
And this should bring up a pre-configured message with the image included in there,
and I can type in my own comment,
and then tweet this information to my Twitter account.
Similarly, let me discard this.
I can also invoke social sharing again and then select Facebook and this will
come up with a preconfigured Facebook post where I can
type in the information and then share it in my Facebook account.
With this, we complete this exercise.
In this exercise, we have seen how we can use the Nativescript Social Share to
share information from within our application using
the social media accounts configured on the device.
This is a good time for you to do it and get covered with the message social share.
Jogesh K. MuppalaAssociate Professor
