How To Share Text in Social Networks on FirefoxOS - share

I'm developing an app for FirefoxOS. This app needs a button that, when pressed, shares some text in social networks and email.
I'm using this code I found somewhere:
var share = document.querySelector("#share");
if (share)
{
share.onclick = function ()
{
var sharing = new MozActivity({
name: "share",
data:
{
//type: "url", // Possibly text/html in future versions,
number: 1,
url: "http://robertnyman.com"
}
});
}
}
It kind of works and I successfully shared pictures. This code opens a menu with all the apps that are available for sharing (Facebook, Twitter, etc). Then you can select any app and it will open that app with an empty textfield that the user can fill with text to share. But I cannot share predefined text at all. I cannot pass this predefined text to the other apps.
As you can see, there's a type parameter that's commented and it says that it'll be available in future versions.
Do you guys have any idea of how to include text in the data variable (or somewhere else) so it can be shared?
Thanks everyone!

I am not sure the Twitter Firefox OS App has a field for the text for the share activity. Another option is to compose the twitter URL and then open it. For example:
var twitterURL = encodeURI("https://twitter.com/intent/tweet?text=test tweet");
var openURL = new MozActivity({
name: "view",
data: {
type: "url",
url: twitterURL
}
})

Related

I want to add Share to Slack feature in my web app. Facing issue in showing the popup to select the receipients

I am adding share to slack functionality in my web app.
But I cannot find any solution by which I can show my app users to select a user/channel or team in slack to share the content with.
I have added Sharing on Teams also. In that I am able to select the users or search the particular user. Please refer the below link to see how it is looking in teams.
https://learn.microsoft.com/de-de/power-bi/collaborate-share/media/service-share-report-teams/service-teams-share-to-teams-dialog.png
I want to know, is there any way by which we can implement the sharing to particular user or channel etc on slack same as it is there in teams.
Thanks.
Once the Web app shares content, it's very much up to the receiving app to decide what it makes of the incoming data.
try {
await navigator.share({
title: 'Title',
text: 'Text',
url: 'https://example.com/',
});
console.log('Successful share'))
} catch (err) {
console.log('Error sharing', err));
}
Possible values are:
url: A string representing a URL to be shared.
text: A string representing text to be shared.
title: A string representing a title to be shared. May be ignored by the target.
See the bold part. Try populating text and title differently and see if it makes any difference.

How can I handle Media sharing in my PWA app when sharing media from another app into my app?

I am working on a Progressive web app that works on both web version and mobile version. I am sharing media files with others apps but when I share media from another app (Or any other social like Facebook, Messenger, LinkedIn) into my app after selecting my app it just opens up and turns into a black screen. I need help with how I can forward the screen into my share list screen and the data which is shared by another app how can I access them. Any Help?
Double check your method is "POST" and that enctype is present. enctype must be "multipart/form-data", and a files entry must be added in your manifest where you specify your share_target. files is an array that specifies the types of files your app accepts.
more info from: https://web.dev/web-share-target/
The foreground page cannot process this data directly. Since the page sees the data as a request, the page passes it to the service worker, where you can intercept it with a fetch event listener. From here, you can pass the data back to the foreground page using postMessage() or pass it on to the server:
self.addEventListener('fetch', event => {
const url = new URL(event.request.url);
// If this is an incoming POST request for the
// registered "action" URL, respond to it.
if (event.request.method === 'POST' &&
url.pathname === '/bookmark') {
event.respondWith((async () => {
const formData = await event.request.formData();
const link = formData.get('link') || '';
const responseUrl = await saveBookmark(link);
return Response.redirect(responseUrl, 303);
})());
}
});

Generic template image_url does not load in Messenger - Facebook Messenger Platform

I am using the Facebook Messenger Platform to create a generic template. I am currently using ngrok to test locally, and the image_url I input for the generic template never shows in Messenger. The generic template is sent, and the image is just blank. Using Inspect, I can see that the CSS for the image is:
background-image: url("https://external.xx.fbcdn.net/safe_image.php?d=AQA1nM3pKJnllzq0&url=https%3A%2F%2Fdc3858ef.ngrok.io%2Fassets%2Fimages%2Fvideo_image.jpg&_nc_hash=AQAlBOE-vbT8cl-i");
If I open this URL, it is just a black screen with one white pixel in the middle.
Here is the message data that I use:
messageData = {
recipient: {
id: senderID
},
message:{
attachment:{
type: "template",
payload: {
template_type: "generic",
elements: [
{
title:"Test Video Link",
image_url: MY-NGROK_DOMAIN + "/assets/images/video_image.jpg",
subtitle: "Check out this video!",
default_action: {
type: "web_url",
url: "www.google.com"
}
}
]
}
}
}
};
This image_url works fine if I open it in a browser. Similarly, if I create an 'image' type message data rather than 'template', this image is loaded in Messenger.
How can I get my image_url to load properly for a generic template?
I have the same issue. I and the problem appears when the webhook domain is the same as the image url. If you use an image on a different server, it works.
I had the same issue. I've put my local web application behind ngrok. Requesting the image directly in the browser worked fine, but when it's loaded via Facebook's safe_image.php script it would show a blank image. After a lot of debugging it turned out to be the tunnelling service itself. I switched to another service (localtunnel) and there it worked fine.
More information can also be found on this issue registered on FB:
https://developers.facebook.com/support/bugs/2151860088174161/
Update
Contacted ngrok about this and got a quick reply, this is due to Facebook blocking ngrok for this script.

Is there any method to share text from mobile web to wechat by sharing button?

I am looking for wechat sharing function like how whatsapp does.
href="whatsapp://send?text=http://www.example.com"
Based on my research, most of them will be encoded in QR code and scan the QR code with wechat scanner. Is there a way to share the text directly to friend when click on sharing button just like how whatsapp does?
Wechat doesn't have any official deep linking URL for sending a text. However, if you can add some JavaScript Code in your mobile web, you can achieve the share functionality.
Check out Send to chat documentation on Wechat JS SDK.
From JS SDK Documentation:-
wx.onMenuShareAppMessage({
title: '', // Sharing title
desc: '', // Sharing description
link: '', // Sharing link
imgUrl: '', // Sharing image URL
type: '', // Sharing type, such as “music”, “video “ or “link”. It is “link” by default.
dataUrl: '', // The data URL should be provided for items of type “music” or “video”. It is null by default.
success: function () {
// Callback function executed after a user confirms sharing
},
cancel: function () {
// Callback function executed after a user cancels sharing
}
});
We do have some unofficial deep linking URL like you mentioned. But it may stop work anytime if Wechat decided to change it.
Here is some of them below, sadly I don't know any URL to share a text to chat.
weixin:// - to open Wechat app (if installed)
weixin://dl/chat - to open chat screen of Wechat
weixin://dl/moments - to open user moements
weixin://dl/profile - to open user profile
weixin://dl/settings - to open settings page

Ionic External link from email to application (Deep Linking)

I'm trying to add a link from email
that click on it will open the application in the relevant page.
I haven't found a solution for that yet.
If you do have any recommendation how to do that, i'll be glad to know.
Thanks.
This is the scenario :
user click forgot passowrd.
email is sent via server.
the email contains link for reset the password (this is what i need)
user click on the link an enter the reset password page on mobile application.
It's relevant to say that it should support All ionic platform (most important ios/ android)
I agree with #LiadLivnat in the past I used Custom-URL-scheme.
Here is a snippets of code:
Consider you have some run with reportAppLaunched method:
app.run(function($rootScope){
/* ... */
$rootScope.reportAppLaunched = function(url) {
$log.debug("App Launched Via Custom URL: " + url);
$rootScope.$apply(function() {
if (url.substring(0, 'mailto:'.length) === 'mailto:') {
$rootScope.navigateTo('forgot_password_view', {action: url});
}
});
};
}
Now this global function will be fired when, in my case, user opens contact list and clicks on some member. Android will ask with witch application you want to open this contact and you select . The method handleOpenURL is triggered and you can redirect to specific view in your application.
function handleOpenURL(url) {
var body = document.getElementsByTagName("body")[0];
var rootController = angular.element(body).scope();
rootController.reportAppLaunched(url);
}
Hope it will help,