Hybrid-08 : Social Sharing

This tutorial is about social sharing. In this tutorial I will show you how to share any photos, links, media file or shareable document to the social media such as Facebook, Twitter, Instagram, WhatsApp etc.

Plugins id- “cordova-plugin-x-socialsharing”

Plugins Version- “5.1.3”

Click Here For Plugins Doc.

To see the demo Click Here.

#index.html

<div class="pages navbar-fixed"> <div data-page="index" class="page"> <!-- Top Navbar--> <div class="navbar theme-teal"> <div class="navbar-inner"> <div class="left"> <a href="#" class="back link"><i class="icon icon-back"></i></a> </div> <div class="center"> <i class="fa fa-book" aria-hidden="true" style="font-size:18px;color:black;">  <span style="font-weight:bold;color:white">Social Sharing</span></i></div> <div class="right"> <a href="#" class="link" style="margin-right:5px"><i class="fa fa-share" aria-hidden="true"></i></a> </div> </div> </div> <div class="speed-dial"> <!-- FAB inside will open Speed Dial actions --> <a href="#" class="floating-button color-teal"> <!-- First icon is visible when Speed Dial actions are closed --> <i class="fa fa-share-alt" aria-hidden="true"></i> <!-- Second icon is visible when Speed Dial actions are opened --> <i class="icon icon-close"></i> </a> <!-- Speed Dial Actions --> <div class="speed-dial-buttons color-teal"> <a href="#"> <i class="fa fa-facebook" aria-hidden="true"></i> </a> <a href="#"> <i class="fa fa-google-plus" aria-hidden="true"></i> </a> <a href="#"> <i class="fa fa-twitter" aria-hidden="true"></i> </a> <a href="#"> <i class="fa fa-instagram" aria-hidden="true"></i> </a> <a href="#"> <i class="fa fa-whatsapp" aria-hidden="true"></i> </a> <a href="#"> <i class="fa fa-envelope-o" aria-hidden="true"></i> </a> <a href="#"> <i class="fa fa-reply" aria-hidden="true"></i> </a> </div> </div> <!-- /End of Top Navbar--> <div class="page-content" style="margin-top:-50px"> <div class="content-block"> </div> </div> <!-- Bottom Toolbar--> <!-- /End of Bottom Toolbar--> </div> </div>

#my-app.js

function onDeviceReady() { } document.addEventListener("deviceready", onDeviceReady, true); function shareToFacebook(){ window.plugins.socialsharing.shareViaFacebook( 'Message via Facebook', null /* img */, null /* url */, function() {console.log('share ok')}, function(errormsg){alert(errormsg)} ); } function shareToTwitter(){ window.plugins.socialsharing.shareViaTwitter( 'Message via Twitter', null /* img */, null /* url */, function() {console.log('share ok')}, function(errormsg){alert(errormsg)} ); } function shareToSMS(){ window.plugins.socialsharing.shareViaSMS( 'Message via SMS', '1234567890' /* phone numbers comma seperated */, function() {console.log('share ok')}, function(errormsg){alert(errormsg)} ); } function shareToWhatsapp(){ window.plugins.socialsharing.shareViaWhatsApp( 'Message via WhatsApp', 'https://www.google.nl/images/srpr/logo11w.png' /* img */, null /* url */, function() {console.log('share ok')}, function(errormsg){alert(errormsg)} ); } function shareToInstagram(){ window.plugins.socialsharing.shareViaInstagram( 'Message via Instagram', 'https://www.google.nl/images/srpr/logo11w.png', /*img*/ function() {console.log('share ok')}, function(errormsg){alert(errormsg)} ); } function shareToOptions(){ window.plugins.socialsharing.share( 'Message via Share' ); }