《静的用》カウントなしのソーシャルボタン設置、外部jsにまとめる方法

最近はwpでのサイト構築が多くなってますが、今回はhtml直書きで静的ページを作る場合の、アカウントなしのソーシャルボタンの設置方法、書き方をまとめます。備忘録です。

完成形のイメージです。

サンプルデモ

カウントなしの横並びで、ツイッター、facebookのいいね、シェア付きボタン、はてぶと一応googleプラスです。

方法は、jsを一纏めにして、外部ファイル化にします。シェアボタンを複数設置いつでもできるように。

あとは、設置したい箇所にhtmlを記述するだけです。
では、以外サンプルコードです。

外部ファイル化するjsファイルのコード

(function(w,d){
 w.___gcfg={lang:"ja"};
 var s,e = d.getElementsByTagName("script")[0],
 a=function(u,f){if(!d.getElementById(f)){s=d.createElement("script");
 s.src=u;if(f){s.id=f;}e.parentNode.insertBefore(s,e);}};
 a("//b.st-hatena.com/js/bookmark_button.js");
 a("//platform.twitter.com/widgets.js","twitter-wjs");
 a("//connect.facebook.net/ja_JP/all.js#xfbml=1","facebook-jssdk");
 a("https://apis.google.com/js/platform.js");
})(this, document);

上記コードをjsファイルとしてサーバにアップロードします。そのファイルをhtml内で呼び出し記述します。 以下のコードをhtmlに記述してファイルの読み込みしてください。緑字は設置するファイルのURLに変更してください。

<script type="text/javascript" src="https://tuono034s.com/js/スクリプトのファイル名.js"></script>

この場合、ほかのファイルと関連ないので、1番あと読みでいいので閉じbodyの直前で書いていいです。運用していくには管理面も大事なので管理しやすい方法で、ほかのjsと並びで記述でもokです。自由にして下さい。

高速読み込みとか考える場合は、レンダリング順とか気にした方がいいですね。

これでjsは完了です。

直書きした場合のサンプルデモ

htmlにソーシャルボタンの設置記述

以下のコードをソーシャルボタンを表示したい場所に記述します。

<ul>
<li><a class="twitter-share-button" href="https://twitter.com/share" data-dnt="true">Tweet</a></li>
<li><div class="fb-like" data-href="https://tuono034s.com/web-entry/1118/" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div></li>
<li><a href="http://b.hatena.ne.jp/entry/https://tuono034s.com/web-entry/1118/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-noballoon" 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></li>
<li><div class="g-plusone" data-annotation="none" data-size="medium"></div></li>
</ul>

このページに設置するとした場合の記載方法です。緑字の箇所は設置するページのURLに変更してください。
ページ内に複数記述しても大丈夫です。表示されます。

これで完了です。

ボタンクリックしたときの挙動

この設置した状態でボタンクリックしたときの挙動をまとめます。

ツイッターボタンクリックした場合

ページのタイトルとURLが表示されます。

fbいいねボタンクリックした場合

タイムラインにいいねのしましたの表示がされます。

コメント入力もできます。この場合シェアになります。descriptionを書いていれば表示されます。

fbシェアボタンクリックした場合

コメント入力欄がでてきます。ページタイトルが表示されています。descriptionを書いていれば表示されます。

はてなブックマークボタンクリックした場合

コメント入力欄がでてきます。

googleplusボタンクリックした場合

コメント入力もできます。タイトルと本文の冒頭が表示されています。本文の冒頭部分はdescriptionを書いていればdescriptionが表示されます。

ogpの設定（書いた方がいいと思うもの）

上記の設置で問題なくシェアできますが最低限のogp設定したい場合は以下の記述をmetaに追加します。

<meta name="twitter:card" content="summary_large_image" />
<meta property="og:title" content="《静的用》カウントなしのソーシャルボタン設置、外部jsにまとめる方法" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://tuono034s.com/web-entry/1118/" />
<meta property="og:image" content="https://tuono034s.com/画像のURL" />
<meta property="og:site_name" content="ウェブマスターがウェブのことを書いたら" />
<meta property="og:description" content="ここにdescriptionを書きます。" />
<meta property="og:locale" content="ja_JP" />

このページに記述するとした場合です。緑字の部分はページごとに可変する箇所です。
※[twitter:card]を設定するとog:imageを設定した場合に画像が表示されます。
※[og:description]は通常のdescriptionが記述されていればなくてもそっちが表示されます。なくてもいいです。