Cara Membuat Social Sharing di Ionic Framework

Hai sobat, mungkin sobat sedang memperdalam Ionic Framework? nah, kebetulan saya ingin berbagi sedikit tentang bagaimana caranya membuat socialsharing di Ionic Framework mari disimak.

pastikan sobat telah memiliki template Ionic Framework yang ingin digunakan, disini saya menggunakan template side menu setelah itu agan harus menambah plugin cordova plugin add https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git

setelah menambah plugin tersebut saatnya menambahkan menu baru dalam templates/menu.html (jika menggunakan sidemenu)

<ion-item class="item-icon-right" nav-clear menu-close href="#/app/share">
Share<i class="icon icon-right ion-chevron-right ion-accessory"></i>
</ion-item>

setelah menambahkan menu saatnya menambahkan state dalam app.js

.state('app.share', {
url: "/share",
views: {
'menuContent': {
templateUrl: "templates/share.html",
controller: 'shareCtrl'}}})

setelah itu, langkah selanjutnya adalah sobat menambahkan beberapa baris kode pemograman dalam controllers.js

.controller('shareCtrl',['$scope',function($scope) {
$scope.whatsappShare=function(){
window.plugins.socialsharing.shareViaWhatsApp('computerscience', null /* img */, "http://computerscience.id/" /* url */, null, function(errormsg){alert("Error: Cannot Share")});
}
$scope.twitterShare=function(){
window.plugins.socialsharing.shareViaTwitter('computerscience', null /* img */, 'http://computerscience.id/', null, function(errormsg){alert("Error: Cannot Share")});
}
$scope.facebookShare=function(){
window.plugins.socialsharing.shareViaFacebook('computerscience', null /* img */, 'http://computerscience.id/' /* url */, function() {console.log('share ok')}, function(errormsg){alert(errormsg)});
}
$scope.OtherShare=function(){
window.plugins.socialsharing.share('computerscience', null, null, 'http://computerscience.id/');
}}])

nah langkah terakhirnya adalah menambahkan halaman baru dalam folder templates disini saya memberikan nama share.html dan langsung saja tambahkan :

<ion-view view-title="Share">
<ion-content>
<div class="card">
<div class="item item-divider">
<b> Share this app</b>
</div>
<ul class="list">
<li class="item" id="displayLabel">
<div class="item item-text-wrap">
<button class="button button-block button-positive item-icon-left" ng-click="whatsappShare()">
<i class="icon ion-social-whatsapp"></i>
WhatsApp
</button>
</li><ul class="list">
<li class="item" id="displayLabel">
<div class="item item-text-wrap">
<button class="button button-block button-positive item-icon-left" ng-click="twitterShare()">
<i class="icon ion-social-twitter"></i>
twitter
</button>
</li><ul class="list">
<li class="item" id="displayLabel">
<div class="item item-text-wrap">
<button class="button button-block button-positive item-icon-left" ng-click="facebookShare()">
<i class="icon ion-social-facebook"></i>
facebook
</button>
</li><li class="item" id="displayLabel">
<div class="item item-text-wrap">
<button class="button button-block button-positive item-icon-left" ng-click="OtherShare()">
<i class="icon ion-android-share-alt"></i>
Other
</button>
</li>
</ul></div>
</div>
</ion-content>
</ion-view>

setelah itu adalah langkah pengujian silahkan dicoba dalam emulator yang sobat gunakan ataupun di handphone android/ios yang agan gunakan, jangan lupa tambahkan platform android di project agan masing – masing 🙂