单击共享按钮时打开新标签答案

【问题标题】：Open new tab when click the share buttons单击共享按钮时打开新标签
【发布时间】：2019-04-12 20:54:18
【问题描述】：

我已经实现了几个社交媒体分享按钮。它工作正常。当我单击这些按钮时，它会打开一个弹出窗口。但我需要它们在新标签中打开。谁能帮我看看怎么做？我希望这些按钮使用图像/svg 是圆形的。这是我的代码

<div class="fb-share-button" 
    data-href="<?= $url ?>" 
    data-layout="icon"
    data-size="large"
    data-mobile-iframe="true"></div>

<a class="twitter-share-button"
    href="https://twitter.com/intent/tweet"
    data-text="'<?= $quote ?>..' "
    data-url="<?= $url ?>"
    data-size="small"> Tweet </a>

<a data-pin-do="buttonPin"
    href="https://www.pinterest.com/pin/create/button/"
    data-pin-url="<?= $url ?>"
    data-pin-media="<?= $image ?>"
    data-pin-description="<?= $quote ?>"
    data-pin-shape="round"></a>

<div id="fb-root"></div>
<script>
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

<script>
    window.twttr = (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0],
        t = window.twttr || {};
        if (d.getElementById(id)) return t;
        js = d.createElement(s);
        js.id = id;
        js.src = "https://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);

        t._e = [];
        t.ready = function(f) {
        t._e.push(f);
        };

        return t;
    }(document, "script", "twitter-wjs"));
</script>

<script
    type="text/javascript"
    async defer
    src="//assets.pinterest.com/js/pinit.js"
></script>

【问题讨论】：

标签： javascript facebook twitter pinterest socialshare

【解决方案1】：

要在新选项卡中打开链接，请将“目标”属性添加到该锚点或按钮，并将其值设置为“_blank”。

示例：

<a class="twitter-share-button"
href="https://twitter.com/intent/tweet"
data-text="'<?= $quote ?>..' "
data-url="<?= $url ?>"
data-size="small"
target="_blank"> Tweet </a>

【讨论】：

不..它只打开弹出窗口。
奇怪。这应该有效。至少在我的情况下它运作良好

【解决方案2】：

当我点击这些按钮时，它会打开一个弹出窗口。但我需要它们在新标签中打开。谁能帮我看看怎么做？我希望这些按钮使用图像/svg 是圆形的。

在使用这些插件时你不能这样做；它们使用自己的样式和附加的脚本逻辑渲染自己的元素，而您无权访问它们。

改为使用 HTML 和 CSS 创建您自己的按钮/链接，然后通过简单地调用这些网络提供的 URL 来使用这些方法进行共享 - 可以在此处找到完整列表，https://github.com/bradvin/social-share-urls

【讨论】：

【解决方案3】：

我必须手动传递所有这些代码以获得我想要的结果，这是我的代码：

<a href="http://www.facebook.com/share.php?u=<?= $url ?>" target="_blank" style="display: inline-block;">
    <img src="facebook_circle.png" style="width: 26px;">
</a>

<a href="https://twitter.com/share?url=<?= $url ?>&text='<?= $quote ?>'" target="_blank" title="Share on Twitter" style="display: inline-block;">
    <img src="twitter_circle.png" style="width: 26px;">
</a>

<a target="_blank" href="http://pinterest.com/pin/create/bookmarklet/?url=<?= $url ?>&media=<?= $image ?>&description=<?= $quote ?>" style="display: inline-block;">
    <img src="pinterest_circle.png" style="width: 26px;">
</a>

【讨论】：