Tạo nút chia sẻ bài viết nhanh gọn không javascript

Bài viết này mình sẽ hướng dẫn anh em tạo các nút chia sẻ bài viết qua Facebook, Twitter, Telegram, LinkeIn và gửi Email đơn giản và gọn

Demo

Click vào button bên dưới để xem demo

HTML

Chèn đoạn code bên dưới vào vị trí muốn hiển thị

<div class='sharepost'>Chia sẻ:
    <div id='moreshare'>
        <li>
            <div class='fa-more-icon' />
            <div class='moreshare'>
                <a expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='chia sẻ qua linkedin' onclick='window.open(this.href, &apos;Facebook Share&apos;, &apos;width=600, height=400, resizable=yes, scrollbars=yes&apos;); return false;' target='_blank'>
                    <div class='fa-linkedin-icon' />
                </a>
                <a expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.url' title='chia sẻ qua email'>
                    <div class='fa-email-icon' />
                </a>
            </div>
        </li>
    </div>
    <a expr:href='&quot;https://t.me/share/url?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title' onclick='window.open(this.href, &apos;Facebook Share&apos;, &apos;width=600, height=400, resizable=yes, scrollbars=yes&apos;); return false;' target='_blank' title='chia sẻ qua Telegram'>
        <div class='fa-telegram-icon' />
    </a>
    <a expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title' onclick='window.open(this.href, &apos;Facebook Share&apos;, &apos;width=600, height=400, resizable=yes, scrollbars=yes&apos;); return false;' target='_blank' title='chia sẻ lên Twitter'>
        <div class='fa-twitter-icon' />
    </a>
    <a expr:href='&quot;https://www.facebook.com/sharer.php?t=&quot; + data:post.title + &quot;&amp;u=&quot; + data:post.url' onclick='window.open(this.href, &apos;Facebook Share&apos;, &apos;width=600, height=400, resizable=yes, scrollbars=yes&apos;); return false;' target='_blank' title='chia sẻ lên Facebook'>
        <div class='fa-facebook-icon' />
    </a>
</div>

CSS

.sharepost .fa-facebook-icon{width: 20px;height:20px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg style='stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;' transform='translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)'%3E%3Ccircle cx='45' cy='45' r='45' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(60,90,153); fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) '/%3E%3Cpath d='M 49.645 74.998 V 47.631 h 9.186 l 1.375 -10.665 H 49.645 v -6.809 c 0 -3.088 0.857 -5.192 5.285 -5.192 l 5.648 -0.002 v -9.539 c -0.977 -0.13 -4.329 -0.42 -8.23 -0.42 c -8.143 0 -13.717 4.97 -13.717 14.098 v 7.865 h -9.209 v 10.665 h 9.209 v 27.367 H 49.645 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");background-repeat: no-repeat;}
.sharepost .fa-twitter-icon{width: 20px;height:20px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' %3E%3Cg style='stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;' transform='translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)'%3E%3Cpath d='M 45 0 C 28.967 0 14.902 8.392 6.932 21.015 c 2.729 1.97 6.069 3.145 9.693 3.145 h 32.399 c 17.08 0 32.123 8.704 40.948 21.915 C 89.981 45.716 90 45.36 90 45 C 90 20.147 69.853 0 45 0 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(29,161,242); fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3E%3Cpath d='M 90 45 c 0 -1.207 -0.062 -2.399 -0.155 -3.583 C 81.002 27.735 66.02 20.885 49.024 20.885 H 16.625 c -3.159 0 -6.101 -0.494 -8.614 -1.504 C 3.387 26.046 0.51 34.014 0.063 42.629 c 9.023 11.127 22.794 18.247 38.236 18.247 h 0.744 c 9.038 0 13.101 3.942 13.329 12.925 c 0.004 -0.143 0.022 -0.282 0.022 -0.426 c 0 8.417 -3.516 15.355 -11.172 16.456 C 42.469 89.934 43.726 90 45 90 C 69.853 90 90 69.853 90 45 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(27,148,222); fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3E%3Cpath d='M 41.27 89.834 c 7.988 -1.072 14.169 -7.802 14.378 -16.034 c -0.228 -8.983 -7.566 -16.2 -16.604 -16.2 h -0.744 c -15.296 0 -28.947 -6.992 -37.973 -17.938 C 0.119 41.414 0 43.193 0 45 C 0 68.595 18.164 87.936 41.27 89.834 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(25,137,205); fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3E%3Cpath d='M 35.724 65.314 c 18.868 0 29.188 -15.632 29.188 -29.188 c 0 -0.444 0 -0.886 -0.03 -1.326 c 2.008 -1.452 3.741 -3.25 5.118 -5.31 c -1.872 0.829 -3.858 1.374 -5.892 1.614 c 2.142 -1.282 3.744 -3.298 4.51 -5.674 c -2.014 1.195 -4.217 2.037 -6.514 2.49 c -3.885 -4.131 -10.383 -4.331 -14.515 -0.446 c -2.664 2.506 -3.794 6.239 -2.968 9.802 c -8.247 -0.414 -15.932 -4.309 -21.141 -10.718 c -2.723 4.687 -1.332 10.684 3.176 13.694 c -1.633 -0.048 -3.229 -0.489 -4.656 -1.284 c 0 0.042 0 0.086 0 0.13 c 0.001 4.883 3.443 9.089 8.23 10.056 c -1.51 0.412 -3.095 0.472 -4.632 0.176 c 1.344 4.179 5.195 7.042 9.584 7.124 c -3.633 2.855 -8.12 4.404 -12.74 4.4 c -0.816 -0.002 -1.631 -0.051 -2.442 -0.148 c 4.691 3.011 10.15 4.607 15.724 4.6' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");background-repeat: no-repeat;}
.sharepost .fa-telegram-icon{width: 20px;height:20px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg style='stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;' transform='translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)'%3E%3Cpath d='M 45 0 C 28.967 0 14.902 8.392 6.932 21.015 c 2.729 1.97 6.069 3.145 9.693 3.145 h 32.399 c 17.08 0 32.123 8.704 40.948 21.915 C 89.981 45.716 90 45.36 90 45 C 90 20.147 69.853 0 45 0 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(31,155,218); fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3E%3Cpath d='M 90 45 c 0 -1.207 -0.062 -2.399 -0.155 -3.583 C 81.002 27.735 66.02 20.885 49.024 20.885 H 16.625 c -3.159 0 -6.101 -0.494 -8.614 -1.504 C 3.387 26.046 0.51 34.014 0.063 42.629 c 9.023 11.127 22.794 18.247 38.236 18.247 h 0.744 c 9.038 0 13.101 3.942 13.329 12.925 c 0.004 -0.143 0.022 -0.282 0.022 -0.426 c 0 8.417 -3.516 15.355 -11.172 16.456 C 42.469 89.934 43.726 90 45 90 C 69.853 90 90 69.853 90 45 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(29,144,203); fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3E%3Cpath d='M 41.27 89.834 c 7.988 -1.072 14.169 -7.802 14.378 -16.034 c -0.228 -8.983 -7.566 -16.2 -16.604 -16.2 h -0.744 c -15.296 0 -28.947 -6.992 -37.973 -17.938 C 0.119 41.414 0 43.193 0 45 C 0 68.595 18.164 87.936 41.27 89.834 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(27,134,188); fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3E%3Cpath d='M 36.371 52.976 l 19.271 14.237 c 2.2 1.214 3.786 0.586 4.334 -2.041 l 7.844 -36.964 c 0.803 -3.22 -1.227 -4.681 -3.331 -3.726 L 18.428 42.242 c -3.144 1.261 -3.125 3.016 -0.573 3.797 l 11.821 3.689 L 57.04 32.464 c 1.292 -0.783 2.478 -0.362 1.505 0.502 L 36.371 52.976 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(252,253,255); fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");background-repeat: no-repeat;}
.fa-facebook-icon:hover,.fa-twitter-icon:hover,.fa-telegram-icon:hover,.fa-email-icon:hover,.fa-linkedin-icon:hover,.fa-more-icon:hover{opacity: 0.5;}
.sharepost a{float:right;margin: 0 5px;}
.sharepost .fa-more-icon{width: 20px;height: 20px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg style='stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;' transform='translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)'%3E%3Cpath d='M 45 90 C 20.187 90 0 69.813 0 45 C 0 20.187 20.187 0 45 0 c 24.813 0 45 20.187 45 45 C 90 69.813 69.813 90 45 90 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(70,88,211); fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3E%3Cpath d='M 45 70.454 c -2.761 0 -5 -2.238 -5 -5 V 24.545 c 0 -2.761 2.239 -5 5 -5 c 2.762 0 5 2.239 5 5 v 40.909 C 50 68.216 47.762 70.454 45 70.454 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3E%3Cpath d='M 65.454 50 H 24.545 c -2.761 0 -5 -2.238 -5 -5 c 0 -2.761 2.239 -5 5 -5 h 40.909 c 2.762 0 5 2.239 5 5 C 70.454 47.762 68.216 50 65.454 50 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");background-repeat: no-repeat;cursor: pointer;}
.sharepost .fa-linkedin-icon{width: 20px;height: 20px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' xml:space='preserve'%3E%3Cg style='stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;' transform='translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)'%3E%3Cpath d='M 45 0 C 20.147 0 0 20.147 0 45 s 20.147 45 45 45 s 45 -20.147 45 -45 S 69.853 0 45 0 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,102,153); fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3E%3Crect x='20.82' y='36.62' rx='0' ry='0' width='10.37' height='33.34' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) '/%3E%3Cpath d='M 26.005 32.062 c -3.32 0 -6.005 -2.692 -6.005 -6.007 c 0 -3.318 2.685 -6.011 6.005 -6.011 c 3.313 0 6.005 2.692 6.005 6.011 C 32.01 29.37 29.317 32.062 26.005 32.062 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3E%3Cpath d='M 70 69.956 H 59.643 V 53.743 c 0 -3.867 -0.067 -8.84 -5.385 -8.84 c -5.392 0 -6.215 4.215 -6.215 8.562 v 16.491 H 37.686 V 36.617 h 9.939 v 4.559 h 0.141 c 1.383 -2.622 4.764 -5.385 9.804 -5.385 c 10.493 0 12.43 6.903 12.43 15.88 V 69.956 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");background-repeat: no-repeat;margin-bottom: 10px;}  
.sharepost .fa-email-icon{width: 20px;height: 20px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg style='stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;' transform='translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)'%3E%3Ccircle cx='45' cy='45' r='45' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(35,91,216); fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) '/%3E%3Cpath d='M 64.567 26.495 H 25.433 c -3.142 0 -5.689 2.547 -5.689 5.689 v 25.631 c 0 3.142 2.547 5.689 5.689 5.689 h 39.135 c 3.142 0 5.689 -2.547 5.689 -5.689 V 32.184 C 70.256 29.043 67.709 26.495 64.567 26.495 z M 63.343 57.47 c -0.295 0.306 -0.688 0.46 -1.081 0.46 c -0.374 0 -0.749 -0.14 -1.04 -0.419 l -9.419 -9.065 l -1.357 1.489 c -1.394 1.528 -3.378 2.404 -5.446 2.404 c -2.068 0 -4.053 -0.876 -5.446 -2.404 l -1.337 -1.467 l -9.022 9.023 c -0.292 0.293 -0.677 0.439 -1.061 0.439 s -0.768 -0.146 -1.061 -0.439 c -0.586 -0.586 -0.586 -1.535 0 -2.121 l 9.12 -9.121 L 26.63 35.754 c -0.558 -0.612 -0.514 -1.561 0.098 -2.119 c 0.613 -0.558 1.562 -0.514 2.119 0.098 l 12.924 14.18 c 0.838 0.92 1.985 1.426 3.229 1.426 s 2.392 -0.506 3.229 -1.426 l 2.422 -2.657 l 10.502 -11.522 c 0.559 -0.612 1.507 -0.655 2.119 -0.098 c 0.612 0.558 0.656 1.506 0.098 2.119 l -9.546 10.474 l 9.477 9.121 C 63.898 55.924 63.917 56.873 63.343 57.47 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");background-repeat: no-repeat;margin-bottom: 10px;}    
.moreshare{position: absolute;z-index: 9999;left: -999em;}
#moreshare{float:right;margin-left:5px;}
#moreshare li{list-style: none;}
#moreshare li:hover .moreshare {left: auto;width: 23px;padding: 10px 0;}
.moreshare a {float: none;margin:0;}