I am make an Android (Native app) with help of(JQuery Mobile and Phonegap) in which i want to share the data on facebook please help me out how i will do these
IN HTML5:-
<div data-role="content">
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
Share
</div>
in this app i want to share the data which is there in textarea should display on facebook when i click button
without using any plugin if we can do please help me out or with plugin we have to do then tell me how i can do step by step process
Share data on Facebook through PhoneGap
Use Child browser OR InAppbrowser plugin then add follwing code
function FBConnect()
{
if(window.plugins.childBrowser == null)
{
ChildBrowser.install();
}
}
$("#share_on_wall").live("click", function(event){
if(event.handled !== true){
var fb = FBConnect.install();
fb.postFBWall(desc, post_url, vPromotionPicture_url, vTitle);
event.handled = true;
}
return false;
});
FBConnect.prototype.postFBWall = function(message, urlPost, urlPicture, vTitle)
{
if(urlPicture == undefined)
urlPicture = "";
urlPost ="";
var url = "https://www.facebook.com/dialog/feed?app_id=your_app_id&link="+encodeURIComponent(urlPost)+"&picture="+encodeURIComponent(urlPicture)+"&name="+encodeURIComponent(vTitle)+"&caption=&description="+encodeURIComponent(message)+"&redirect_uri=your_redirect_uri";
var ref = window.open(url, 'random_string', 'location=no');
ref.addEventListener('loadstart', function(event) {
});
ref.addEventListener('loadstop', function(event) {
console.log(event.type + ' - ' + event.url);
var post_id = event.url.split("post_id=")[1];
var cancel_url = event.url.split("#")[0];
if(post_id != undefined){
setTimeout(function() {
ref.close();
}, 5000);
}
if(cancel_url != undefined && cancel_url == your_redirect_uri){
setTimeout(function() {
ref.close();
}, 1000);
}
});
ref.addEventListener('exit', function(event) {
});
}
Related
I have developed app via HTML5, JS, CSS, PHP and MySQL by help of phonegap builder. I have used admob plugin successfully in my app, but when I add keystore to my app on phonegap builder, there were no ads in my certificated app. Below is my config.xml plugin code
<plugin name="cordova-plugin-admobpro" spec ="~2.35.3" source="npm" >
<variable name="PLAY_SERVICES_VERSION" value="16.0.0" />
</plugin>
Below is JS codes. Everything is ok when I open apk without keystore.
var admobid = {};
if( /(android)/i.test(navigator.userAgent) ) {
admobid = { // for Android
banner: 'ca-app-pub-3620418953743637/6097985822',
interstitial: 'ca-app-pub-3620418953743637/2453242527',
rewardvideo: 'ca-app-pub-3620418953743637/6437036798'
};
}
function initApp() {
var oyunSonu = localStorage.getItem("oyunSonu");
$('#reklamKont').fadeIn();
if(oyunSonu != "1"){
$('#reklamKont').fadeOut();
}
AdMob.prepareInterstitial({
adId: admobid.interstitial,
autoShow: false
});
AdMob.prepareRewardVideoAd({
adId:admobid.rewardvideo,
autoShow: false,
});
}
document.addEventListener('deviceready', initApp, false);
//////////////////////////////////////////////////////////////////
function odulReklamFNC(){
if(odulTusAktif == 1)
{
AdMob.showRewardVideoAd();
odulTusAktif = 0;
}
}
var odulTusAktif;
document.addEventListener('onAdLoaded',function(data){
if(data.adType == 'interstitial'){
var oyunSonu = localStorage.getItem("oyunSonu");
if(oyunSonu == "1"){
localStorage.setItem('oyunSonu', '0');
$('#reklamKont').fadeOut();
AdMob.showInterstitial();
}
}
if(data.adType == 'rewardvideo'){
odulTusAktif = 1;
if(odulBTNGoster == 1){
$('#odulBTN').fadeIn();
}
}
//
});
document.addEventListener('onAdPresent', function(data){
if(data.adType == 'rewardvideo'){
var uyeCookie = localStorage.getItem("uyeID");
$.ajax({
type: "GET",
url: websitePHP + "odulVer.php",
data: {
id : uyeCookie
},
beforeSend: function(){
$("#phpKont").fadeIn();
},
success: function(gelenVeri){
$("#phpKont").fadeOut();
$('#odulBilgi').html(gelenVeri);
$("#gunlukPrim").fadeOut();
$("#odulBildiri").fadeIn();
document.getElementById('satinAlSES').currentTime = 0;
document.getElementById('satinAlSES').play();
odulBTNGoster = 0;
girisAnaFNC();
top10FNC();
}
})
//$('#rumuz').html(data.rewardType);
//$('#elmas').html(data.rewardAmount);
}
});
document.addEventListener('onAdFailLoaded',function(data){
if(data.adType == 'interstitial'){
localStorage.setItem('oyunSonu', '0');
$('#reklamKont').fadeOut();
}
if(data.adType == 'rewardvideo'){
}
});
document.addEventListener('onAdDismiss',function(data){
if(data.adType == 'rewardvideo'){
if(odulBTNGoster != 0){
window.open('baslangic.html','_self');
}
}
});
How can I fixed this problem. I have also worried about that it will happen when I upload my app to google play services.
Thanks.
I want to upload file from my ionic application to server. I am using cordovafiletransfer plugin. Using that I am able to upload file by providing static path in controller code. My question is how to get selected file path by user? I only get filename from input tag on the relative path of selected file. How to get that?
View Page Code:
<label class="item item-input">
<div class="input-label">Upload Photo</div>
<input type="file" onchange="angular.element(this).scope().setFile(this)" accept="image/*"/>
</label>
<div class="padding">
<button ng-click="upload()" class="button button-block button-assertive">Upload</button>
</div>
Controller Code:
$scope.upload = function() {
var filename, options, targetPath;
console.log($scope.theFile);
targetPath = cordova.file.externalRootDirectory + '/Download/androidify.png';
filename = targetPath.split('/').pop();
options = {};
options.fileKey = 'image_file';
options.fileName = $scope.theFile.name;
options.chunkedMode = false;
options.mimeType = $scope.theFile.type;
options.headers = {
'Authorization': getDeviceToken()
};
console.log(options);
return $cordovaFileTransfer.upload(domain.uploadphoto(), targetPath, options).then(
(function(result) {
console.log('SUCCESS: ' + JSON.stringify(result.response));
}),
(function(err) {
console.log('ERROR: ' + JSON.stringify(err));
}),
function(progress) {}
);
};
$scope.setFile = function(element) {
return $scope.$apply(function($scope) {
console.log(element);
return $scope.theFile = element.files[0];
});
};
How to get proper target path of selected file?
I came across this post which should solve the problem, (it works for me, with some modification):
In my template:
<input type="file" fileread="file.path" />
<button type="button" class="button button-small button-assertive" ng-click="vm.upload(file)">Upload PDF</button>
and my modified Directive:
.directive("fileread", ['$cordovaFile', function ($cordovaFile) {
return {
scope: {
fileread: "="
},
link: function (scope, element, attributes) {
element.bind("change", function (changeEvent) {
var reader = new FileReader();
reader.onload = function (loadEvent) {
var fileName = changeEvent.target.files[0].name;
$cordovaFile.writeFile(cordova.file.dataDirectory, fileName, loadEvent.target.result, true)
.then(function (result) {
console.log(result)
}, function (err) {
console.warn(err)
});
scope.$apply(function () {
scope.fileread = cordova.file.dataDirectory + fileName;
});
}
reader.readAsArrayBuffer(changeEvent.target.files[0]);
});
}
}
}]);
Remember to clean up after you uploaded the document
use:
$cordovaFile.removeFile(cordova.file.dataDirectory, fileName)
.then(function (success) {
// success
}, function (error) {
// error
});
Also see http://www.javascripture.com/FileReader for more info regarding FileReader
I am trying to implement the feature that allows to switch between screen sharing capture and camera in the middle of the video session in an Android app. I use OpenTok SDK 2.5 for Android.
I have researched OpenTok examples (OpenTok samples) and figured they show only one feature per program sample.
Question: Should code supply two Publishers (one equipped with Camera and one with Screensharing capturer) and switch them, for example
session.unpublish();
if (currentIsCamera) {
session.publish(screenSharingPublisher);
}
else {
session.publish(cameraPublisher);
}
or better stick with single Publisher and flip between the BaseVideoCapturer and ScreensharingCapturer as I need?
mPublisher.setPublishVideo(false);
BaseVideoCapturer bvc = mPublisher.getCapturer();
if(bvc != null){
bvc.destroy();
}
//intent to start picture capture (Ex. ACTION_IMAGE_CAPTURE)
When you resume after taking the picture, you will need to initialize again
BaseVideoCapturer bvc = mPublisher.getCapturer();
if(bvc != null){
if(bvc.isCaptureStarted() == false){
bvc.init();
bvc.startCapture();
mPublisher.setPublishVideo(true);
}
}
This sample I took from the solution setPublishVideo(false) does not free the Camera
I suspect that unpublish/publish would break the session and that is not what I want.
P.S.Sorry for my English it is not my mother language.
On document Ready call the video publish method
var apiKey = '<APP_KEY>';
var sessionId = '<Session ID >';//Server Side Values
var token = '<Token >';//Server Side Values
var isModerator = <Yes/No>;//Handle it on server Side
var publisher;
var screenPublisher;
var streamMode = "camera";
session = OT.initSession(apiKey, sessionId);
publishVideo();
sessionEvents(publisher);
connectSession();
Html Code
<div id="subscribers" class="container-fluid show-controls">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div classs="live-stream">
<div class="caller-list">
<ul>
<li class="">
<div id="publisher" class="draggable user-camscreen">
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="controls" id="">
<div>
<button id="btnShareScreen" data-screen="0" class="">
<img src="~/Content/img/Student/screenshare.svg" class="screenshare" />
</button>
<p class="mb-none mt-xs text-sm line-height-xs text-white">Screen</p>
</div>
</div>
On camera/screen switch button click call
/*
Switching between camera and screen
*/
$("#btnShareScreen").on("click", function () {
el = $(this);
if (el.data('screen') == 0) {
//Publish Screen
publishScreen();
connectSession();
el.data('screen', '1');
el.find('img').attr('src', '/Content/img/Student/video-icon.svg');
el.parent().find('p').html("Camera");
}
else {
publishVideo();
connectSession();
el.data('screen', '0');
el.find('img').attr('src', '/Content/img/Student/screenshare.svg');
el.parent().find('p').html("Screen");
}
});
All Methods
function publishVideo() {
console.log(screenPublisher);
if (screenPublisher != undefined) {
endStream(screenPublisher);
}
createPublisherDiv();
publisher = OT.initPublisher('publisher', function (error) {
if (error) {
// Look at error.message to see what went wrong.
} else {
session.publish(publisher, function (error) {
if (error) {
// Look error.message to see what went wrong.
} else {
streamMode = "camera";
}
});
}
});
}
function publishScreen() {
OT.checkScreenSharingCapability(function (response) {
if (!response.supported || response.extensionRegistered === false) {
// This browser does not support screen sharing.
$.alert({
title: 'Alert!',
content: 'Your Browser Does Not Support Screen Sharing',
});
} else if (response.extensionInstalled === false) {
// Prompt to install the extension.
} else {
//Screen sharing available
endStream(publisher);
createPublisherDiv();
const publish = Promise.all([
OT.getUserMedia({
videoSource: 'screen'
}),
OT.getUserMedia({
videoSource: null
})
]).then(([screenStream, micStream]) => {
return screenPublisher = OT.initPublisher('publisher', {
videoSource: screenStream.getVideoTracks()[0],
audioSource: micStream.getAudioTracks()[0],
fitMode: "contain"
});
});
publish.then(screenPublisher => {
session.publish(screenPublisher, function (error) {
if (error) {
// Look error.message to see what went wrong.
} else {
streamMode = "screen";
}
});
}).catch(handleError);
}
});
}
function endStream(streamPublisher) {
session.unpublish(streamPublisher, function () {
//Call back
});
}
function connectSession() {
session.connect(token, function (error) {
if (error) {
console.error('Failed to connect', error);
}
});
}
function sessionEvents(streamPublisher) {
session.on({
sessionConnected: function (event) {
// Publish the publisher we initialzed earlier (this will trigger 'streamCreated' on other
// clients)
session.publish(streamPublisher, function (error) {
if (error) {
console.error('Failed to publish', error);
} else {
console.log("Publish success");
}
});
},
// This function runs when another client publishes a stream (eg. session.publish())
streamCreated: function (event) {
// Create a container for a new Subscriber, assign it an id using the streamId, put it inside
// the element with id="subscribers"
console.log(event.stream);
var subOptions = {
width: '100%', height: '100%'
};
var subContainer = document.createElement('div');
subContainer.id = 'stream-' + event.stream.streamId;
document.getElementById('subscribers').appendChild(subContainer);
// Subscribe to the stream that caused this event, put it inside the container we just made
subscriber = session.subscribe(event.stream, subContainer, subOptions, function (error) {
if (error) {
console.error('Failed to subscribe', error);
}
});
}
});
}
/*
OpenTok Unpublish Methods removes publisher div.That's why dynamically creating div
*/
function createPublisherDiv() {
$('.caller-list').find('li').empty();
var html = '<div id="publisher" class="draggable user-camscreen"></div>';
$('.caller-list').find('li').append(html);
}
function handleError(err) {
if (err) console.log(err.message);
}
I would like to get fb like or unlike event in android . But the FB.Event.subscribe method does not fire . It is strange because my javascript code is work on https://developers.facebook.com/tools/javascript-console/ but not my application.
I know that my question already ask by other people . But I still get this problem. I try many condition , but not work. How can I solve it.
Here is my webview code..
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '578995225546624',
status : true,
xfbml : true
});
FB.Event.subscribe('edge.create',
function(response) {
var likeFlag = "1";
alert('You liked the URL: ' + response);
Android.showToast(likeFlag);
}
);
FB.Event.subscribe('edge.remove',
function(response) {
var likeFlag = "0";
alert('You UNliked the URL: ' + response);
Android.showToast(likeFlag);
}
);
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/all.js#xfbml=1&appId=578995225546624&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="https://www.facebook.com/testpage" data-layout="standard" data-action="like" data-show-faces="true" data-share="false"></div>
Hello I am stuck with an android application I am trying to build using phonegap. The application I try to build retrieves a feed from a wordpress site which i have installed locally. I have already installed and tested JSON-API plugin and it worked correctly.
But when i created an android application using phonegap with eclipse I do not get the feed loaded via javascript.
I have created an html file under projectfolder/assets/www folder where the code is
<!DOCTYPE HTML>
<html>
<head>
<script src="jquery.js"></script>
<script src="cordova.js"></script>
<script>
jQuery.support.cors = true;
var target_div = "#contents";
var nextID = null;
var prevID = null;
var api_read_url = "http://127.0.0.1/wordpress_phonegap/?json=get_post&dev=1&id=";
var init_url = "http://127.0.0.1/wordpress_phonegap/?json=get_post&dev=1&p=1";
function getID(url) {
var str = new String(url);
var x = str.split("=");
var id = x[1];
return id;
}
function readSinglePost (url,target_div) {
var URL = url+"&callback=?";
console.log(URL);
jQuery.ajax({
url: URL,
dataType: "json",
jsonp: null,
jsonpCallback: null,
success: function(data) {
alert(data);
jQuery(target_div).html("");
try{
jQuery(target_div).append("<h1>"+data.post.title+"</h1>");
jQuery(target_div).append(data.post.content);
jQuery(target_div).append("<small>"+data.post.date+"</small>");
} catch (e){
console.log("error console");
}
try {
nextID = getID(data.next_url);
}
catch (e) {
;
}
try {
prevID = getID(data.previous_url);
}
catch (e) {
; // you should include some of your own error-handling code or
}
} ,
error: function(error){
console.log("error console");
}
});
}
//Renew next and previous buttons
function getNext(){
jQuery("#next").click(function(){
var id = nextID;
var nextURL = api_read_url + id;
readSinglePost(nextURL, target_div);
});
}
function getPrevious(){
jQuery("#previous").click(function(){
var id= prevID;
var prevURL = api_read_url + id;
readSinglePost(prevURL, target_div);
})
}
jQuery(document).ready(function() {
readSinglePost(init_url, target_div);
getNext();
getPrevious();
});
</script>
</head>
<body>
<div id="main">
<button type="button" id="previous">Previous</button>
<button type="button" id="next">Next</button>
<div id="title"></div>
<div id="contents"></div>
</div>
</body>
</html>
When I open this file using firefox and firebug I obtain the following error in the console.
SyntaxError: invalid label
"status": "ok",
I understand what has happened. As it is a crossbrowser interaction json gets sent in jsonp format and thus the json value gets sent wrapped in a function. How can i get the value correctly?
I have read several threads and articles but unfortunately I have found no solution. The example comes from the tutorial included in the book "WordPress Mobile Applications with PhoneGap"