LoginSignup
16
13

More than 5 years have passed since last update.

@butchi_y(岩淵 夕希)in面白法人カヤック HTMLファイ部

ソーシャルボタンまとめ

Last updated at Posted at 2016-04-11

はじめに

ソーシャルボタン（SNSボタン、シェアボタン）の置き方に慣れていない方への指南を致します。

まず、ソーシャルボタン（シェアボタン）を作るにはこれらのコードをコピペで一発！
という類のやつは、すぐに古くなるのであまりお勧めしません。
（まあ、カスタマイズしない前提なら本投稿のものを使っていただいても問題ないです。なるべくアップデートします。）

多少面倒ですが、公式のジェネレーターで作るのが一番です。

ポイント

シェアをトップページに寄せたい、とかだと話は別ですが、
設置場所のコードにシェアURLとかを入れると事故りやすいので、
なるべくmeta文言・OGPに任せて、デフォルト文言を流し込むようにするのがよいかと思います。

仕事でやるときには、meta文言などをまとめるスプレッドシートを作って、先方に埋めてもらったりしましょう。
特に、

  • タイトル ⇔ og:title
  • Tweet文言 ⇔ description

あたりで競合する場合が多いので注意。

デモ

流れ

  1. どのボタンを置くか決める（Twitter、Facebook、LINE など）
  2. 各ボタンについて公式の置き方を調べる
  3. 適宜ジェネレーターを使ったりしてコードを取得
  4. コードを適切な場所に埋める
  5. meta文言、OGPを埋める（むしろこっちは先に埋めておくべき）
  6. スタイルを当てる
  7. ローカルで動作確認（できる範囲内で）
  8. 本番化して動作確認

作り方（各種サービス）

Twitter（ツイートボタン）

[公式] https://about.twitter.com/ja/resources/buttons#tweet
（おすすめ検索ワード: [twitter button]）

サンプルコード

（2016年4月11日現在のものです！）

<a href="https://twitter.com/share" class="twitter-share-button" data-text="（ここにツイート文言を入れる。data-text属性ごと省けばページタイトルがツイート文言になる）" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

その他

  • カスタムボタン（うちの会社では、動作的には別にリンク（カスタムボタン）でいいのでは？という意見も。）
  • Web Intent （stub）
  • Twitter Card (stub)

Facebook

ジェネレーターでGet Codeしたときに「アプリID」を求められますが、本来はアプリIDが必要です。
省いても動くは動くのですが、サイト毎にアプリを作っておくのが無難です。
（非公開のままだとシェアできない状態になってしまうので注意！）

いいね！ボタン(Like Button)

[公式] https://developers.facebook.com/docs/plugins/like-button
（英語です）
（おすすめ検索ワード: [facebook button]）

サンプルコード

（2016年4月11日現在のものです！）

<body>直後:

<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 = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.5&appId=（ここにアプリIDを入れること！）";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

設置場所:

<div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

シェアボタン

[公式] https://developers.facebook.com/docs/plugins/share-button
（英語です）
（おすすめ検索ワード: [facebook share]）

サンプルコード

（2016年4月11日現在のものです！）

<body>直後:

<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 = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.5&appId=1539136399715307";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-share-button" data-layout="button_count"></div>

その他

  • sharer.phpでカスタムボタンを作れます。ただし、その方法で作れるのはシェアボタンのみです。

シェアした時の挙動は
https://developers.facebook.com/tools/debug/og/object/
の通りになるので、本番化したらまずここでFetchしましょう。

はてなブックマーク

[公式] http://b.hatena.ne.jp/guide/bbutton
（おすすめ検索ワード: [はてな ボタン]）

サンプルコード

（2016年4月11日現在のものです）

<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" 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>

LINE

[公式] https://media.line.me/howto/ja/
（おすすめ検索ワード: [line ボタン]）

サンプルコード

<span>
<script type="text/javascript" src="//media.line.me/js/line-button.js?v=20140411" ></script>
<script type="text/javascript">
new media_line_me.LineButton({"pc":false,"lang":"ja","type":"a"});
</script>
</span>

（2016年4月11日現在のものです！）

meta

meta文言は昔ながらのdescription, keywords, authorなどと、
og:で始まるOGP、
fb: twitterなどがあります。
まとめてメタ文言と言ったり、OGPと言ったりしますが正しい用語の使い方は僕もよくわかってません。
（場合によってはog:imageの事をOGPと呼ぶ人も。OGP画像と言った方が正しいと思いますが。）

配置方法

インラインブロックにする方法

inline-blockにして vertical-align: top にすると大体うまく揃います。

フロートさせる方法

ブロック要素にして float: left にする方法もあります。

flexボックス

実はまだ使ったことがないのですがそのうち主流になりそうです。

その他Tips

  • ソーシャルボタンの列挙HTMLは別に<div>とかでもいいけど、何故かみんな<ul> <li>を好んで使う
  • LINEボタンはデフォルトだとPC非表示なので注意（確認するときはUAをスマホにしましょう！）
  • 基本、Twitterはローカルで確認可能、Facebookは本番じゃないと確認不可

いいねのバルーンがはみ出す

  • 可変レイアウトにしていれば問題ないのですが…
  • 影響が小さくなるようになるだけ左に置く
  • バルーンが出ているときにiframe要素に fb_iframe_widget_lift というクラスが付くので、これで無理矢理ボタンごと左に寄せる
  • iframe版を使う
  • overflow: hiddenしてしまう（ただしバルーンの残骸が残って不格好）

（ Google+ も需要あるかなぁ…）

最終的なサンプルコード

index.html
<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns#">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>titleはソーシャルボタンまとめ</title>

  <meta name="description" content="ソーシャルボタンについてのまとめデモページです。"> <!-- contentを書き換える -->
  <meta name="keywords" content="ソーシャルボタン,social button,シェアボタン,share,フェイスブック,facebook,ツイッター,twitter,ツイート,はてな,はてブ,hatena,hatena bookmark,line,ライン,送る"> <!-- contentを書き換える: 半角カンマ区切り -->
  <meta name="author" content="岩淵 勇樹"> <!-- contentを書き換える -->

  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=1">

  <meta property="og:title" content="og:titleはソーシャルボタンまとめ"> <!-- contentを書き換える -->
  <meta property="og:type" content="website"> <!-- contentを書き換える: article, book, profile, website のうちから -->
  <meta property="og:url" content="http://butchi.github.io/social-button-matome/"> <!-- contentを書き換える: フルパスで -->
  <meta property="og:image" content="http://butchi.github.io/social-button-matome/ogp.png"> <!-- contentを書き換える: フルパスで -->
  <meta property="og:image:width" content="128"> <!-- contentを書き換える -->
  <meta property="og:image:height" content="128"> <!-- contentを書き換える -->
  <meta property="og:description" content="この記述はFacebookシェアで使われます。ソーシャルボタンについてのまとめデモページです。"> <!-- contentを書き換える -->
  <meta property="og:site_name" content="サイト名はソーシャルボタンまとめ"> <!-- contentを書き換える -->

  <meta property="fb:app_id" content="1025731387449767"> <!-- contentを書き換える: https://developers.facebook.com/apps/ で登録 -->

  <meta property="twitter:card" content="summary_large_image"> <!-- contentを書き換える: いろいろある。このあたりを参照 https://dev.twitter.com/cards/overview -->
  <meta property="twitter:title" content="Twitterタイトルはソーシャルボタンまとめ"> <!-- contentを書き換える -->
  <meta property="twitter:description" content="Summary Cardのdescriptionです。ソーシャルボタンについてのまとめデモページです。"> <!-- contentを書き換える -->
  <meta property="twitter:image" content="http://butchi.github.io/social-button-matome/ogp.png"> <!-- contentを書き換える -->

  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <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 = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.5&appId=（ここにアプリIDを入れること！）";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <div class="wrapper">
    <ul class="list-share">
      <li class="item facebook">
        <div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
      </li>
      <li class="item twitter">
        <p class="label">Twitter ツイート</p>
        <a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
      </li>
      <li class="item hatena">
        <p class="label">はてなブックマーク</p>
        <a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" 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>
      </li>
      <li class="item line">
        <p class="label">LINE (SPのみ)</p>
        <span>
        <script type="text/javascript" src="//media.line.me/js/line-button.js?v=20140411" ></script>
        <script type="text/javascript">
        new media_line_me.LineButton({"pc":false,"lang":"ja","type":"a"});
        </script>
        </span>
      </li>
    </ul>
  </div>
</body>
</html>
style.css
ul {
  list-style: none;

  font-size: 0;
}

li {
  font-size: 1em;
}

.list-share {
  display: block;
}

.list-share .item {
  display: inline-block;

  vertical-align: top;
}

.list-share .item + .item {
  margin-left: 10px;
}

まとめ

16
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
16
13