Skip to content

Instantly share code, notes, and snippets.

@rickydazla

rickydazla/settings_schema.json

Created April 10, 2017 15:16
Show Gist options
  • Save rickydazla/0289f663ef17d98de73eb85c2a9b5997 to your computer and use it in GitHub Desktop.
Save rickydazla/0289f663ef17d98de73eb85c2a9b5997 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @trajce trajce revised this gist Apr 5, 2017. 5 changed files with 131 additions and 68 deletions.
    45 changes: 45 additions & 0 deletions settings_schema.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    {
    "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"
    }
    ]
    }
    36 changes: 36 additions & 0 deletions socializer-scripts.liquid
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    {% 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 %}
    8 changes: 0 additions & 8 deletions socializer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +0,0 @@
    <div class="addthis_toolbox" addthis:url="{{ shop.url }}{{ product.url }}" addthis:title="{{ page_title }} | {{ shop.name }}" addthis:description="{{ page_description }}">
    <div class="tricky-sharing">
    <a class="addthis_button_facebook"><i class="ss-facebook"></i></a>
    <a class="addthis_button_twitter"><i class="ss-twitter"></i></a>
    <a class="addthis_button_pinterest ss-icon ss-pinterest" pi:pinit:media="{{ product.images[0] | product_img_url: '1024x1024' }}"></a>
    <!-- you can also try addthis_button_pinterest_share if above doesn't work! -->
    </div>
    </div>
    43 changes: 43 additions & 0 deletions socializer.liquid
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    {% 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 %}
    67 changes: 7 additions & 60 deletions socializer.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,63 +1,10 @@
    /* just for the fun of it */
    @mixin transition($transition-property, $transition-time, $method) {
    -webkit-transition: $transition-property $transition-time $method;
    -moz-transition: $transition-property $transition-time $method;
    -ms-transition: $transition-property $transition-time $method;
    -o-transition: $transition-property $transition-time $method;
    transition: $transition-property $transition-time $method;
    }

    %thereset {
    clear: both;
    display: inline-block;
    float: none !important;
    line-height: normal;
    padding: 0 !important;
    position: relative;
    width: auto !important;
    text-decoration: none;
    white-space:normal;
    }

    $theSocialShare_FontSize : 24px;
    $theSocialShare_Height : $theSocialShare_FontSize + 4px; /* for Symbol Set */
    $theSocialShare_Color : #7f7f7f;
    $theSocialShare_HoverColor : #ff3300;
    $theSocialShare_Distance : 5px;

    .addthis_toolbox{@extend %thereset;}

    .tricky-sharing{
    a{
    @extend %thereset;
    @include transition(color, 0.2s, ease-in-out);
    color:$theSocialShare_Color;
    font-size:$theSocialShare_FontSize;
    width: $theSocialShare_FontSize;
    margin-right: $theSocialShare_Distance;
    height: $theSocialShare_Height;
    cursor:pointer;
    &:hover {
    color:$theSocialShare_HoverColor;
    }

    &:last-child {
    margin-right: 0;
    }
    .socializer {
    &.custom {
    a { text-decoration: none; font-size: 2em; cursor: pointer; }
    }
    .addthis_button_pinterest, .addthis_button_pinterest_share{ // try both!
    iframe, .pin_it_iframe_widget, span { // this covers either / or ^
    height: $theSocialShare_Height !important;
    width: $theSocialShare_FontSize !important;
    left: 0;
    opacity: 0;
    filter:alpha(opacity=0);
    position: absolute;
    top: 0;
    z-index: 1;
    }
    }
    i{
    display: block;
    margin:0 20px {{ settings.line_height }}em;
    > * {
    display: inline-block !important;
    vertical-align: middle !important;
    }
    }
  2. @trajce trajce revised this gist Mar 24, 2017. 2 changed files with 0 additions and 0 deletions.
    0 addthis_shopify.html → socializer.html
    View file
    File renamed without changes.
    0 mangled.scss → socializer.scss
    View file
    File renamed without changes.
  3. rickydazla revised this gist Jan 4, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions mangled.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -45,8 +45,8 @@ $theSocialShare_Distance : 5px;
    margin-right: 0;
    }
    }
    .addthis_button_pinterest, .addthis_button_pinterest{ // try both!
    iframe, .pin_it_iframe_widget, span { // this covers either ^
    .addthis_button_pinterest, .addthis_button_pinterest_share{ // try both!
    iframe, .pin_it_iframe_widget, span { // this covers either / or ^
    height: $theSocialShare_Height !important;
    width: $theSocialShare_FontSize !important;
    left: 0;
  4. rickydazla revised this gist Jan 4, 2017. No changes.
  5. rickydazla revised this gist Jan 4, 2017. 2 changed files with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion addthis_shopify → addthis_shopify.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,5 +4,5 @@
    <a class="addthis_button_twitter"><i class="ss-twitter"></i></a>
    <a class="addthis_button_pinterest ss-icon ss-pinterest" pi:pinit:media="{{ product.images[0] | product_img_url: '1024x1024' }}"></a>
    <!-- you can also try addthis_button_pinterest_share if above doesn't work! -->
    </div>
    </div>
    </div>
    0 mangled.scss.liquid → mangled.scss
    View file
    File renamed without changes.
  6. rickydazla revised this gist Jan 4, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion addthis_shopify
    View file
    Original file line number Diff line number Diff line change
    @@ -4,5 +4,5 @@
    <a class="addthis_button_twitter"><i class="ss-twitter"></i></a>
    <a class="addthis_button_pinterest ss-icon ss-pinterest" pi:pinit:media="{{ product.images[0] | product_img_url: '1024x1024' }}"></a>
    <!-- you can also try addthis_button_pinterest_share if above doesn't work! -->
    </div>
    </div>
    </div>
  7. rickydazla revised this gist Jan 4, 2017. 2 changed files with 4 additions and 3 deletions.
    3 changes: 2 additions & 1 deletion addthis_shopify
    View file
    Original file line number Diff line number Diff line change
    @@ -3,5 +3,6 @@
    <a class="addthis_button_facebook"><i class="ss-facebook"></i></a>
    <a class="addthis_button_twitter"><i class="ss-twitter"></i></a>
    <a class="addthis_button_pinterest ss-icon ss-pinterest" pi:pinit:media="{{ product.images[0] | product_img_url: '1024x1024' }}"></a>
    </div>
    <!-- you can also try addthis_button_pinterest_share if above doesn't work! -->
    </div>
    </div>
    4 changes: 2 additions & 2 deletions mangled.scss.liquid
    View file
    Original file line number Diff line number Diff line change
    @@ -45,8 +45,8 @@ $theSocialShare_Distance : 5px;
    margin-right: 0;
    }
    }
    .addthis_button_pinterest{
    iframe, .pin_it_iframe_widget {
    .addthis_button_pinterest, .addthis_button_pinterest{ // try both!
    iframe, .pin_it_iframe_widget, span { // this covers either ^
    height: $theSocialShare_Height !important;
    width: $theSocialShare_FontSize !important;
    left: 0;
  8. rickydazla revised this gist Jan 3, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion mangled.scss.liquid
    View file
    Original file line number Diff line number Diff line change
    @@ -46,7 +46,7 @@ $theSocialShare_Distance : 5px;
    }
    }
    .addthis_button_pinterest{
    iframe {
    iframe, .pin_it_iframe_widget {
    height: $theSocialShare_Height !important;
    width: $theSocialShare_FontSize !important;
    left: 0;
  9. rickydazla revised this gist Mar 29, 2016. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion addthis_shopify
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    <div class="addthis_toolbox" addthis:url="{{ shop.url }}{{ product.url }}" addthis:title="{{ page_title }} | {{ shop.name }}" addthis:description="{{ page_description }}">
    <div class="tricky_custom">
    <div class="tricky-sharing">
    <a class="addthis_button_facebook"><i class="ss-facebook"></i></a>
    <a class="addthis_button_twitter"><i class="ss-twitter"></i></a>
    <a class="addthis_button_pinterest ss-icon ss-pinterest" pi:pinit:media="{{ product.images[0] | product_img_url: '1024x1024' }}"></a>
    2 changes: 1 addition & 1 deletion mangled.scss.liquid
    View file
    Original file line number Diff line number Diff line change
    @@ -27,7 +27,7 @@ $theSocialShare_Distance : 5px;

    .addthis_toolbox{@extend %thereset;}

    .tricky_custom{
    .tricky-sharing{
    a{
    @extend %thereset;
    @include transition(color, 0.2s, ease-in-out);
  10. rickydazla revised this gist Jan 13, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion addthis_shopify
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    <div class="addthis_toolbox" addthis:url="{{ shop.url }}{{ product.url }}" addthis:title="{{ page_title }} | BonMot" addthis:description="{{ page_description }}">
    <div class="addthis_toolbox" addthis:url="{{ shop.url }}{{ product.url }}" addthis:title="{{ page_title }} | {{ shop.name }}" addthis:description="{{ page_description }}">
    <div class="tricky_custom">
    <a class="addthis_button_facebook"><i class="ss-facebook"></i></a>
    <a class="addthis_button_twitter"><i class="ss-twitter"></i></a>
  11. rickydazla revised this gist Feb 12, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion mangled.scss.liquid
    View file
    Original file line number Diff line number Diff line change
    @@ -36,7 +36,7 @@ $theSocialShare_Distance : 5px;
    width: $theSocialShare_FontSize;
    margin-right: $theSocialShare_Distance;
    height: $theSocialShare_Height;

    cursor:pointer;
    &:hover {
    color:$theSocialShare_HoverColor;
    }
  12. rickydazla revised this gist Oct 21, 2014. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions addthis_shopify
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    <div class="addthis_toolbox" addthis:url="{{ shop.url }}{{ product.url }}">
    <div class="custom_images">
    <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
    <a class="addthis_button_tweet"></a>
    <a class="addthis_button_pinterest_pinit" pi:pinit:url="{{ shop.url }}{{ product.url }}" pi:pinit:media="{{ product.images[0] | product_img_url:'original' }}" ></a>
    <div class="addthis_toolbox" addthis:url="{{ shop.url }}{{ product.url }}" addthis:title="{{ page_title }} | BonMot" addthis:description="{{ page_description }}">
    <div class="tricky_custom">
    <a class="addthis_button_facebook"><i class="ss-facebook"></i></a>
    <a class="addthis_button_twitter"><i class="ss-twitter"></i></a>
    <a class="addthis_button_pinterest ss-icon ss-pinterest" pi:pinit:media="{{ product.images[0] | product_img_url: '1024x1024' }}"></a>
    </div>
    </div>
  13. rickydazla revised this gist Oct 21, 2014. 2 changed files with 70 additions and 5 deletions.
    12 changes: 7 additions & 5 deletions addthis_shopify
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,7 @@
    <div class="addthis_toolbox addthis_default_style" addthis:url="{{ shop.url }}{{ product.url }}">
    <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
    <a class="addthis_button_tweet"></a>
    <a class="addthis_button_pinterest_pinit" pi:pinit:url="{{ shop.url }}{{ product.url }}" pi:pinit:media="{{ product.images[0] | product_img_url:'original' }}" ></a>
    </div>
    <div class="addthis_toolbox" addthis:url="{{ shop.url }}{{ product.url }}">
    <div class="custom_images">
    <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
    <a class="addthis_button_tweet"></a>
    <a class="addthis_button_pinterest_pinit" pi:pinit:url="{{ shop.url }}{{ product.url }}" pi:pinit:media="{{ product.images[0] | product_img_url:'original' }}" ></a>
    </div>
    </div>
    63 changes: 63 additions & 0 deletions mangled.scss.liquid
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,63 @@
    /* just for the fun of it */
    @mixin transition($transition-property, $transition-time, $method) {
    -webkit-transition: $transition-property $transition-time $method;
    -moz-transition: $transition-property $transition-time $method;
    -ms-transition: $transition-property $transition-time $method;
    -o-transition: $transition-property $transition-time $method;
    transition: $transition-property $transition-time $method;
    }

    %thereset {
    clear: both;
    display: inline-block;
    float: none !important;
    line-height: normal;
    padding: 0 !important;
    position: relative;
    width: auto !important;
    text-decoration: none;
    white-space:normal;
    }

    $theSocialShare_FontSize : 24px;
    $theSocialShare_Height : $theSocialShare_FontSize + 4px; /* for Symbol Set */
    $theSocialShare_Color : #7f7f7f;
    $theSocialShare_HoverColor : #ff3300;
    $theSocialShare_Distance : 5px;

    .addthis_toolbox{@extend %thereset;}

    .tricky_custom{
    a{
    @extend %thereset;
    @include transition(color, 0.2s, ease-in-out);
    color:$theSocialShare_Color;
    font-size:$theSocialShare_FontSize;
    width: $theSocialShare_FontSize;
    margin-right: $theSocialShare_Distance;
    height: $theSocialShare_Height;

    &:hover {
    color:$theSocialShare_HoverColor;
    }

    &:last-child {
    margin-right: 0;
    }
    }
    .addthis_button_pinterest{
    iframe {
    height: $theSocialShare_Height !important;
    width: $theSocialShare_FontSize !important;
    left: 0;
    opacity: 0;
    filter:alpha(opacity=0);
    position: absolute;
    top: 0;
    z-index: 1;
    }
    }
    i{
    display: block;
    }
    }
  14. rickydazla created this gist Sep 4, 2012.
    5 changes: 5 additions & 0 deletions addthis_shopify
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <div class="addthis_toolbox addthis_default_style" addthis:url="{{ shop.url }}{{ product.url }}">
    <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
    <a class="addthis_button_tweet"></a>
    <a class="addthis_button_pinterest_pinit" pi:pinit:url="{{ shop.url }}{{ product.url }}" pi:pinit:media="{{ product.images[0] | product_img_url:'original' }}" ></a>
    </div>