実験だったり、備忘録だったり、脳外ストレージ。

風邪引きました。息子からありがたく頂戴したようです。昨日から娘もコホコホ言い始めました。妻よ、支えはあなただけです。なんとか持ちこたえてくれい。

ソーシャルボタンを設置する

WordPressってのは大変便利なもので、ブログユースで一般的に望まれるような機能はだいたいプラグインが用意されています。というか、用意してくれる素敵な方が存在します。
実際このソーシャルボタンを設置するプラグインもありまして、それを使えばものの10分もあれば設置できちゃいます。なので、手っ取り早く設置したい場合はこちらをお使いになると良いでしょう。

こんな感じ。

WordPress › WP Social Bookmarking Light « WordPress Plugins

まさかの手作業をしたい人は

僕も上記プラグインをしばらく使わせて頂いてたのですが、もう少し大きなボタンの方がいいかなぁと思い、その辺の細かい設定が可能な手作業による設置をしてみました。各SNSのサイトで幾つかの選択や設定後に生成されるソースを自分のWordPressテーマファイルに貼り付ければOK。

こんな感じ。

各SNSのソースは下記ページで生成します。
Twitter / Twitterボタン
Like Button – Facebook開発者
+1 ボタン – Google+ Platform — Google Developers
はてなブックマークボタンの作成・設置について

設置作業の詳細については詳しく解説してくれているブログもありましたのでそちらをご覧ください。大変参考になります。

Google1+ボタンの設置方法についてのまとめ 主要SNSサイトのソーシャルボタン-その1 – ぷろめし｜プログラミングよりも飯が好き

Twitterボタンの設置方法についてのまとめ 主要SNSサイトのソーシャルボタン-その2 – ぷろめし｜プログラミングよりも飯が好き

いいねボタン(Facebook)の設置方法についてのまとめ 主要SNSサイトのソーシャルボタン-その3 – ぷろめし｜プログラミングよりも飯が好き

はてなブックマークボタンの設置方法についてのまとめ 主要SNSサイトのソーシャルボタン-その4 – ぷろめし｜プログラミングよりも飯が好き

これだとアレなので少し追加します

メインの設置方法を自分で書かずに本当にごめんなさいなので、少しだけプラスアルファします。
さて、上記サイトを参考にしながら各SNSで無事にソースを生成し、WordPressに設置できたと思います。すると、

こんな感じになりました。いいじゃないですか、ちゃんと設置できましたね。…あれ、なんかずれてる。僕だけかな？僕のCSSのせいかな？SNS側のソースのせいかな？ちょっと気持ち悪いな。A型の人はそわそわしちゃうな。というわけでこれを直しておきましょう。

手順

1.WordPressに貼り付けた各SNSのソースをdivで括っておきます。divには任意のclass名を付けておきます。僕は”SocialButton”としています。
2.CSSでそのclassにまとめて位置関係の指定をしましょう。とりあえず今回僕が指定したCSSも載せておきますので、あとはご自分のテンプレートに合わせて数値を調整してくださいね。

ソースコード例

<!--ソーシャルボタン（facebook)-->
<div class="SocialButton">
&lt;div class=&quot;fb-like&quot; data-href=&quot;" data-send="false" data-layout="box_count" data-show-faces="true"&gt;</div>
</div>

<!--ソーシャルボタン（twitter）-->
<div class="SocialButton">
<a href="https://twitter.com/share" class="twitter-share-button">ツイート</a>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</div>

<!--ソーシャルボタン（google+）-->
<div class="SocialButton">
<div class="g-plusone"></div>

  window.___gcfg = {lang: 'ja'};
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();

</div>

<!--ソーシャルボタン（はてブ）-->
<div class="SocialButton">
&lt;a href=&quot;http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-title="" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加"&gt;<img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none" /></a>
</div>

.SocialButton{
float:left;
margin:20px 20px 40px 0;
}

もしボタンの後に続くコンテンツがレイアウト崩れを起こしているようであれば、上手くclearfixしてください（汗）。