Open new tab when click the share buttons

Question

I have implemented few social media share buttons. It is working fine. When i click on those buttons it open a popup. But i need them to open in new tab. Can anyone help me out how to do it? And i want those button to be round using images/svg. Here is my Codes

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

Answer 1

I had to pass all of those code manually to get my desire result, here is my code:

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

Answer 2

When i click on those buttons it open a popup. But i need them to open in new tab. Can anyone help me out how to do it? And i want those button to be round using images/svg.

You can not do that while using these plugins; they render their own elements with their own style and their own script logic attached, and you have no access to them.

Use HTML and CSS to create your own buttons/links instead, and then use the methods to share by simply calling a URL these networks provide - a comprehensive list can be found here, https://github.com/bradvin/social-share-urls

Answer 3

for open a link in new tab, add 'target' attribute to that anchor or button and set its value to '_blank'.

example:

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