blog-duhaz-v3/blog/templates/blog/social_share.html

{% load static %}

<!-- Composant de partage social -->
<div class="social-share-container">
    <h5 class="social-share-title">
        <i class="fas fa-share-alt"></i> Partager cet article
    </h5>
    
    <div class="social-share-buttons">
        <!-- Twitter/X -->
        <a href="https://twitter.com/intent/tweet?text={{ article_title|urlencode }}&url={{ article_url }}" 
           target="_blank" 
           rel="noopener noreferrer"
           class="social-btn social-btn-twitter"
           title="Partager sur Twitter">
            <i class="fab fa-twitter"></i>
            <span class="social-btn-text">Twitter</span>
        </a>
        
        <!-- Facebook -->
        <a href="https://www.facebook.com/sharer/sharer.php?u={{ article_url }}" 
           target="_blank" 
           rel="noopener noreferrer"
           class="social-btn social-btn-facebook"
           title="Partager sur Facebook">
            <i class="fab fa-facebook-f"></i>
            <span class="social-btn-text">Facebook</span>
        </a>
        
        <!-- LinkedIn -->
        <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ article_url }}" 
           target="_blank" 
           rel="noopener noreferrer"
           class="social-btn social-btn-linkedin"
           title="Partager sur LinkedIn">
            <i class="fab fa-linkedin-in"></i>
            <span class="social-btn-text">LinkedIn</span>
        </a>
        
        <!-- WhatsApp -->
        <a href="https://wa.me/?text={{ article_title|urlencode }}%20{{ article_url }}" 
           target="_blank" 
           rel="noopener noreferrer"
           class="social-btn social-btn-whatsapp"
           title="Partager sur WhatsApp">
            <i class="fab fa-whatsapp"></i>
            <span class="social-btn-text">WhatsApp</span>
        </a>
        
        <!-- Reddit -->
        <a href="https://reddit.com/submit?url={{ article_url }}&title={{ article_title|urlencode }}" 
           target="_blank" 
           rel="noopener noreferrer"
           class="social-btn social-btn-reddit"
           title="Partager sur Reddit">
            <i class="fab fa-reddit-alien"></i>
            <span class="social-btn-text">Reddit</span>
        </a>
        
        <!-- Email -->
        <a href="mailto:?subject={{ article_title|urlencode }}&body=J'ai%20trouvé%20cet%20article%20intéressant%20:%20{{ article_url }}" 
           class="social-btn social-btn-email"
           title="Partager par email">
            <i class="fas fa-envelope"></i>
            <span class="social-btn-text">Email</span>
        </a>
        
        <!-- Copier le lien -->
        <button onclick="copyToClipboard('{{ article_url }}')" 
                class="social-btn social-btn-copy"
                title="Copier le lien">
            <i class="fas fa-link"></i>
            <span class="social-btn-text">Copier</span>
        </button>
    </div>
    
    <!-- Message de confirmation pour la copie -->
    <div id="copy-notification" class="copy-notification">
        <i class="fas fa-check-circle"></i> Lien copié !
    </div>
</div>

<style>
/* Container principal */
.social-share-container {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 15px;
    padding: 25px;
    margin: 30px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.social-share-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 20px;
    text-align: center;
}

.social-share-title i {
    margin-right: 8px;
    color: #3498db;
}

/* Grille de boutons */
.social-share-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

/* Style des boutons */
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.social-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    color: white;
    text-decoration: none;
}

.social-btn i {
    font-size: 1.2rem;
    margin-right: 8px;
}

/* Couleurs spécifiques par réseau */
.social-btn-twitter {
    background: linear-gradient(135deg, #1DA1F2 0%, #0d8bd9 100%);
}

.social-btn-facebook {
    background: linear-gradient(135deg, #1877F2 0%, #0d5dbf 100%);
}

.social-btn-linkedin {
    background: linear-gradient(135deg, #0077B5 0%, #005885 100%);
}

.social-btn-whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #1da851 100%);
}

.social-btn-reddit {
    background: linear-gradient(135deg, #FF4500 0%, #cc3700 100%);
}

.social-btn-email {
    background: linear-gradient(135deg, #6c757d 0%, #545b62 100%);
}

.social-btn-copy {
    background: linear-gradient(135deg, #6c5ce7 0%, #5849c9 100%);
}

/* Notification de copie */
.copy-notification {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #2ecc71;
    color: white;
    padding: 15px 25px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    font-weight: 600;
    z-index: 9999;
    animation: slideIn 0.3s ease;
}

.copy-notification i {
    margin-right: 8px;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .social-share-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .social-btn-text {
        display: inline;
    }
    
    .copy-notification {
        bottom: 20px;
        right: 20px;
        font-size: 0.9rem;
        padding: 12px 20px;
    }
}

@media (max-width: 480px) {
    .social-share-container {
        padding: 20px 15px;
        margin: 20px 0;
    }
    
    .social-share-buttons {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .social-btn {
        padding: 14px;
        font-size: 1rem;
    }
}
</style>

<script>
// Fonction pour copier le lien dans le presse-papiers
function copyToClipboard(url) {
    // Méthode moderne avec l'API Clipboard
    if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(url).then(function() {
            showCopyNotification();
        }).catch(function(err) {
            console.error('Erreur lors de la copie:', err);
            fallbackCopyToClipboard(url);
        });
    } else {
        // Fallback pour les navigateurs plus anciens
        fallbackCopyToClipboard(url);
    }
}

// Méthode alternative de copie
function fallbackCopyToClipboard(text) {
    const textArea = document.createElement("textarea");
    textArea.value = text;
    textArea.style.position = "fixed";
    textArea.style.left = "-999999px";
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    
    try {
        document.execCommand('copy');
        showCopyNotification();
    } catch (err) {
        console.error('Erreur lors de la copie:', err);
        alert('Impossible de copier le lien automatiquement. Veuillez le copier manuellement.');
    }
    
    document.body.removeChild(textArea);
}

// Afficher la notification de copie
function showCopyNotification() {
    const notification = document.getElementById('copy-notification');
    notification.style.display = 'block';
    
    setTimeout(function() {
        notification.style.display = 'none';
    }, 3000);
}
</script>