スポンサーリンク

シェアボタンを記事上に横1列に配置すると高さの違いなどで見た目が
悪くなったりしますは、このプラグインを使うと各ボタンの幅は異なりますが、
キレイに配置出来ます。

ソーシャルシェアボタンプラグイン「Tweet, Like, Google +1 and Share」

このプラグインを使ってボタンを配置するろこんな感じになります。
wp-tlp-pi

この記事上にも表示されているとは思いますが、
記事の上に1列、ボタンのがキレイに並んでいます。

参考にしたのはこちらのサイト
【参考】ソーシャルボタンを設置するWordPressプラグイン「Tweet, Like, Google +1 and Share」

このブログでは記事上にはこのプラグインのボタン。
記事下にはツイッターとFBとはてなブックマークに絞ったボタンを設置してあります。
記事下のボタンはレスポンシブでモバイル環境からアクセスがあっても
画面幅に合してくれるので、モバイルでも表示する様にしています。

このプラグインで表示するボタン

このプラグインだけだと、ツィート・いいね・Google+しか表示出来ません。
もう一つLinkedinがありますが日本ではあまりなじみが無いので表示していません。

ただし、このままだと日本では馴染み深いはてなブックマークのボタンが無いので
Add your own Custom Buttonsにカスタムボタンのソースを入力して
はてなブックマークを表示させます。

ついでに、PocketとFeedly購読のボタンも付けたかったので
カスタム用コードに色々と追加してはてなブックマーク・Pocket・Feedlyのボタンが
横一列に並ぶ用になりました。

そのコードはこちら

<a href="http://b.hatena.ne.jp/entry/%%URL%%"
class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon"
data-hatena-bookmark-title="%%TITLE%%" ・・・>
</a>

</div>
<div class="socialicons s4custombtn-1" style="float:left;margin-right: 10px;">
<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>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

</div>
<div class="socialicons s4custombtn-1" style="float:left;margin-right: 10px;">
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fb.eax.jp%2Ffeed%2Fatom%2F' target='blank' rel="nofollow"><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-big_2x.png' alt='follow us in feedly' width='131' height='56' ></a>

このコードをPlace Large button Code in this boxの方に打ち込みました。

設定の保存は画面、中央の下にあるSave Changesボタンをクリックします。

あとがき

上のコードはそのままコピペでもOKです。
ただし、Feedlyこボタンはそのままだといじって楽しむブログの購読ボタンなので
コピペする時にでも自分のコードなどに修正してください。