如何制作共享按钮以在Google博客中与帖子URL共享报价

Question

我想做一个分享按钮来分享我的博客中的引文。

例如

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

当访问者单击任何报价的共享按钮时，可以使用默认的Android共享应用程序列表根据访问者的选择将带有帖子URL的相关报价共享到任何应用程序。

编辑 ：-我的博客仅基于报价主题。每个帖子都有很多引号，我想在每个引号后使用一个共享按钮，以便人们可以分享他们想要的任何报价。 如何在不为每个按钮和引号创建唯一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 共享 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在这里是完美的，但共享按钮应该在块引用之后。

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