1. Home
2. Blogs
3. Create-android-mobile-sharing-option-on-website-using-javascript -

Create android mobile sharing option on website using JavaScript

By Deepak Sharma | Mar, 24 2020 10:09

Hi guys in this blog I am try to Create android mobile sharing option on website using JavaScript; In very simple steps; <img alt="" src="https://myinboxhub.co.in/upload/blog/blog_img1585041686.jpg" style="height:711px; width:400px" /> You can use it in your various project such as 1) On mobile based websites. 2) Provide flexibility in share data among various android app, using android share feature 3) You can use it in referral sharing system and so on. Requirement : 1) Html editor 2) Chrome browser 3) Website having SSL or https for eg.(https://myinboxhub.co.in) \ Note* Not work with http. Steps : 1) Create mobileSharingJavascript.html file; 2) Copy and paste code as below; <table> <tr><td>Title:</td> <td><input type="checkbox" id="title_checkbox" checked /></td> <td><input id="title" value="Myinboxhub" size="40" /></td> </tr> <tr><td>Text:</td> <td><input type="checkbox" id="text_checkbox" checked/></td> <td><input id="text" value="Myinboxhub is the largest, most trusted online community where students, teacher, developers &amp; beginners to learn, share? ?their ?knowledge." size="40"/></td> </tr> <tr><td>URL:</td> <td><input type="checkbox" id="url_checkbox" checked/></td> <td><input id="url" value="https://myinboxhub.co.in" size="40"/></td> </tr> <tr><td>Files:</td> <td><input id="files" type="file" multiple></td> </tr> </table> <input id="share" type="button" value="Share Now" /> <div id="output"></div> <script><br/> "use strict"; function sleep(delay) { return new Promise(resolve => { setTimeout(resolve, delay); }); } function logText(message, isError) { if (isError) console.error(message); else console.log(message); const p = document.createElement("p"); if (isError) p.setAttribute("class", "error"); document.querySelector("#output").appendChild(p); p.appendChild(document.createTextNode(message)); } function logError(message) { logText(message, true); } function checkboxChanged(e) { const checkbox = e.target; const textfield = document.querySelector("#" + checkbox.id.split("_")[0]); textfield.disabled = !checkbox.checked; if (!checkbox.checked) textfield.value = ""; } async function testWebShare() { if (navigator.share === undefined) { logError("Error: Unsupported feature: navigator.share()"); return; } const title_input = document.querySelector("#title"); const text_input = document.querySelector("#text"); const url_input = document.querySelector("#url"); const file_input = document.querySelector("#files"); const title = title_input.disabled ? undefined : title_input.value; const text = text_input.disabled ? undefined : text_input.value; const url = url_input.disabled ? undefined : url_input.value; const files = file_input.disabled ? undefined : file_input.files; if (files &amp;&amp; files.length > 0) { if (!navigator.canShare || !navigator.canShare({files})) { logError("Error: Unsupported feature: navigator.canShare()"); return; } } try { await navigator.share({files, title, text, url}); logText("Successfully sent share"); } catch (error) { logError("Error sharing: " + error); } } async function testWebShareDelay() { await sleep(6000); testWebShare(); } function onLoad() { // Checkboxes disable and delete textfields. document.querySelector("#title_checkbox").addEventListener("click", checkboxChanged); document.querySelector("#text_checkbox").addEventListener("click", checkboxChanged); document.querySelector("#url_checkbox").addEventListener("click", checkboxChanged); document.querySelector("#share").addEventListener("click", testWebShare); document.querySelector("#share-no-gesture").addEventListener("click", testWebShareDelay); if (navigator.share === undefined) { if (window.location.protocol === "http:") { // navigator.share() is only available in secure contexts. window.location.replace(window.location.href.replace(/^http:/, "https:")); } else { logError("Error: You need to use a browser that supports this draft " + "proposal."); } } } window.addEventListener("load", onLoad); </script> 3) And save it and shown something like ; 4) Open it on your mobile chrome browser and click on share now button; Live Demo https://myinboxhub.co.in/demo/mobileSharingJavascript.html I hope you like it and make it useful, for more such interesting information or techniques in programming follow us on youtube and facebook https://www.youtube.com/channel/UCXODjxyN408dUUheWC9g6kA?view_as=subscriber https://www.facebook.com/programminglanguages000/ For video tutorial subscribe our youtube channel https://www.youtube.com/channel/UCXODjxyN408dUUheWC9g6kA?view_as=subscriber