如何外包此文件

Question

我正在尝试使用以下代码添加社交按钮，但我可以将其外包到js文件中，因为按钮停止工作： 但是当然没有问题的css代码。 第一部分是javascript 第二个是css 最后一个是html

当所有脚本都在html页面中时，它可以正常工作。

你能帮忙吗？：

var wSize = "width=600,height=460",
    loc = encodeURIComponent(window.location.href),
    title = "share",
    // Sharer URLs
    fb = "https://www.facebook.com/sharer/sharer.php?u=", // 0. Facebook
    tw = "https://twitter.com/share?url=", // Twitter (separate function)
    gp = "https://plus.google.com/share?url=", // 1. Google+
    tb = "http://www.tumblr.com/share?v=3&u=", // 2. Tumblr
    rd = "http://reddit.com/submit?url=", // 3. Reddit
    li = "http://www.linkedin.com/shareArticle?mini=true&url=", // 4. LinkedIn
    su = "http://www.stumbleupon.com/submit?url=", // 5. StumbleUpon
    digg = "http://www.diggo.com/submit?url=", // 6. Digg
    pt = "http://pinterest.com/pin/create/button/?url=", // 7. Pinterest
    // Twitter custom texts
    text = $(this).attr('data-title'),
    hashtag = "hashtags=" + $(this).attr('data-tags'),
    via = "via=frenchspanish",
    // URLs array
    url = [fb, gp, tb, rd, li, su, digg, pt];
function share(i) {
    "use strict";
    window.open(url[i] + loc, title, wSize);
}
function twitter() {
    "use strict";
    window.open(tw + loc + "&" + text + "&" + hashtag + "&" + via, title, wSize);
}

ShareWrapper {
    position: absolute;
    bottom: 40%;
    background-color:white;
    z-index:20;
    left: -50px;
}
.Share {
    position: fixed;
    top: 20%
}
.ShareIcon {
    margin-left: 15px;
    vertical-align: middle;
    line-height: 30px;
}
.Share a{
    display:block;
}
.socialLinks ul{
    margin:0;
    padding:0
}
.socialLinks ul li{
    list-style-type:none;
}


a.social-button {
    
    width: 30px;
    height: 30px;
    border-radius: 15px;
    line-height: 30px;
    margin: 4px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: #f0f0f0;
    overflow: hidden;
    padding: 0px;
}

    a.social-button:hover {
        text-decoration: none;
    }

    a.social-button.twitter-button {
        background-color: #4099ff;
    }

        /*a.social-button.twitter-button:before {
            content: 't';
        }*/

        a.social-button.twitter-button:hover {
            background-color: #303030;
        }

    a.social-button.facebook-button {
        background-color: #3b5998;
    }

     
        a.social-button.facebook-button:hover {
            background-color: #303030;
        }

    a.social-button.googleplus-button {
        background-color: #dd4b39;
    }


        a.social-button.googleplus-button:hover {
            background-color: #303030;
        }

    a.social-button.pinterest-button {
        background-color: #c8232c;
    }

      
        a.social-button.pinterest-button:hover {
            background-color: #303030;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" ShareWrapper">
            
          <div class="Share">
            
              <a href="javascript:void(0)" class="ShareIcon" title="Share"><i class="fa fa-share social-button"></i></a>
              <a href="javascript:void(0)" onclick="twitter()" data-title="Title" data-tags="Tags" title="Share on Twitter" class="social-button twitter-button"> <i class="fa fa-twitter"></i></a>
              <a href="javascript:void(0)" title="Share on Facebook" onclick="share(0)" class="social-button facebook-button"> <i class="fa fa-facebook"></i></a>
              <a href="javascript:void(0)" title="Share on Google plus" onclick="share(1)" class="social-button googleplus-button"><i class="fa fa-google-plus"></i></a>
              <a href="javascript:void(0)" onclick="share(7)" class="social-button pinterest-button" title="Share on Pinterest"><i class="fa fa-pinterest"></i></a>
              <a href="javascript:void(0)" onclick="share(3)" class="social-button reddit-button" title="Share on Reddit">
                  <i class="fa fa-reddit-alien"></i>
              </a>

              <!-- StumbleUpon-->
              <a href="javascript:void(0)" onclick="share(5)" class="social-button stumbleupon-button" title="Share on Stumbleupon">
                  <i class="fa fa-stumbleupon"></i>
              </a>

              <a href="javascript:void(0)" onclick="share(4)" class="social-button facebook-button" title="Share on LinkedIn">
                  <i class="fa fa-linkedin"></i>
              </a>
         </div>
              </div>