如何在Google Blogger博客中创建一个共享按钮以与帖子URL共享报价 [英] How to make a share button to share quote with post URL in Google blogger blog

问题描述

我想要一个共享按钮来共享我的 blogger博客中的报价。

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

例如

<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 共享给任何应用。

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.

编辑：-我的博客仅基于Quotes主题。每个帖子都有很多引号，我想在每个引号后使用一个共享按钮，以便人们可以共享他们想要的任何引号。
如何在不为每个按钮和引号创建唯一的 ID 的情况下执行此操作？

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>

推荐答案

您可以使用网络共享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 在这里很完美，但是共享按钮应该在大括号后。

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>

这篇关于如何在Google Blogger博客中创建一个共享按钮以与帖子URL共享报价的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！