Skip to content

Instantly share code, notes, and snippets.

@tahmidbintaslim
Forked from cshold/supply-social-sharing
Created January 26, 2022 10:38
Show Gist options
  • Save tahmidbintaslim/4a68e171d5f7d82922ad1d5c0d21ae7b to your computer and use it in GitHub Desktop.
Save tahmidbintaslim/4a68e171d5f7d82922ad1d5c0d21ae7b to your computer and use it in GitHub Desktop.
A snippet for social sharing buttons in a Shopify theme. Notice the use of theme settings to show/hide each button.
{% comment %}
This snippet is used to showcase each collection during the loop,
'for product in collection.products' in list-collections.liquid.
{% endcomment %}
{% assign shareCountClass = '' %}
{% if template contains 'article' or template contains 'blog' %}
{% capture permalinkURL %}{{ shop.url }}{{ article.url }}{% endcapture %}
{% unless settings.social_sharing_count %}
{% assign shareCountClass = 'no-count' %}
{% endunless %}
{% elsif template contains 'product' %}
{% capture permalinkURL %}{{ shop.url }}{{ product.url }}{% endcapture %}
{% unless settings.social_sharing_count %}
{% assign shareCountClass = 'no-count' %}
{% endunless %}
{% endif %}
<div class="social-sharing {{ shareCountClass }}" data-permalink="{{ permalinkURL }}">
{% if settings.share_facebook %}
<a target="_blank" href="//www.facebook.com/sharer.php?u={{ permalinkURL }}" class="share-facebook">
<span class="icon icon-facebook"></span>
<span class="share-title">Share</span>
<span class="share-count">0</span>
</a>
{% endif %}
{% if settings.share_twitter %}
<a target="_blank" href="//twitter.com/share?url={{ permalinkURL }}" class="share-twitter">
<span class="icon icon-twitter"></span>
<span class="share-title">Tweet</span>
<span class="share-count">0</span>
</a>
{% endif %}
{% if template contains 'product' %}
{% if settings.share_pinterest %}
<a target="_blank" href="//pinterest.com/pin/create/button/?url={{ permalinkURL }}&amp;media={{ product.featured_image | product_img_url: 'original' }}&amp;description={{ product.title | escape }}" class="share-pinterest">
<span class="icon icon-pinterest"></span>
<span class="share-title">Pin it</span>
<span class="share-count">0</span>
</a>
{% endif %}
{% if settings.share_fancy %}
<a target="_blank" href="http://www.thefancy.com/fancyit?ItemURL={{ permalinkURL }}&amp;Title={{ product.title }}&amp;Category=Other&amp;ImageURL={{ product.featured_image | product_img_url: 'original' }}" class="share-fancy">
<span class="icon icon-fancy"></span>
<span class="share-title">Fancy</span>
</a>
{% endif %}
{% endif %}
{% if settings.share_google %}
<a target="_blank" href="//plus.google.com/share?url={{ permalinkURL }}" class="share-google">
<!-- Cannot get Google+ share count with JS yet -->
<span class="icon icon-google"></span>
<span class="share-count">+1</span>
</a>
{% endif %}
<li>
<a href="http://instagram.com/sharer.php?u='.$permalink.'&media='.$image.'&description='.$post_title.'" title="'.__('Share On Instagram', ETHEME_DOMAIN).'" target="_blank">
<i class="ico-instagram"></i>
<svg width="38" height="38" xmlns="http://www.w3.org/2000/svg" class="circle">
<circle cx="19" cy="19" r="18" fill="rgba(255,255,255,0)" stroke="#cda85c"></circle></svg>
</a>
</li>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment