こんな簡単？SNSシェアボタンの設置とカスタマイズまとめ[LINE/Twitter/Facebook/etc]

2020/01/21

web

「SNS シェアボタンを設置したい。」
「デザインもこだわりたい」

この記事はそんな方に向けて書いています。

どうもー。WEB 業界 11 年目のガッチ（@gatchsite）です。

この記事では、各 SNS へシェアするための url や、パラメータをまとめています。

コピー機能なんかも意外と喜ばれるので、気になる方は使ってみください。

記事の内容はこちら

SNS シェアボタンって？

WEB サイトを使っていると Facebook や Twitter のアイコンをみたことないですか？
まさにそのアイコンが「SNS シェアボタン」です。

ガッチサイトでも、記事の上下に設置しているボタンが「SNS シェアボタン」です。

↑ こんな感じのやつですね。

SNS シェアボタンは、各サービスごとにシェアするための API が公開されているので、API を使った設置方法を紹介していきます。

API と言っても、HTML の a タグの href 属性に URL を指定するだけの簡単な方法なので心配無用です。笑

各 SNS サービスのシェアボタン設置方法

サービス毎の URL やパラメータまとめです。

サンプルの HTML では「fontawesome」という無料のアイコンサービスを使用しています。

wordpress など多くの CMS に採用されいているアイコンのため、すでに読み込んでいる場合もあります。

Facebook のシェアボタン

Facebook は以下の URL に、ページの URL を指定することで設置できます。

URL
https://www.facebook.com/sharer/sharer.php?u=[PAGE_URL]

[PAGE_URL]
シェアしたい URL を指定

<a href="https://www.facebook.com/sharer/sharer.php?u=[PAGE_URL]" target="_blank"
  ><i class="fa fa-facebook fa-big"></i
></a>

Twitter のシェアボタン

Twitter は以下の URL に、ページの URL を指定することで設置できます。

URL
https://twitter.com/intent/tweet?url=[PAGE_URL]&text=[PAGE_TITLE]

[PAGE_URL]
シェアしたい URL を指定

[PAGE_TITLE]
シェアしたいページのタイトルを指定

<a href="https://twitter.com/intent/tweet?url=[PAGE_URL]&text=[PAGE_TITLE]" target="_blank"
  ><i class="fa fa-twitter fa-big"></i
></a>

LINE のシェアボタン

LINE は以下の URL に、ページの URL を指定することで設置できます。

※PC でシェアボタンを押された場合、アプリは起動せずブラウザでログインする方法になります。

URL
http://line.me/R/msg/text/?[PAGE_TITLE][PAGE_URL]
※テキストを送信するだけの機能のため URL もテキストとして送信します。
※[PAGE_TITLE][page_url]の間に改行コードの\nを入れるといい感じに整形できます。

[PAGE_URL]
シェアしたい URL を指定

[PAGE_TITLE]
シェアしたいページのタイトルを指定

<a href="http://line.me/R/msg/text/?[PAGE_Title][PAGE_URL]" target="_blank">LINE</a>

はてなブックマークのボタン

はてなブックマークは以下の URL に、ページの URL を指定することで設置できます。

URL
http://b.hatena.ne.jp/add?mode=confirm&url=[PAGE_URL]&title=[PAGE_TITLE]

[PAGE_URL]
シェアしたい URL を指定

[PAGE_TITLE]
シェアしたいページのタイトルを指定

<a href="http://b.hatena.ne.jp/add?mode=confirm&url=[PAGE_URL]&title=[PAGE_TITLE]" target="_blank">B!</a>

Pocket のボタン

Pocket は以下の URL に、ページの URL を指定することで設置できます。

URL
http://getpocket.com/edit?url=[PAGE_URL]&title=[PAGE_TITLE]

[PAGE_URL]
シェアしたい URL を指定

[PAGE_TITLE]
シェアしたいページのタイトルを指定

<a href="http://getpocket.com/edit?url=[PAGE_URL]&title=[PAGE_TITLE]" target="_blank"
  ><i class="fa fa-get-pocket fa-big"></i
></a>

タイトルと URL をコピーするボタン

「意外とあると便利で嬉しい。」 じみ〜な機能かなと思います。

LINE なんかで送りたい時に、送る人間違えたらいけないと思ってコピーして貼り付ける方法をとっていたりします。笑

コピーするために JavaScript のclipboardjsを使用します。

clipboardjs の CDNより script タグをコピーしてきます。
タグを head 内に貼り付けます。
new ClipboardJS('[CLASS_NAME]'); を実行して、コピーしたいテキストの HTML を指定します。
ボタンの場合は、HTML タグに data-clipboard-text 属性を追加して、タイトルや URL を指定します。

[CLASS_NAME]
ClipboardJS で指定するクラス名を HTML タグにも指定しておきます。

[PAGE_URL]
シェアしたい URL を指定

[PAGE_TITLE]
シェアしたいページのタイトルを指定

<a class="[CLASS_NAME]" data-clipboard-text="[PAGE_TITLE][PAGE_URL]"><i class="fa fa-clipboard"></i> copy</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    new ClipboardJS('[CLASS_NAME]')
  })
</script>

SNS シェアボタンをカスタマイズする

SNS シェアボタンをボタンらしくカスタマイズする方法を紹介します。

SNS シェアボタンを横並びに設置する

横並びにするには、CSS のdisplay:flex;を使用します。

レスポンシブに対応するには flex の動作を覚えるのが近道。この機会にdisplay:flex;に挑戦してみてください。

親要素である ul タグを flex に変更します。
子要素である li タグで、サイズを指定します。
a タグにデザインのスタイルを指定します。

<ul class="ul">
  <li class="li"><a class="a" href="#">Facebook</a></li>
  <li class="li"><a class="a" href="#">Twitter</a></li>
  <li class="li"><a class="a" href="#">LINE</a></li>
  <li class="li"><a class="a" href="#">B!</a></li>
  <li class="li"><a class="a" href="#">Pocket</a></li>
  <li class="li"><a class="a" href="#">copy</a></li>
</ul>

.ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}
.li {
  width: 30%;
  margin-bottom: 10px;
}
.a {
  display: block;
  width: 100%;
  padding: 6px 0;
  text-align: center;
}

Facebook
Twitter
LINE
B!
Pocket
copy

SNS シェアボタンを CSS でカスタマイズする

いつも通りのコピペサンプルを載せておきます。

<div class="sns-share">
  <ul class="sns-share__list">
    <li class="sns-share__item">
      <a
        class="sns-share__btn sns-share__btn--fb"
        href="https://www.facebook.com/sharer/sharer.php?u={{ $url }}"
        target="_blank"
        ><i class="fa fa-facebook fa-big"></i
      ></a>
    </li>
    <li class="sns-share__item">
      <a
        class="sns-share__btn sns-share__btn--tw"
        href='https://twitter.com/intent/tweet?url={{ $url }}&text={{ printf "%s%s" $title "\n"  }}'
        target="_blank"
        ><i class="fa fa-twitter fa-big"></i
      ></a>
    </li>
    <li class="sns-share__item">
      <a
        class="sns-share__btn sns-share__btn--line"
        href='http://line.me/R/msg/text/?{{ printf "%s%s%s" $title "\n" $url }}'
        target="_blank"
        >LINE</a
      >
    </li>
    <li class="sns-share__item">
      <a
        class="sns-share__btn sns-share__btn--hb"
        href="http://b.hatena.ne.jp/add?mode=confirm&url={{ $url }}&title={{ $title }}"
        target="_blank"
        >B!</a
      >
    </li>
    <li class="sns-share__item">
      <a
        class="sns-share__btn sns-share__btn--po"
        href="http://getpocket.com/edit?url={{ $url }}&title={{ $title }}"
        target="_blank"
        ><i class="fa fa-get-pocket fa-big"></i
      ></a>
    </li>
    <li class="sns-share__item">
      <a
        class="sns-share__btn sns-share__btn--copy js-url-copy"
        data-clipboard-text='{{ printf "%s%s%s" $title "\n" $url  }}'
        ><i class="fa fa-clipboard"></i> copy</a
      >
    </li>
  </ul>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    new ClipboardJS('.js-url-copy')
  })
</script>

.sns-share__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  margin: 0;
  background-color: #fff;
}
.sns-share__item {
  width: 30%;
  margin-bottom: 14px;
}
.sns-share__btn {
  display: block;
  width: 100%;
  padding: 6px 0;
  box-sizing: border-box;
  text-align: center;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  border-radius: 2px;
  transform: translate3d(0, 0, 0);
  cursor: pointer;
  transition: all 0.2s ease-out;
}
.sns-share__btn:hover {
  transform: translate3d(0, 4px, 0);
  box-shadow: none;
}
.sns-share__btn--fb {
  background-color: #4267b2;
  box-shadow: 0 4px 0 #22355a;
}
.sns-share__btn--tw {
  background-color: #1ca1f3;
  box-shadow: 0 4px 0 #1473ad;
}
.sns-share__btn--line {
  background-color: #00b900;
  box-shadow: 0 4px 0 #008800;
}
.sns-share__btn--hb {
  background-color: #02a4de;
  box-shadow: 0 4px 0 #0578a1;
}
.sns-share__btn--po {
  background-color: #ef4156;
  box-shadow: 0 4px 0 #af3240;
}
.sns-share__btn--copy {
  background-color: #bbb;
  box-shadow: 0 4px 0 #999;
}