WPtouchにソーシャルメディアの共有ボタンを付けてみた
WPtouchに標準でついているソーシャルメディアの共有ボタンは見た目がわかりにくいので、前々からやろうと思っていたソーシャルメディアの共有ボタンを付けてみました。
single.phpを編集
まず、今回いじったのは wp-content/plugins/wptouch/themes/default にあるsingle.phpです。
WPtouch自体をアップデートするとsingle.phpが丸々書き換わってしまうので要注意です。
で、WPtouchのsingle.phpに挿入したのは以下の様なコード。
<div class="aligncenter" style="margin-top:5px">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="muga_over" data-count="none">Tweet</a>
<script>!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");</script>
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<div class="fb-like" style="position:relative; top:-4px" data-send="false" data-layout="button_count" data-show-faces="false" data-font="arial"></div>
</div>
<br />```
DIVタグを作ってツイートボタン、はてブボタン、いいね！ボタンを設置しているだけなんですけどね。
あ、上記のコードをそのまま挿入すると、僕のTwitterアカウントにメンションが飛ぶので適宜変更してください。
ツイートボタンの設定は<a href="https://twitter.com/about/resources/buttons" target="_blank">コチラ</a>。
はてなブックマークボタンの設定は<a href="http://b.hatena.ne.jp/guide/bbutton" target="_blank">コチラ</a>。
Facebookのいいね！ボタンは<a href="http://developers.facebook.com/docs/reference/plugins/like/" target="_blank">コチラ</a>。
Facebookのいいね！ボタンはそのまま設置すると高さが他の２つとズレるので、
囲んでいるDIVに style="margin-top:5px" 、
いいね！ボタンのコードに style="position:relative; top:-4px"
を追記しています。
<h2>Facebookのいいね！ボタンはheader.phpをいじる必要あり</h2>
Facebookのいいね！ボタンのコードを取得すると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/en_US/all.js#xfbml=1&appId=XXXXXXXXXX"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
これはheader.phpに追記します。 前にこんな記事も書いたので、一からいいね！ボタンを設置する場合には参考にしてください。 <a href="http://muga.hatenablog.com/entry/wordpress/facebook-like-button/" target="_blank">WordPressでの「いいね！」ボタン設定についてのメモ | MUGA.me</a> スマホ用のページでただソーシャルメディアの共有ボタンが羅列されていたり、スタイルが乱れているのを見るのですが、それはあんまり好きじゃなかったので数も減らして今回のようにしました。 とりあえずの設定なのは否めませんが、こうした簡単な修正でも設置できます。
