I saw a lot of option in order to create share interaction with users:
Web share API: https://www.w3.org/TR/web-share/#sharedata-dictionary
It seems compatible with Progressive-Web-App, but it's not well supported by firefox (https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share#browser_compatibility)
Simple Sharer: https://reactjsexample.com/a-javascript-framework-to-share-url-to-social-media-sites-like-facebook-twitter-reddit-whastapp/
If I understood well, it doesn't work for mobile, am I right?
react-share: https://reactjsexample.com/social-media-share-buttons-and-share-counts-for-react/
Seems to work on every browser, but I don't know if it's PWA-friendly. Seems to be the best option, but I'm not sure... The last update was 1 year ago (https://www.npmjs.com/package/react-share) so maybe it will not be maintained through times...
What do you use for your app? What do you recommand?
Do you know better alternatives?
My need for the App is to share URL through social media or mail/text or ??? etc. No file in theory. And I'd like to have adapted preview on social media when the user share something.
I have used react-share personally and it was unable to open some of the apps in mobile like whatsapp, etc.
The workaround is deep-links.
if user is using a smartphone or a tablet (we can easily get this using navigator.userAgent) then you can use the app based deep-links otherwise the traditional way in which you can redirect user to a new web page.
Some of the examples:
Whatsapp: https://faq.whatsapp.com/563219570998715/?locale=en_US
Instagram: Answer is already given here
NOTE: deep-link works if the user has installed the application on desktop as well (never tried for macOS but for windows and ubuntu it works)
After edit:
You can use emailto: in href while writing <a .../>.
example:
Share this link
For more reference about mailto please visit this MDN doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href
Related
I want that my online website link that is opened in my mobile browser checks whether my mobile app is installed or not and then opens it in my mobile app.
I want my functionality as I have shown in this
image
I am using AngularJS,Express,NodeJS in my application.I tried node deeplink
but it does not work for me.Please provide me with the appropriate solution.
This functionality is known as Mobile Deep Linking. The easiest way to get started is with a deep linking service like Branch.io (full disclosure: I'm on the Branch team), Yozio, or Firebase Dynamic Links. They all do exactly what you're describing.
this could Help you perhaps:
Check this
I have a LocomotiveCMS site up and running on Heroku. I can edit my templates locally and push using Wagon. It works great!
However, I'd like to be able to serve a separate set of views for mobile devices (phones really) vs desktop/tablet. Can it be done easily? Will it require large modifications to the engine?
EDIT: I should add that I have done this before for a basic Rails app with no issues. I know how to detect a mobile device by examining the user agent and creating a separate folder (such as views_mobile) to store the mobile views. Would like to be able to do the same for LocomotiveCMS
That's a tough question. For the next version of LocomotiveCMS (v3), we'll use a full stack of middleware so that it will be easy to add your own custom behaviors.
But, for the current version of the engine, it's not that easy. However, I'm thinking about something. Perhaps you could create a Route constraint for the mobile detection (http://guides.rubyonrails.org/routing.html#advanced-constraints).
Then, you would modify your routes.rb by adding this:
match '*path' => 'locomotive/public/pages#show', page_path: 'mobile-index', constraint: MobileContraint.new
Never tested so it might not work :-) Happy patching!
Didier
I'm busy building a web page where I'm using HtmlEasy and Silken with Google Closure Templates.
With ASP.NET MVC4 there is a technique of serving a mobile version of a web page by changing the file name to .mobile.. So it is not just the same version served up using a different stylesheet - the contents/data too can be different. This is really great since not everything may be relevant for a person using a mobile device.
Does HtmlEasy and Silken provide the same or similar feature? I can't seem to find anything that'll help.
Ok, when you need to detect any mobile device then its better to make use of a database.
For my own project I'm using 51Degrees Lite. Pass the user-agent to the lib and it'll tell you if the device is mobile or not. Then serve your soy template(s) accordingly.
Does there exist some kind of plugin or lightweight method of determining whether
A. A user is using a mobile device
B. The user has a particular app
C. The user does not have a particular app.
And depending on what criteria the user satisfies, display a prompt (modal, overlay, pop-up) that allows the user to view the app (if installed) or to install it (if they do not have it installed).
I realize "A" can be achieved by using media queries but I am not sure how to configure the others.
I've seen this done on many many sites so I know that it is not uncommon (view screenshot). Ideally I just want to implement some quick solution. I'm looking for something similar to "Hello Bar" for mobile only, I suppose.
Any help will be appreciated.
Example: http://i.imgur.com/VkWKu.png (the prompt at the top of the browser)
I ended up finding this:
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html
Which is exactly what I was looking for and will work in tandem with the other solutions.
I would try this approach if you really need to know if a user has your app installed.
When your app is installed and first run have it create a cookie. The only thing you have to remember to use is the CookieSyncManager because the set Cookies are stored in RAM and not storage, CookieSyncManager will sync these two.
CookieSyncManager.createInstance(context)
CookieSyncManager.getInstance().sync()
Once you've set the cookie you can then read the Cookie with the website, if its there show popup etc. Oh and only show this popup only if its a mobile device: http://www.quirksmode.org/js/detect.html
Android Developer On CookieSyncManager: http://developer.android.com/reference/android/webkit/CookieSyncManager.html
Bolg Post Explaining the Usage of the CookieSyncManager:
http://blog.tacticalnuclearstrike.com/2010/05/using-cookiesyncmanager/
I know how to do this with android not iOS or Windows...
There's no standard way to do this.
See the end of this post: http://blogs.msdn.com/b/ieinternals/archive/2011/07/14/url-protocols-application-protocols-and-asynchronous-pluggable-protocols-oh-my.aspx for one mechanism available to JavaScript in IE10.
IE10's Metro environment offers this: http://blogs.msdn.com/b/ie/archive/2011/10/20/connect-your-web-site-to-your-windows-8-app.aspx but I don't think that exists for the mobile browser.
One of the big flaws in Android webphones (and probably other Operating Systems for phones): You are surfing some website, and want to use the site's embedded share button for say Twitter. You want to use the embedded Twitter share because it pre-populates the tweet based on how the site designed it: namely, it has the title of the page and the link and maybe a relevant Twitter hashtag. If you were to use your mobile browser's share feature, you only get the link, and have to attempt to type in the title and guess relevant hashtags--not ideal. The same is the case with other social media shares, like facebook.
So, from the above, you understand why users would prefer to use a given website's own embedded share features, rather than that built into the mobile browser.
However, if a user clicks the site's embedded social media share button, it opens a new browser window for that social media. Ideally, this would not happen, as typical users do not log into these social tools using the mobile browser, and the resulting pop-up share is clunky to use on a small mobile screen. Instead, ideally, you would click on the site's embedded share button and it would attempt to open at least the official twitter (or whatever) app on your phone instead. This is ideal because users tend to use the apps to use their social media, and so would already be logged in. Moreover, such an app is obviously optimized for mobile use, and thus not as clunky.
And yet, this apparently does not exist... am I right?
That is, as a web designer, there is nothing I can do on my embedded Twitter and Facebook share buttons to prompt mobile phone users to use the official app to share (rather than through the mobile browser). Is that right?
Thanks,
Derek
At least on my iPhone the twitter url-scheme does work.
the following opens the twitter app:
twitter://post?message=hello%20world
And facebook is fb://
Haven't tested it on android.
(via: http://wiki.akosma.com/IPhone_URL_Schemes )
What about open a pop up box (not window)- when we click a link to share the URL site/page we are in, without have to go through the mobile browser ?
just a pop up box.
do you think it is possible? or any social media link would automatically opened in a browser?