はじめに
ソーシャルボタン(SNSボタン、シェアボタン)の置き方に慣れていない方への指南を致します。
まず、ソーシャルボタン(シェアボタン)を作るにはこれらのコードをコピペで一発!
という類のやつは、すぐに古くなるのであまりお勧めしません。
(まあ、カスタマイズしない前提なら本投稿のものを使っていただいても問題ないです。なるべくアップデートします。)
多少面倒ですが、公式のジェネレーターで作るのが一番です。
ポイント
シェアをトップページに寄せたい、とかだと話は別ですが、
設置場所のコードにシェアURLとかを入れると事故りやすいので、
なるべくmeta文言・OGPに任せて、デフォルト文言を流し込むようにするのがよいかと思います。
仕事でやるときには、meta文言などをまとめるスプレッドシートを作って、先方に埋めてもらったりしましょう。
特に、
- タイトル ⇔ og:title
- Tweet文言 ⇔ description
あたりで競合する場合が多いので注意。
デモ
流れ
- どのボタンを置くか決める(Twitter、Facebook、LINE など)
- 各ボタンについて公式の置き方を調べる
- 適宜ジェネレーターを使ったりしてコードを取得
- コードを適切な場所に埋める
- meta文言、OGPを埋める(むしろこっちは先に埋めておくべき)
- スタイルを当てる
- ローカルで動作確認(できる範囲内で)
- 本番化して動作確認
作り方(各種サービス)
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)
ジェネレーターで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+ も需要あるかなぁ…)
最終的なサンプルコード
<!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>
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;
}
まとめ
- 最新の公式ボタンを使おう
- 基本meta文言に任せよう
- まとめデモ http://butchi.github.io/social-button-matome/