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

plugin

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
plugin

.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.jsplugin

.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>

plugin
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 🙂plugin

plugin

jika tidak ingin repot mengikuti langkah – langkah di atas silahkan agan download project tersebut di :

https://drive.google.com/file/d/0B85eCUh75h73SnpBWEFSd0Faa3c/view?usp=sharing

refrensi

https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin

http://pointdeveloper.com

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.