WordPress WPTouch にソーシャルボタン(AddThis)を追加する

今回は、WPTouch に AddThis のソーシャルボタンを入れてみます。

AddThis の基本的な使い方は以前このブログでも紹介したとおり(『ブログでの social sharing(AddThis の紹介と はてブの追加)』)ですが、今回はそこから若干変更したものを WPTouch に表示させたいと思います。


基本になるボタンの構成は AddThis の “Get the Code” → “Share Buttons” で作ります。
こんな感じ。

addthis_make_button

できたコードはこちら↓
(以下のコードで、フォーマットが崩れるため?全角を使っている箇所があります。)

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-513d8d4d24bb60fa"></script>
<!-- AddThis Button END -->

これをモディファイするのですが、自分はカウンターがボタンの上に来るようにしたいので、基本 vertical にします。
それと、はてブのボタンを追加して、Pinterest と AddThis ボタンはスペースの都合で削ると。
はてブの処理に the_permalink() も入れなきゃダメみたい。
こんな感じかな。

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" 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>
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical" tw:via="papaya_papaya"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-513d8d4d24bb60fa"></script>
<!-- AddThis Button END -->

このコードを WPTouch に挿入するわけですが、とりあえずタイトルと記事の間に表示させたいと思います。
wordpress/wp-content/plugins/wptouch/themes/default/single.php

  the_content()
の直前に入れます。
ついでに一行にきれいにならぶように表組みしてサイズも調整します。

こんな感じ。

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<table>
    <tr>
        <td width="85px"><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" 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></td>
        <td width="80px"><a class="addthis_button_facebook_like" fb:like:layout="box_count"></a></td>
        <td width="85px"><a class="addthis_button_tweet" tw:count="vertical" tw:via="papaya_papaya"></a></td>
    </tr>
</table>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-513d8d4d24bb60fa"></script>
<!-- AddThis Button END -->

            	<?php the_content(); ?>				

これで大丈夫かな。
結果を見てみます。

WPTouch with AddThis

うん、いいんじゃない?
しばらくこれでいきます。


Leave your comment

papaya

This is blog what is the inside of Papaya. Hum... nobody wants that, neither do I, maybe. I think with or without my empty brain and sometimes write down here.