はじめに
ブログをWordpressを利用しないでやりたかった(←ただの自己満足です。)ので、コツコツと作ったのですが、そのときブログをシェアやツイートしてもらうために、よくあるSNSボタンを設置しました(｡・∀・)ﾉ
まぁ、検索すればいろいろと出てくるのでQiitaに書くものではないかもしれないけど、一応。
設置した自分のブログはこちら→ようやくちょっと自動化
設置するもの
- Twiiterへのツイートボタン
- Pocketのストック？ボタン
- Facebookのいいねとシェアボタン
- Google+のシェア？ボタン
端的に言うと、https://about.twitter.com/resources/buttonsにアクセスして選ぶとコードが生成されるのでそれを設置したいところにペイっと貼るだけです( º言º` )
まぁ、コードとしては
<a href="[ブログのURL]" class="twitter-share-button">Tweet</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>
もしくは
<a href="[ブログのURL]" 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>
日本人向けではなく全世界中へなら上の方、日本人向けのみなら下の方を使うといいのかも？
まぁ、日本語になっているか、なっていないかだけですが。
ちなみにこのままだとツイートされた数の吹き出しが横にでるのですが、上に表示したい場合は、
data-count="vertical"
これをaタグ内に追加するだけです。はい、終わりー。
次はPocket。これもhttp://getpocket.com/publisher/buttonにアクセスして設置したいものを選ぶだけです。まぁ、コードだと
<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></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>
これは何もいじらないでこのまま使ってください。ちなみにこれは上吹き出しです。
横吹き出し、吹き出しなしは上記のURLにアクセスしてください。
Facebookも、https://developers.facebook.com/docs/plugins/like-buttonにアクセスして選択して出てきたコードをコピペで完了です。ただし、Facebookのデベロッパーアカウントを作成し、設置するサイトを登録しないといけません。また、コピペする際も今回はコードを2箇所に貼るので注意が必要があります。まず最初にbody開始のタグ(<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&appId=[登録したアプリのID]&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
そして、ボタンを設置したいところに
<div class="fb-like" data-href="[ブログのURL]" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true"></div>
これで終わりです。
Google+
はい、Google+も今までと同じです。https://developers.google.com/+/web/+1button/にアクセスして選択してコピペ。ただし、Facebookの時と同じで2箇所にコードを貼らないといけません。
<!-- head 内か、body 終了タグの直前に次のタグを貼り付けてください。 -->
<script src="https://apis.google.com/js/platform.js" async defer>
{lang: 'ja'}
</script>
<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-plusone" data-size="tall" data-href="[ブログのURL]"></div>
そう、Google+だと日本語でどこに貼るかかいてあるのでそれに従ってください。はい、終わり。
ボタンを横に揃える
まぁ、そうやって設置したボタン。このままだと適当な感じに並んで表示されて( º言º` )っという顔になります。
なので、CSSとulタグ、liタグを使って綺麗にしてあげます。まずはHTML側から。今回はsns_bというクラスを作ってあげます。
<ul class="sns_b">
<li>
<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-url="[ブログのURL]" 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>
<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></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>
</li>
<li>
<div class="g-plusone" data-size="tall" data-href="[ブログのURL]"></div>
</li>
<li>
<div class="fb-like" data-href="[ブログのURL]" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true"></div>
</li>
</ul>
次にCSS側。
.sns_b {
overflow: hidden;
list-style: none;
}
.sns_b li {
float: left;
margin-right: 4px;
}
.sns_b iframe {
margin: 0 !important;
}
はい、これをそのままコピペして[ブログのURL]というところを自身のサイトのURLに、そしてGoogle+とFacebookのボタンのために準備をするあれらを貼りつけて、FacebookはAppIDを自身のにしてもらえば終わりです。
簡単やぁ(*・ω・*)