如何制作分享按钮以在 Google 博主博客中与 post URL 分享报价

Question

我想创建一个分享按钮来分享我的 blogger 博客 中的引述。

例如

<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>

当访问者点击任何引用的分享按钮时，相关引用与postURL可以根据 访问者选择 使用默认 Android 的共享应用列表共享到任何应用。

编辑:- 我的博客仅基于引述主题。每个 post 都有很多引述，我想在每个引述之后使用一个分享按钮，这样人们就可以分享他们想要的任何引述。如何在不为每个按钮和引号创建唯一的 ID 的情况下做到这一点？

<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>

Answer 1

您可以使用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>

编辑：如果你有多个引号，previousElementSibling在这里是完美的，但分享按钮应该在 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>

如何制作分享按钮以在 Google 博主博客中与 post URL 分享报价

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

javascript

share

blogger

android-sharing