วิธีทำปุ่ม Share ลง LINE และ Social ในเว็บไซต์ ด้วย HTML CSS JavaScript

							Copy to clipboard
							
					<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
/* เปลี่ยนชื่อ Class โดยเติม custom-share- เพื่อป้องกันการชนกับ CSS ส่วนอื่น */
.custom-share-wrapper {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0px; /*ระยะห่าง icon*/
    justify-content: flex-end; /*จัดซ้าย ขวา กลาง*/
}

.custom-share-wrapper li {
    display: inline-block;
}

.custom-share-wrapper a {
    text-decoration: none;
}

/*ขนาด icon*/
.custom-share-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    transition: all 0.25s ease;
}

/* สีแต่ละปุ่ม */
.custom-share-bg-facebook { background: #1877F2; }
.custom-share-bg-x { background: #000; }
.custom-share-bg-line { background: #00C300; }
.custom-share-bg-copy { background: #E74C6A; }

/* Hover effect */
.custom-share-icon:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
</style>

<ul class="custom-share-wrapper">
    <li>
        <a class="custom-share-btn-facebook" href="#" title="Share on Facebook">
            <span class="custom-share-icon custom-share-bg-facebook"><i class="fa-brands fa-facebook-f"></i></span>
        </a>
    </li>

    <li>
        <a class="custom-share-btn-x" href="#" title="Share on X">
            <span class="custom-share-icon custom-share-bg-x"><i class="fa-brands fa-x-twitter"></i></span>
        </a>
    </li>

    <li>
        <a class="custom-share-btn-line" href="#" title="Share on LINE">
            <span class="custom-share-icon custom-share-bg-line"><i class="fa-brands fa-line"></i></span>
        </a>
    </li>

    <li>
        <a class="custom-share-btn-copy" href="#" title="Copy Link">
            <span class="custom-share-icon custom-share-bg-copy"><i class="fa-solid fa-link"></i></span>
        </a>
    </li>
</ul>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const currentURL = encodeURIComponent(window.location.href);

    // Facebook
    document.querySelector(".custom-share-btn-facebook").href =
        "https://www.facebook.com/sharer/sharer.php?u=" + currentURL;

    // X (Twitter)
    document.querySelector(".custom-share-btn-x").href =
        "https://x.com/intent/tweet?url=" + currentURL;

    // LINE
    document.querySelector(".custom-share-btn-line").href =
        "https://line.me/R/msg/text/?" + currentURL;

    // Copy Link
    document.querySelector(".custom-share-btn-copy").addEventListener("click", function(e){
        e.preventDefault();
        navigator.clipboard.writeText(window.location.href);
        alert("คัดลอกลิงก์แล้ว!");
    });
});
</script>