umeda

2019.01.11

SNSボタンの設置方法＆デザインレギュレーション

ソーシャル

セキュリティなどの問題で規約に変更があったり、コードの書き方が微妙に変わっているものがありましたので、2018年12月現在の情報を調べ直してみました。
※各SNSでは、複数の便利なボタンや埋め込み表示サービスやカスタマイズ方法がありますが、こちらでは「定番のもの」のみをまとめています。

弊社デザイナーに聞いたところ「レギュレーションが意外と厳しい！」との声がありましたので、ボタンやロゴの文言・余白などを調整したい場合は、デザイン規約について触れているページの URL も併せてどうぞ！
（ボタンのカスタマイズ方法は複数ありますが、基本的には「支給されているそのまま」で使うことを推奨。）

Facebook

極端に古いコード（FBML、XFBMLなど）でも動作していますが、日々バージョンアップされており、順次使用期限が切れていきます。使用期限が切れたものの動作は保証されていませんので、なるべく新しいコードで設定されることをオススメします。
※現在の最新版は「v3.2」。直近に使用期限が切れる予定のバージョンは「v2.8」（2019年4月18日）です。

［参照］
更新履歴 - グラフAPI - ドキュメンテーション - 開発者向けFacebook

Facebook 「いいね！」ボタン

・ボタン生成ページ

必要な項目へ入力します。「レイアウト」は 4種類から、「ボタンサイズ」は 2種類から選べます。
「コードを取得」ボタンをクリックすると、コードが表示されます。
ボタンを設置したい場所と、※<body>直下へペースト。
※<body>内に JavaScript を記述できない CMS などでは「JavaScript SDK」ではなく、「IFrame」をご使用ください。

設置例

※head内へ追加（他のSNSでも共通で使用されます。）
設定しなくても動作はしますが、意図通りの情報を表示させるために必要な記述です。

<meta property="og:locale" content="ja_JP">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Tips Note by TAM">
<meta property="og:title" content="Tips Note by TAM ｜ TAM のテクニカルチームがお届けする WEB技術ブログ！">
<meta property="og:url" content="https://www.tam-tam.co.jp/tipsnote/">
<meta property="og:description" content="TAM のテクニカルチームがお届けする WEB技術ブログ！">
<meta property="og:image" content="https://〜（OGP画像のURL）（※画像サイズは 1200 × 630）">

・JavaScript SDK
※<body>直下へ（「version=v3.2」以前のバージョンを設定している場合は使用期限に注意！）

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.2&appId=【アプリIDを入力してください】&autoLogAppEvents=1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

※ボタンを設置したい場所へ

<div class="fb-like" data-href="https://www.tam-tam.co.jp/tipsnote/" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>

・IFrame
※ボタンを設置したい場所へ（<body>直下への記述は不要です。）

<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.tam-tam.co.jp%2Ftipsnote%2F&width=89&layout=button_count&action=like&size=small&show_faces=false&share=false&height=21&appId=【アプリIDを入力してください】" width="89" height="21" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>

Facebook シェアボタン

・ボタン生成ページ

必要な項目へ入力します。「レイアウト」は 3種類から、「ボタンサイズ」は 2種類から選べます。
「コードを取得」ボタンをクリックすると、コードが表示されます。
ボタンを設置したい場所と、※<body>直下へペースト。
※<body>内に JavaScript を記述できない CMS などでは「JavaScript SDK」ではなく、「IFrame」をご使用ください。

設置例

・JavaScript SDK
※<body>直下へ（「version=v3.2」以前のバージョンを設定している場合は使用期限に注意！）

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.2&appId=【アプリIDを入力してください】&autoLogAppEvents=1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

※ボタンを設置したい場所へ

<div class="fb-share-button" data-href="https://www.tam-tam.co.jp/tipsnote/" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.tam-tam.co.jp%2Ftipsnote%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">シェア</a></div>

・IFrame
※ボタンを設置したい場所へ（<body>直下への記述は不要です。）

<iframe src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fwww.tam-tam.co.jp%2Ftipsnote%2F&layout=button_count&size=small&mobile_iframe=true&appId=【アプリIDを入力してください】&width=78&height=20" width="78" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>

Twitter

ボタン生成ページ

・自分のウェブサイトにTwitterボタンを追加する方法｜Twitterヘルプセンター

右端の「Twitter Buttons」をクリックすると、5種類のボタンが選べます。
左端の「Share Button」を選択。
※テキストリンク「set customization options」から、ツイート内容のカスタマイズもできます。
「Copy Code」からボタン設置に必要なコードをコピー。
ボタンを設置したい場所へペースト。
正しく設定できたか「Card Validator＜英語＞」でチェック。

設置・カスタマイズ例

表示テキスト・URLを指定、日本語にカスタマイズ（ボタンの文言が「ツイート」になります）、サムネイル（大）を表示させる
※head内 OGP の後ろへ追加
設定しなくても動作はしますが、意図通りの情報を表示させるために必要な記述です。

<meta name="twitter:card" content="summary_large_image"><!-- サムネイル（大） -->
<!-- <meta name="twitter:card" content="summary">サムネイル（小）の場合はこちらを使用 -->
<meta name="twitter:site" content="@tips_note">
<meta name="twitter:title" content="Tips Note by TAM ｜ TAM のテクニカルチームがお届けする WEB技術ブログ！">
<meta name="twitter:description" content="TAM のテクニカルチームがお届けする WEB技術ブログ！">
<meta name="twitter:image" content="https://〜（twitterで使用する画像のURL）">

［画像サイズについて］
どちらか一方のみ設定可能。
大きな画像が印象的な『サムネイル（大）』がおすすめですが、画像で魅力を伝えにくい読み物や商品紹介などは文章がたくさん表示される『サムネイル（小）』のほうがおすすめ。

サムネイル（大）
Facebook用の「og:image」と併用可能（※画像サイズは 1200 × 630）
画像のサイズは 5MB未満
※「TipsNote」のTwitterではこちらを採用。
＜表示イメージ＞
サムネイル（小）
アスペクト比 1：1
最小画像サイズは 144 x 144
＜表示イメージ＞

※body内のボタンを設置したい場所へ

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="ツイートボタン設置テストです！" data-url="https://www.tam-tam.co.jp/tipsnote/" data-lang="ja" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

LINE

ボタン生成ページ

・LINEで送るボタン

「URLの入力」に送りたい URL を入力。
「プレビューを確認してコードをコピー」でボタンのプレビューとコードが表示されますので、コードをコピー。
ボタンを設置したい場所へペースト。

設置例

※ボタンを設置したい場所へ

<div class="line-it-button" data-lang="ja" data-type="share-d" data-url="https://www.tam-tam.co.jp/tipsnote/" style="display: none;"></div><script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>

デザインについて

・LINE APP ICON GUIDELINE
余白や禁止事項などが細かく紹介されています。

はてなブックマーク

ボタン生成ページ

・はてなブックマークボタンの作成・設置について - はてなブックマーク

ボタンのデザインを 3種類から選択。
ボタンの設定を行う。
コードをコピーし、ボタンを設置したい場所へペースト。

設置例

※ボタンを設置したい場所へ

<a href="http://b.hatena.ne.jp/entry/s/www.tam-tam.co.jp/tipsnote/" class="hatena-bookmark-button" data-hatena-bookmark-layout="touch-counter" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

デザインについて

・素材集 - 株式会社はてな

Pocket

ボタン生成ページ

・Pocket for Publishers: Pocket Button＜英語＞

ボタンのデザインを 3種類から選択。
コードをコピーし、ボタンを設置したい場所へペースト。
※カスタマイズは「Pocket Button Documentation」から行います。

設置・カスタマイズ例

リンク先を指定・日本語化・カウントの桁数が増えた時に右端を起点に設定
※ボタンを設置したい場所へ

<a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="ja" data-save-url="https://www.tam-tam.co.jp/tipsnote/" data-pocket-align="right"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>