.whatsapp-button {
            display: flex;
            align-items: center;
            background-color: #25D366;
            color: white;
            padding: 15px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            width:80px;
            height:80px;
        }
        
        .whatsapp-button:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 12px rgba(0,0,0,0.3);
        }
        
        .whatsapp-button i {
            margin-right: 8px;
        }
        
        .moveable-container {
            position: fixed;
            left:20px;
            top: 70%;
            transform: translateY(-30%);
            z-index: 1000;
            cursor: move;
            user-select: none;
        }
        
        .image-preview {
            max-width: 200px;
            margin: 20px 0;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
         <script>
        // Article data
        const articleTitle = document.getElementById("article-title").innerText;
        const articleContent = document.getElementById("article-content").innerText;
        const articleLink = document.getElementById("article-link").innerText;
        const articleImage = document.getElementById("article-image").src;
        
        // Prepare WhatsApp sharing message
        const whatsappShareMessage = 
            `${articleTitle}\n\n` +
            `${articleContent}\n\n` +
            `Read more here: ${articleLink}`;

        // Encode the message for URL
        const whatsappShareURL = `https://api.whatsapp.com/send?text=${encodeURIComponent(whatsappShareMessage)}`;

        // Set the href of the WhatsApp share button
        document.getElementById("whatsapp-share").setAttribute("href", whatsappShareURL);
        
        // Make the button moveable vertically
        const moveableContainer = document.getElementById("moveable-container");
        let isDragging = false;
        let currentY;
        let initialY;
        let yOffset = 0;
        
        // Set initial position to middle of screen
        moveableContainer.style.top = '50%';
        moveableContainer.style.transform = 'translateY(-50%)';
        
        moveableContainer.addEventListener('mousedown', dragStart);
        document.addEventListener('mousemove', drag);
        document.addEventListener('mouseup', dragEnd);
        
        // Touch events for mobile
        moveableContainer.addEventListener('touchstart', dragStart);
        document.addEventListener('touchmove', drag);
        document.addEventListener('touchend', dragEnd);
        
        function dragStart(e) {
            if (e.type === "touchstart") {
                initialY = e.touches[0].clientY - yOffset;
            } else {
                initialY = e.clientY - yOffset;
            }
            
            if (e.target.closest('.whatsapp-button')) {
                isDragging = true;
                moveableContainer.style.transition = 'none';
            }
        }
        
        function drag(e) {
            if (isDragging) {
                e.preventDefault();
                
                if (e.type === "touchmove") {
                    currentY = e.touches[0].clientY - initialY;
                } else {
                    currentY = e.clientY - initialY;
                }
                
                yOffset = currentY;
                
                // Restrict movement to vertical axis
                moveableContainer.style.transform = `translateY(${currentY}px)`;
            }
        }
        
        function dragEnd(e) {
            initialY = currentY;
            isDragging = false;
            
            // Reset transition
            setTimeout(() => {
                moveableContainer.style.transition = 'transform 0.2s ease';
            }, 100);
        }
        
        // Enhanced sharing with image
        document.getElementById('whatsapp-share').addEventListener('click', function(e) {
            e.preventDefault();
            
            // Check if Web Share API is available (works on mobile devices)
            if (navigator.share) {
                // Fetch the image to share
                fetch(articleImage)
                    .then(response => response.blob())
                    .then(blob => {
                        const file = new File([blob], 'article-image.jpg', { type: 'image/jpg' });
                        
                        navigator.share({
                            title: articleTitle,
                            text: whatsappShareMessage,
                            files: [file]
                        })
                        .catch(error => {
                            console.error('Error sharing:', error);
                            // Fallback to text-only sharing
                            window.open(whatsappShareURL, '_blank');
                        });
                    })
                    .catch(error => {
                        console.error('Error fetching image:', error);
                        // Fallback to text-only sharing
                        window.open(whatsappShareURL, '_blank');
                    });
            } else {
                // Fallback for desktop browsers - open WhatsApp with text and image URL
                const messageWithImage = `${whatsappShareMessage}\n\nImage: ${articleImage}`;
                const whatsappURL = `https://api.whatsapp.com/send?text=${encodeURIComponent(messageWithImage)}`;
                window.open(whatsappURL, '_blank');
            }
        });
    </script>