Custom social widget for Shopify using SymbolSet Social Icon fonts

settings_schema.json

{
  "name": "Socializer",
  "settings": [
    {
      "default": "disabled",
      "id": "socializer_style",
      "label": "Select social icons style",
      "options": [
        {
          "label": "Disabled",
          "value": "disabled"
        },
        {
          "label": "Standard",
          "value": "standard"
        },
        {
          "label": "Custom Icons",
          "value": "custom"
        }
      ],
      "type": "select"
    },
    {
      "id": "socializer_enable_pin",
      "label": "Enable Pinterest for Products",
      "type": "checkbox"
    },
    {
      "id": "socializer_enable_fb",
      "label": "Enable Facebook for Products",
      "type": "checkbox"
    },
    {
      "id": "socializer_enable_tweet",
      "label": "Enable Twitter for Products",
      "type": "checkbox"
    },
    {
      "id": "socializer_enable_google",
      "label": "Enable GooglePlus for Products",
      "type": "checkbox"
    }
  ]
}

socializer-scripts.liquid

{% comment %}
pinterest docs: https://developers.pinterest.com/docs/widgets/save/?
google docs: https://developers.google.com/+/web/share/
fb docs: https://developers.facebook.com/docs/sharing/reference/share-dialog
tweet docs: https://dev.twitter.com/web/tweet-button
            https://dev.twitter.com/web/tweet-button/web-intent
{% endcomment %}
{% if settings.socializer_style == "standard" %}
  {% if settings.socializer_enable_pin == true %}
  <script src="https://assets.pinterest.com/js/pinit.js" async defer></script>
  {% endif %}
  {% if settings.socializer_enable_tweet == true %}
  <script src="https://platform.twitter.com/widgets.js" async defer></script>
  {% endif %}
  {% if settings.socializer_enable_google == true %}
  <script src="https://apis.google.com/js/platform.js" async defer></script>
  {% endif %}
  {% if settings.socializer_enable_fb == true %}
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
  {% endif %}
{% elsif settings.socializer_style == "custom" %}
<script type="text/javascript">
  $('.socializer.custom a').click(function(e){
    var url = $(this).attr('href');
    window.open(url,'','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');
    return false; 
  });
</script>
{% endif %}

socializer.liquid

{% assign productUrl = shop.url | append: product.url %}
{% assign productDescr = product.title %}
{% assign productImg = product.images[0] | product_img_url: 'original' | prepend: 'https:' %}
{% if settings.socializer_style == "standard" %}
<div class="socializer">
  {% if settings.socializer_enable_pin == true %}
  <a href="https://www.pinterest.com/pin/create/button/"
    data-pin-do="buttonPin"
    data-pin-custom="true"
    data-pin-save="false"
    data-pin-url="{{ productUrl }}"
    data-pin-description="{{ productDescr }}"
    data-pin-media="{{ productImg }}">
    <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
  </a>
  {% endif %}
  {% if settings.socializer_enable_fb == true %}
  <div class="fb-like" data-href="{{ productUrl }}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
  {% endif %}
  {% if settings.socializer_enable_tweet == true %}
  <a class="twitter-share-button"
    href="https://twitter.com/intent/tweet?text={{ productDescr | url_param_escape }}">Tweet</a>
  {% endif %}
  {% if settings.socializer_enable_google == true %}
  <div class="g-plus" data-action="share" data-annotation="bubble" data-href="{{ productUrl }}"></div>
  {% endif %}
</div>
{% elsif settings.socializer_style == "custom" %}
<div class="socializer custom">
  {% if settings.socializer_enable_pin == true %}
  <a data-pin-custom="true" href="https://www.pinterest.com/pin/create/button/?url={{ productUrl | url_encode }}&media={{ productImg | url_encode }}&description={{ productDescr | url_param_escape }}"><i class="ss-pinterest"></i></a>
  {% endif %}
  {% if settings.socializer_enable_fb == true %}
  <a href="https://www.facebook.com/sharer/sharer.php?u={{ productUrl | url_encode }}"><i class="ss-facebook"></i></a>
  {% endif %}
  {% if settings.socializer_enable_tweet == true %}
  <a href="https://twitter.com/intent/tweet?text={{ productDescr | url_param_escape }}&url={{ productUrl | url_encode }}"><i class="ss-twitter"></i></a>
  {% endif %}
  {% if settings.socializer_enable_google == true %}
  <a href="https://plus.google.com/share?url={{ productUrl | url_encode }}"><i class="ss-googleplus"></i></a>
  {% endif %}
</div>
{% endif %}

socializer.scss

.socializer {
  &.custom {
    a { text-decoration: none; font-size: 2em; cursor: pointer; }
  }
  margin:0 20px {{ settings.line_height }}em;
  > * {
    display: inline-block !important;
    vertical-align: middle !important;
  }
}