How to make a share button to share quote with post URL in Google blogger blog

问题

I want to make a share button to share quotes from my blogger blog.

For example

<blockquote>"Imagination is more important than knowledge."
--Albert Einstein</blockquote>
<share_button>

<blockquote>"Life is a preparation for the future; and the best preparation for the future is to live as if there were none."
--Albert Einstein</blockquote>
<share_button>

When visitors click the share button of any quote than the related quotes with post URL can be share to any app according to the visitor choice using default Android's share app list.

Edit :- My blog is based on only Quotes topic. Every post have many quotes and I want to use a share button after every quote so that people can share any quote they want. How to do this without creating unique ID for every button and quotes ?

<blockquote>"Imagination is more important than knowledge."
--Albert Einstein</blockquote>
<button class="shareBtn">Share Blockquote</button>

<blockquote>"Life is a preparation for the future and the best preparation for the future is to live as if there were none."
--Albert Einstein</blockquote>
<button class="shareBtn">Share Blockquote</button>

  <blockquote>"Remember not only to say the right thing in the right place, but far more difficult still, to leave unsaid the wrong thing at the tempting moment."
--Benjamin Franklin</blockquote>
<button class="shareBtn">Share Blockquote</button>


  <blockquote>"You don't have to hold a position in order to be a leader."
--Henry Ford</blockquote>
<button class="shareBtn">Share Blockquote</button>

回答1:

You can use Web Share API

<button id="shareBtn">Share Blockquote</button>

<script>
//<![CDATA[
var shareButton = document.getElementById('shareBtn');
var title = document.title;
var text = document.querySelector('blockquote').textContent;
var url = window.location.href;

shareButton.addEventListener('click', function () {
    if (navigator.share) {
        navigator.share({
            title: title,
            text: text,
            url: url
        });
    }
});
//]]>
</script>

Edit: In case you have multiple quotes, previousElementSibling is perfect here but the share button should come after blockquote.

<script>
//<![CDATA[
var title = document.title;
var url = window.location.href;

document.querySelectorAll('.shareBtn').forEach(function (btn) {
    var text = btn.previousElementSibling.textContent;
    btn.addEventListener('click', function () {
        if (navigator.share) {
            navigator.share({
                title: title,
                text: text,
                url: url
            });
        }
    });
});
//]]>
</script>

来源：https://stackoverflow.com/questions/59257693/how-to-make-a-share-button-to-share-quote-with-post-url-in-google-blogger-blog

标签

javascript

blogger

android-sharing