social share

social share with js plugin

by John Doe

HTML

<div class="social">
Share:
</div>

CSS

.social{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
}
.social a{
    padding: 5px 5px 2px 5px;
    box-sizing: border-box;
    display: inline-block;
    margin-right: 3px;
    border-radius: 3px;
}
.social a:hover{
  opacity: 0.5
}
.social a svg {
    width: 15px;
    height: 15px;
}
.social a svg path, .social a svg path, .social a svg polygon{
  fill: #ffffff;
}
.social a.facebook{
  background-color: #3B5998;
}
.social a.twitter{
  background-color: #1A85BC;
}
.social a.gplus{
  background-color: #DC4A38;
}
.social a.email{
  background-color: #E70F10;
}

JavaScript

/*!
 * SocialLinksBuilder v1.0.0
 * A jQuery Plugin that builds the social links for you
 * also includes an email and telephone link
 *
 * Licensed MIT for open source use
 *
 * Copyright 2016 Tony Lopez
 */
$.fn.socialLinkBuilder = function(opts){
    var win = window;
    var bod = $('body');
    var soc = $(this);

    function excerptify(text, length){
        length = length || 140;
        var punc = ['.','!','?',',',';',':'];
        if(text.length > length) {
            var spaceAt = length;
            if(text.indexOf(' ') > -1){
                while(spaceAt--){
                    if(text.charAt(spaceAt) == ' ') break;
                }
            }
            var excerpt = text.substring(0, spaceAt);
            for (var i = punc.length - 1; i >= 0; i--) {
                if(excerpt.slice(-1) == punc[i]){
                    excerpt = excerpt.slice(0, -1);
                }
            }
            return excerpt.trim();
        } else {
            return text;
        }
    }

    opts = $.extend({
        url: win.location.href,
        title: bod.find('h1').filter( function(){
                  return ($.trim($(this).text()).length);
              }).first().text() || '',
        text: excerptify(bod.find('p').filter( function(){
                  return ($.trim($(this).text()).length);
              }).first().text()) || '',
        facebook: {
            isUsed: true
        },
        twitter: {
            isUsed: true
        },
        linkedin: {
            isUsed: true,
        },
        gplus: {
            isUsed: true
        },
        print: {
            isUsed: false,
        },
        email: {
            isUsed: false,
            mailto: '',
        },
        tel: {
            isUsed: false,
            tel: ''
        }
    }, opts);

    var social = '';

    if(opts.facebook.isUsed){
        var fbsvg = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="470.5" height="470.5" viewBox="0 0 470.5...