概要

シェアするボタンを最近作った時に確認したドキュメント等のまとめとサンプルコードを記載しています。

Facebook

ドキュメント

シェアボタン - Meta for Developers

アイコン

下記のページからダウンロードできる zip の中にロゴと使い方の詳細な説明書が入っております。
ロゴ - Meta

注意点

他のアイコンと並べて使用するときは、同一のサイズにする
最低でも上下左右にアイコンの 1/4 以上のサイズの余白が必要

コード

<a href="//www.facebook.com/sharer/sharer.php?u=https://< YOUR PAGE URL >"
   target="_blank"
   rel="nofollow noopener noreferrer">
  <img src="/static/img/facebook/icon.png" style="width: 40px; height: auto;">
</a>

LINE

ドキュメント

「LINEで送る」ボタンを設置する - LINE Developers

アイコン

下記ページから使いたいロゴを個別にダウンロードする。
ロゴ - LINE

注意点

個別に最小サイズの制限が決まっているので注意
最低でも上下左右にアイコンの 1/2 以上のサイズの余白が必要

コード

<a href="https://social-plugins.line.me/lineit/share?url=https://< YOUR PAGE URL >"
   target="_blank"
   rel="nofollow noopener noreferrer">
  <img src="/static/img/line/icon.png" style="width: 40px; height: auto;">
</a>

Twitter

ドキュメント

Tweet button - Twitter Developer Platform

アイコン

下記ページから大量のロゴが含まれたファイルをダウンロード可能。
使用ガイドについては同一ページからダウンロード可能。
Our logo, brand guidelines, and Tweet tools - Twitter

注意点

個別に最小サイズの制限が決まっているので注意
（Social iconsであれば32px）
ロゴの横幅に対し150%の余白を持っていなければならない
（=最低でも上下左右にアイコンの 1/4 以上のサイズの余白が必要）

コード

<a href="https://twitter.com/intent/tweet?url=https://< YOUR PAGE URL >"
   target="_blank"
   rel="nofollow noopener noreferrer">
  <img src="/static/img/twitter/icon.png" style="width: 40px; height: auto;">
</a>

まとめ

この３つを横に並べるのであれば

Facebookの 他のアイコンと並べて使用するときは、同一のサイズにする が適用されるので、同一の大きさにする必要が出る。
最小サイズは LINE の Mobile表示の場合 40px となる。今回は PC とスマホで変える予定はなかったので最小サイズは 40px とした。
余白はLINEが 1/2 以上必要なので 20px のマージンを上下左右にとることとした。

コード

※ Bootstrap 4 を使用していることを前提にしています。 html

<div class="d-flex" style="margin: 20px 0;">
  <div class="line-h-40px">
    シェア:
  </div>
  <div class="icon-area">
    <a href="https://www.facebook.com/sharer/sharer.php?u=https://< PAGE URL >"
       target="_blank"
       rel="nofollow noopener noreferrer">
      <img src="/static/img/facebook/icon.png" class="sns-icon">
    </a>
  </div>
  <div class="icon-area">
    <a href="https://twitter.com/intent/tweet?url=https://< PAGE URL >"
       target="_blank"
       rel="nofollow noopener noreferrer">
      <img src="/static/img/twitter/icon.png" class="sns-icon">
    </a>
  </div>
  <div class="icon-area">
    <a href="https://social-plugins.line.me/lineit/share?url=https://< PAGE URL >"
       target="_blank"
       rel="nofollow noopener noreferrer">
      <img src="/static/img/line/icon.png" class="sns-icon">
    </a>
  </div>
</div>

css

.line-h-40px {
    line-height: 40px;
}

.icon-area {
    margin: 0 10px;
}

.sns-icon {
    width: 40px;
    height: auto;
}