umeda

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

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

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

目次


 

Facebook

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

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

Facebook 「いいね!」ボタン

ボタン生成ページ

  1. 必要な項目へ入力します。「レイアウト」は 4種類から、「ボタンサイズ」は 2種類から選べます。
  2. 「コードを取得」ボタンをクリックすると、コードが表示されます。
  3. ボタンを設置したい場所と、※<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 シェアボタン

ボタン生成ページ

  1. 必要な項目へ入力します。「レイアウト」は 3種類から、「ボタンサイズ」は 2種類から選べます。
  2. 「コードを取得」ボタンをクリックすると、コードが表示されます。
  3. ボタンを設置したい場所と、※<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ヘルプセンター

  1. 右端の「Twitter Buttons」をクリックすると、5種類のボタンが選べます。
  2. 左端の「Share Button」を選択。
    ※テキストリンク「set customization options」から、ツイート内容のカスタマイズもできます。
  3. 「Copy Code」からボタン設置に必要なコードをコピー。
  4. ボタンを設置したい場所へペースト。
  5. 正しく設定できたか「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で送るボタン

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

設置例

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

<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
余白や禁止事項などが細かく紹介されています。

 

はてなブックマーク

ボタン生成ページ

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

  1. ボタンのデザインを 3種類から選択。
  2. ボタンの設定を行う。
  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<英語>

  1. ボタンのデザインを 3種類から選択。
  2. コードをコピーし、ボタンを設置したい場所へペースト。
    ※カスタマイズは「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>

デザインについて

サービス利用規約<英語>

 

おまけ

もう設置する機会はないと思いますが、「Google+」「mixi」の流れだけご紹介いたします。
詳しくは以下の参照ページをご覧ください。(2013年からほぼ変わっていません。)

[参照] SNSボタンの設置方法まとめ | Tips Note by TAM

SNSボタンの設置方法まとめ

Google+

※2019年4月にサービス終了予定です。

ボタン生成ページ

Share | Google+ Platform for Web | Google

  1. 「+1 情報」を 4種類から、「サイズ」を 3種類から選択。
  2. 「共有する URL」を入力。
  3. コードをコピーし、ボタンを設置したい場所へペースト。(コード内のコメントも参照ください。)

デザインについて

Sign-In Branding Guidelines | Google Identity Platform | Google Developers<英語>
「Google」ロゴのガイドラインページなので、「Google+」については触れられていませんが、参考まで。

 

mixi

ボタン生成ページ

チェックボタン用HTML発行フォーム << mixi Developer Center (ミクシィ デベロッパーセンター)

  1. フォームに必要事項を入力。ボタンは 6種類から選択。
  2. タグをコピーし、ボタンを設置したい場所へペースト。
    ※「チェックキー」発行には、別途 mixi Developer Center内「Partner Dashboard」からサービス登録・設定をする必要があります。

デザインについて

mixiロゴ・素材利用ガイドライン(mixi Platform) << mixi Developer Center (ミクシィ デベロッパーセンター)

 

全ての記述例

HTML サンプル
 
 
 
SNS というサービスの都合上、古い記述でも突然動かなくなることはあまり考えられませんが、リニューアルや新規作成の際は、今まで使用していたものを流用するのではなく「最新の情報」を参考にされた方が安全です。

ロゴのレギュレーションも意外と気にしていないことが多いので、公式の情報も確認してみてくださいね。

お問い合わせはこちら