Compartir en redes sociales - Bsale-IO/template-docs GitHub Wiki

<!-- Variables -->
{% capture msg %}
    {% if current_url contains '/product/' %}
        Mira lo que encontré en {{ site.url}} | {{product.title}} a {{product.finalPrice | money_filter}} {{current_url}}
    {% elsif current_url contains '/article/' %}
        Mira lo que encontré en {{ site.url}} | {{article.title}}  {{current_url}}
    {% else %}
        {{current_url}}
    {% endif %}
{%endcapture%}

<!-- Botones -->
<aside>
    <small class="d-none d-md-inline-block">Compartir en:</small> 
    <!-- Botón de compartir nativo -->
    <a class="btn btn-share web-share-btn" title="Compartir">
        <i class="fas fa-share-alt" aria-hidden="true"></i>
    </a>
    <!-- facebook -->
    <a  class="btn btn-share" 
        title="Compartir en Facebook"
        href="https://www.facebook.com/sharer/sharer.php?u={{current_url}}" 
        target="_blank" 
        rel="nofollow noopener noreferrer">
       <i class="fab fa-facebook" aria-hidden="true"></i>
    </a>
    <!-- twitter -->
    <a  class="btn btn-share" 
        title="Compartir en x"
        href="https://x.com/intent/tweet?text={{ msg | strip | strip_newlines |  url_encode}}" 
        target="_blank" 
        rel="nofollow noopener noreferrer">
       <i class="fab fa-twitter" aria-hidden="true"></i>
    </a>
    <!-- pinterest -->
    <a  class="btn btn-share btn-pinterest"
        title="Compartir en Pinterest"
        {% if current_url contains '/product/' %}
            data-media="{{product.defaultImage | image_url: 'O'}}"
            data-description="{{aproduct.title | url_encode}}"
        {% elsif current_url contains '/article/' %}
            data-media="{{ article.imagen | image_url: 'O' }}"
            data-description="{{ article.title | url_encode }}"
        {% endif %}
        target="_blank" 
        rel="nofollow noopener noreferrer">
             <i class="fab fa-pinterest"></i>
    </a>
    <!-- tumblr -->
    <a  class="btn btn-share"  
        title="Compartir en Tumblr" 
        href="http://tumblr.com/widgets/share/tool?canonicalUrl={{current_url}}" 
        target="_blank" 
        rel="nofollow noopener noreferrer">
       <i class="fab fa-tumblr"></i>
    </a>
    <!-- linkedin -->
    <a  class="btn btn-share"  
        title="Compatir en Linkedin" 
        href="https://www.linkedin.com/cws/share?url={{current_url}}" 
        target="_blank" 
        rel="nofollow noopener noreferrer">
        <i class="fab fa-linkedin"></i>
    </a>
    <!-- whatsapp --> 
    <a  class="btn btn-share"  
        href="https://api.whatsapp.com/send?text={{ msg | strip | strip_newlines | url_encode}}"
        rel="nofollow noopener noreferrer"
        target="_blank" 
        title="Compartir en Whatsapp">
            <i class="fab fa-whatsapp"></i>
   </a>
</aside>

<!-- Librerias -->
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
<script>
(function () {
    // Pinterest
    var pinOneButton = document.querySelector('.btn-pinterest');
    pinOneButton.addEventListener('click', function(e) {
        PinUtils.pinOne({
            media: e.target.getAttribute('data-media'),
            description: e.target.getAttribute('data-description')
        });
    });

    // Web Share API
    const webShareBtn = document.querySelector('.web-share-btn');
    navigator.share && webShareBtn?.addEventListener('click', async () => {
        try {
            await navigator.share({
                title: document.title,
                text: `{{ msg | strip | strip_newlines }}`,
                url: window.location.href
            });
        } catch (err) {
            console.error('Error:', err); 
        }
    });
    webShareBtn.style.display = navigator.share ? 'inline-block' : 'none';

    // WhatsApp Firefox fix
    try {
        if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1 && 
            navigator.userAgent.toLowerCase().indexOf('mobile') < 0 ) {
            var firefox = document.querySelector('a[href^="https://api.whatsapp.com/send"]');
            firefox.href = firefox.href.replace('api', 'web');
        }
    } catch(ex) {
        console.log(ex.Message);
    }

})();
</script>