1

I want to add share button in my template same as youtube share button for copy link. When clicking this button will show my current URL. enter image description here

click button

enter image description here

Can anyone help me? Thanks.

  • What will be the work of this share button? Does it share in facebook or something else? – Sukumar Gorai Sep 10 '18 at 10:30
  • @SukumarGorai I updated my question. It will be my current URL, the users can copy the URL by clicking "COPY" – Thanh TN Sep 10 '18 at 10:43
  • Where do you want this? In product details page or somewhere else? – Sukumar Gorai Sep 10 '18 at 10:43
  • In my blog I created. I can get current URL and just don't know how to create that button. – Thanh TN Sep 10 '18 at 10:45
  • 1
    Please check my answer. – Sukumar Gorai Sep 10 '18 at 12:04
1

You can try the below code for your requirement:

Add the below html code to desired location:

<div class="share-container">
    <a href="YOUR_URL" class="blog-share">
        <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false">
            <path d="M14 9V5l7 7-7 7v-4.1c-5 0-8.5 1.6-11 5.1 1-5 4-10 11-11z"></path>
        </svg>
        <span>Share</span>
    </a>

    <div class="dialog">
        <span class="close">X</span>
        <input type="text" id="copy"/>
        <button>Copy</button>
    </div>
</div>

Add the below css code snippet to your respective css file:

<style type="text/css">
    .share-container{position: relative;}
    .share-container .blog-share{width: 50px; line-height: 20px; color: #777;}
    .share-container .blog-share svg{width: 20px; float: left; fill: #777;}
    .share-container .dialog{border:5px solid #666; padding:10px; background:#3A3A3A; position:absolute; display:none; z-index: 1;}
    .share-container .close{position: absolute;right: 0; top: -8px; color: #fff; cursor: pointer;}
</style>

Also add the below javascript code to your template or js file:

<script>
    jQuery(document).ready(function($){
        $('.blog-share').click(function(e){
            e.preventDefault();
            $(this).next().find('input').val($(this).attr('href'));
            $(this).next().show(500);
        });

        $('.close').click(function(){
            $(this).parent().hide(500);
        });

        $('.dialog button').click(function(){
            $(this).prev().select();
            document.execCommand("copy");
        });
    });
</script>

You need to replace the url on href with your respective url.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.