コピペで簡単! SNSボタンを設置 (SVGアイコン版) [2018/10版]

SNSボタンをコピペで簡単に設置する方法です。

SVGアイコンなので、テーマに画像ファイルが使えない、Bloggerなどのブログサービスでも使えます。

スポンサーリンク

完成イメージ

今回は、facebook, Twitter, はてなブックマーク, Pocket, Line の５つのボタンを配置します。

• PC表示

• スマホ表示

サンプルコード

• HTML

<div class="sns-button">
  <ul class="clearfix">
    <li class="facebook">
      <a href="#" data-dialog-w="600">
        <svg aria-hidden="true" data-prefix="fab" data-icon="facebook-f" class="svg-inline--fa fa-facebook-f fa-w-9" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 512"><path class="fill" d="M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229"></path></svg>
      </a>
    </li>
    <li class="twitter">
      <a href="#" data-dialog-w="600">
        <svg aria-hidden="true" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="fill" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
      </a>
    </li>
    <li class="hatebu">
      <a href="#" data-dialog-w="1000">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 355.004 300"><g><path class="fill" d="M280.009,0h70v200.005h-70V0z" /><path class="fill" d="M215.192,160.596c-11.844-13.239-28.314-20.683-49.443-22.288 c18.795-5.122,32.443-12.616,41.077-22.628c8.593-9.88,12.856-23.292,12.856-40.171c0-13.362-2.922-25.184-8.579-35.397 c-5.805-10.152-14.14-18.276-25.102-24.357c-9.586-5.274-20.98-8.994-34.262-11.188c-13.349-2.126-36.709-3.198-70.231-3.198H0 V298.63h83.976c33.737,0,58.064-1.182,72.94-3.441c14.863-2.337,27.334-6.27,37.428-11.662 c12.484-6.587,22.007-15.964,28.662-28.01c6.698-12.085,10.014-26.02,10.014-41.956 C233.017,191.514,227.079,173.798,215.192,160.596z M75.26,67.27h17.398c20.108,0,33.617,2.267,40.59,6.787 c6.877,4.542,10.388,12.38,10.388,23.547c0,10.745-3.733,18.313-11.118,22.751c-7.483,4.354-21.117,6.562-41.079,6.562H75.26 V67.27z M144.276,237.733c-7.916,4.862-21.557,7.251-40.696,7.251H75.265v-64.949h29.54c19.654,0,33.243,2.475,40.469,7.414 c7.343,4.942,10.955,13.665,10.955,26.191C156.226,224.85,152.263,232.899,144.276,237.733z" /><path class="fill" d="M315.014,220.003c-22.101,0-40.002,17.891-40.002,39.991 c0,22.1,17.902,40.006,40.002,40.006c22.072,0,39.99-17.906,39.99-40.006C355.004,237.894,337.088,220.003,315.014,220.003z" /></g></svg>
      </a>
    </li>
    <li class="pocket">
      <a href="#" data-dialog-w="600">
        <svg aria-hidden="true" data-prefix="fab" data-icon="get-pocket" class="svg-inline--fa fa-get-pocket fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="fill" d="M407.6 64h-367C18.5 64 0 82.5 0 104.6v135.2C0 364.5 99.7 464 224.2 464c124 0 223.8-99.5 223.8-224.2V104.6c0-22.4-17.7-40.6-40.4-40.6zm-162 268.5c-12.4 11.8-31.4 11.1-42.4 0C89.5 223.6 88.3 227.4 88.3 209.3c0-16.9 13.8-30.7 30.7-30.7 17 0 16.1 3.8 105.2 89.3 90.6-86.9 88.6-89.3 105.5-89.3 16.9 0 30.7 13.8 30.7 30.7 0 17.8-2.9 15.7-114.8 123.2z"></path></svg>
      </a>
    </li>
    <li class="line">
      <a href="#" data-dialog-w="600">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 315 300"><defs><style>.fill_line{fill:#00c300}</style></defs><g><path class="fill" d="M280.344,206.351 C280.344,206.351 280.354,206.351 280.354,206.351 C247.419,244.375 173.764,290.686 157.006,297.764 C140.251,304.844 142.724,293.258 143.409,289.286 C143.809,286.909 145.648,275.795 145.648,275.795 C146.179,271.773 146.725,265.543 145.139,261.573 C143.374,257.197 136.418,254.902 131.307,253.804 C55.860,243.805 0.004,190.897 0.004,127.748 C0.004,57.307 70.443,-0.006 157.006,-0.006 C243.579,-0.006 314.004,57.307 314.004,127.748 C314.004,155.946 303.108,181.342 280.344,206.351 Z" /><path class="fill_line" d="M253.185,121.872 C257.722,121.872 261.408,125.569 261.408,130.129 C261.408,134.674 257.722,138.381 253.185,138.381
          C253.185,138.381 230.249,138.381 230.249,138.381 C230.249,138.381 230.249,153.146 230.249,153.146 C230.249,153.146 253.185,153.146 253.185,153.146 C257.710,153.146 261.408,156.851 261.408,161.398 C261.408,165.960 257.710,169.660 253.185,169.660 C253.185,169.660 222.018,169.660 222.018,169.660 C217.491,169.660 213.795,165.960 213.795,161.398 C213.795,161.398 213.795,130.149 213.795,130.149 C213.795,130.139 213.795,130.139 213.795,130.129 C213.795,130.129 213.795,130.114 213.795,130.109 C213.795,130.109 213.795,98.878 213.795,98.878 C213.795,98.858 213.795,98.850 213.795,98.841 C213.795,94.296 217.486,90.583 222.018,90.583 C222.018,90.583 253.185,90.583 253.185,90.583 C257.722,90.583 261.408,94.296 261.408,98.841 C261.408,103.398 257.722,107.103 253.185,107.103 C253.185,107.103 230.249,107.103 230.249,107.103 C230.249,107.103 230.249,121.872 230.249,121.872 C230.249,121.872 253.185,121.872 253.185,121.872 ZM202.759,161.398 C202.759,164.966 200.503,168.114 197.135,169.236 C196.291,169.521 195.405,169.660 194.526,169.660 C191.956,169.660 189.502,168.431 187.956,166.354 C187.956,166.354 156.012,122.705 156.012,122.705 C156.012,122.705 156.012,161.398 156.012,161.398 C156.012,165.960 152.329,169.660 147.791,169.660 C143.256,169.660 139.565,165.960 139.565,161.398 C139.565,161.398 139.565,98.841 139.565,98.841 C139.565,95.287 141.829,92.142 145.192,91.010 C146.036,90.730 146.915,90.583 147.799,90.583 C150.364,90.583 152.828,91.818 154.366,93.894 C154.366,93.894 186.310,137.559 186.310,137.559 C186.310,137.559 186.310,98.841 186.310,98.841 C186.310,94.296 190.000,90.583 194.536,90.583 C199.073,90.583 202.759,94.296 202.759,98.841 C202.759,98.841 202.759,161.398 202.759,161.398 ZM127.737,161.398 C127.737,165.960 124.051,169.660 119.519,169.660 C114.986,169.660 111.300,165.960 111.300,161.398 C111.300,161.398 111.300,98.841 111.300,98.841 C111.300,94.296 114.986,90.583 119.519,90.583 C124.051,90.583 127.737,94.296 127.737,98.841 C127.737,98.841 127.737,161.398 127.737,161.398 ZM95.507,169.660 C95.507,169.660 64.343,169.660 64.343,169.660 C59.816,169.660 56.127,165.960 56.127,161.398 C56.127,161.398 56.127,98.841 56.127,98.841 C56.127,94.296 59.816,90.583 64.343,90.583 C68.881,90.583 72.564,94.296 72.564,98.841 C72.564,98.841 72.564,153.146 72.564,153.146 C72.564,153.146 95.507,153.146 95.507,153.146 C100.047,153.146 103.728,156.851 103.728,161.398 C103.728,165.960 100.047,169.660 95.507,169.660 Z" /></g></svg>
      </a>
    </li>
  </ul>
</div>

• CSS

.sns-button {
  margin:10px auto;
  text-align:center;
}
.sns-button ul {
  list-style:none !important;
  padding: initial !important;
  margin: 0;
}
.sns-button ul li {
  float:left;
  box-sizing: border-box;
  width: 19.88%;
  height: 36px;
  padding: 0 1px;
  list-style:none !important;
  text-align: center;
}
.sns-button ul li a {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
}
.sns-button li.facebook a {
  background: #3B5998;
}
.sns-button li.twitter a {
  background: #55acee;
}
.sns-button li.hatebu a {
  background: #00A4DE;
}
.sns-button li.pocket a {
  background: #E63F4F;
}
.sns-button li.line a {
  background: #00c300;
}
.sns-button svg {
  width: 30px;
  height: 20px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.sns-button svg .fill {
  fill: #ffffff;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.sns-button ul li:after,
.sns-button ul li:before {
  background: none;
  border-radius: 0;
}

• Javascirpt

;(function() {

  //シェアするURL (現在のページのURL) 
  var shareUrl = window.location.href;

  //ページの概要 (現在のページのタイトル)  ※ここは、好みに合わせて変更して下さい
  var description = document.title;

  //ロード時に、各SNSボタンのURLを設定します
  document.addEventListener('DOMContentLoaded', function () {
    var params = [shareUrl, description];
    setUrl("facebook", "https://www.facebook.com/sharer/sharer.php?u={0}&t={1}", params);
    setUrl("twitter", "https://twitter.com/share?url={0}&text={1}", params);
    setUrl("hatebu", "http://b.hatena.ne.jp/entry/{0}", params);
    setUrl("pocket", "http://getpocket.com/edit?url={0}&title={1}", params);
    setUrl("line", "https://social-plugins.line.me/lineit/share?url={0}", params);      
  });

  //リンクにURLを設定する
  function setUrl(type, url, params) {
    var element = document.querySelector(".sns-button ." + type + " a");
    if (element) {
      element.href = url.replace(/(\{[0-9]+\})/g, function (all, g1, p, s) {
        return encodeURIComponent(params[ parseInt(g1.substr(1, g1.length - 2), 10) ]);
      });
      element.addEventListener("click", function(e) { return openShare(e, type, element) });
    }
  }

  //SNSボタンがクリックされたら、各SNSのシャア画面を開く
  function openShare(e, type, element) {
    var shareUrl = element.href;
    var w = parseInt(element.getAttribute("data-dialog-w"), 10);
    window.open(shareUrl, type + "_win", 'width=' + w + ', height=600, personalbar=0, toolbar=0, scrollbars=1');
    e.preventDefault();
    return false;
  }

})(window);

参考にしたサイト

UNORTHODOX WORKBOOK
https://theorthodoxworks.com/web-design/sns-logo-icon-svg-down-load/

WebサイトにSNSシェアボタンを設置＆効果測定する方法のまとめ
https://qiita.com/imotoy/items/b7467d5cc869c69b6275