Using conditional AddThis sharing buttons on desktops and Web Share API on Android
Created
February 25, 2020 13:45
-
-
Save dennysjmarquez/fd735247c5e4774fdb911576c929711b to your computer and use it in GitHub Desktop.
Web Share API + AddThis Sharing Buttons
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width = device-width,initial-scale = 1.0"> | |
| <title>Web Share API + AddThis Sharing Buttons</title> | |
| <meta name="description" content="Learn how to use Web Share API with conditional AddThis Sharing Buttons"> | |
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> | |
| <button id="shareButton" onclick="share(this)"> | |
| <i class="fas fa-share-alt"></i> | |
| <i class="fas fa-times"></i> | |
| <div class="container"> | |
| <div class="addthis_inline_share_toolbox"></div> | |
| <!--for old users of AddThis--> | |
| <div class="addthis_sharing_toolbox"></div> | |
| </div> | |
| </button> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var AddThisJSLoaded = false; //AddThis not loaded yet | |
| var clickedOnShare = false; //share button is not clicked | |
| //replace with your publisher ID | |
| //it's in your profile setting | |
| var AddThisPubID = "ra-5b056b31a239b6eb"; | |
| var AddThisJS = | |
| "//s7.addthis.com/js/300/addthis_widget.js#pubid=" + AddThisPubID; | |
| function share(button) { | |
| if (navigator.share) { | |
| //check if Web Share API is supported by the browser | |
| var url = document.location.href; | |
| var title = document.getElementsByTagName("title")[0].innerHTML; | |
| var description = document | |
| .querySelector("meta[name=description]") | |
| .getAttribute("content"); | |
| navigator.share({ | |
| title: title, | |
| text: description, | |
| url: url | |
| }); | |
| } else { | |
| if (!AddThisJSLoaded && !clickedOnShare) { | |
| //when AddThis not loaded and share button isn't clicked | |
| clickedOnShare = true; //share button is clicked | |
| showLoading(button); | |
| shareByAddThis(button); | |
| } else { | |
| toggleAddThisButtons(button); | |
| } | |
| } | |
| } | |
| function shareByAddThis(button) { | |
| var script = document.createElement("script"); | |
| script.async = true; | |
| script.src = AddThisJS; | |
| script.onload = function() { | |
| clickedOnShare = false; //AddThis JS is loaded | |
| addthis.user.ready(function(data) { | |
| AddThisJSLoaded = true; //AddThis loaded and ready to use | |
| hideLoading(button); | |
| showAddThisButtons(button); | |
| }); | |
| }; | |
| script.onerror = function() { | |
| clickedOnShare = false; //AddThis JS failed to load | |
| hideLoading(button); | |
| }; | |
| document.body.appendChild(script); | |
| } | |
| function showLoading(button) { | |
| button.classList.add("loading"); | |
| } | |
| function hideLoading(button) { | |
| button.classList.remove("loading"); | |
| } | |
| function showAddThisButtons(button) { | |
| button.classList.add("showAddThisButtons"); | |
| } | |
| function toggleAddThisButtons(button) { | |
| button.classList.toggle("showAddThisButtons"); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #shareButton { | |
| position: fixed; | |
| right: 40px; | |
| bottom: 40px; | |
| width: 2.5em; | |
| height: 2.5em; | |
| font-size: 24px; | |
| border-radius: 50%; | |
| border: 0; | |
| outline: 0; | |
| background: linear-gradient(135deg, hsl(0, 100%, 30%), hsl(330, 100%, 40%)); | |
| color: #fff; | |
| box-shadow: 2px 3px 8px 2px hsla(330, 100%, 40%, 0.4); | |
| cursor: pointer; | |
| transition: 0.3s; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| #shareButton:hover { | |
| box-shadow: 4px 6px 16px 4px hsla(330, 100%, 40%, 0.4); | |
| } | |
| #shareButton i { | |
| position: absolute; | |
| transform: translate(-50%, -50%); | |
| left: 1.2em; | |
| top: 1.3em; | |
| transition: 0.6s; | |
| } | |
| #shareButton > .container { | |
| position: absolute; | |
| width: 200px; | |
| background: hsl(0, 40%, 95%); | |
| bottom: 100%; | |
| right: 0; | |
| padding: 8px; | |
| box-shadow: 0 0 1px 0 hsla(330, 100%, 40%, 0.4), | |
| 2px 3px 8px 2px hsla(330, 100%, 40%, 0.4); | |
| margin-bottom: 16px; | |
| border-radius: 4px; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: 0.3s; | |
| transform: translateY(10%); | |
| } | |
| #shareButton > .container:hover { | |
| box-shadow: 0 0 1px 0 hsla(330, 100%, 40%, 0.4), | |
| 4px 6px 16px 4px hsla(330, 100%, 40%, 0.4); | |
| } | |
| #shareButton.showAddThisButtons > .container { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translateY(0); | |
| } | |
| .addthis_inline_share_toolbox, | |
| .addthis_sharing_toolbox { | |
| text-align: right; | |
| } | |
| #shareButton:after { | |
| content: ""; | |
| position: absolute; | |
| top: 2px; | |
| bottom: 2px; | |
| left: 2px; | |
| right: 2px; | |
| border: 0 solid #fff; | |
| border-radius: 50%; | |
| border-width: 2px 0 0 2px; | |
| border-left-color: transparent; | |
| animation: loading-share-buttons 1s cubic-bezier(0.4, 0.6, 0.4, 0.6) infinite; | |
| animation-play-state: paused; | |
| opacity: 0; | |
| transition: 0.3s; | |
| } | |
| #shareButton.loading:after { | |
| animation-play-state: running; | |
| opacity: 1; | |
| } | |
| #shareButton i.fa-times { | |
| opacity: 0; | |
| left: 1.22em; | |
| transform: translate(-50%, -50%) rotate(180deg); | |
| } | |
| #shareButton.showAddThisButtons i.fa-share-alt { | |
| opacity: 0; | |
| transform: translate(-50%, -50%) rotate(180deg); | |
| } | |
| #shareButton.showAddThisButtons i.fa-times { | |
| opacity: 1; | |
| transform: translate(-50%, -50%) rotate(360deg); | |
| } | |
| @keyframes loading-share-buttons { | |
| to { | |
| transform: rotate(-360deg); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment