WordPress、iPhone中心ゆるゆる・ぐだぐだ日記。

tumblr@instagramtumblr@spaceflickrfacebookfollow me!feed

シェアツールカスタマイズ3本勝負:AddThis編(1)

シェアツールカスタマイズ3本勝負:AddThis編(1)

シェアツール(という呼び方でいいのかな…?)は紆余曲折の末、AddToAnyを使用する事にしたのですが、少し前に入ったアップデートの後から何故か表示されなくなってしまいました(カスタマイズ無し)。原因はAddToAnyではなく私の結果オーライCSSがいけなかったようなのですが、現行の“自作ツール+AddToAny”という表示方法もいつかは直したいと思っていたので、この際、以前挫折したAddThis, ShareThis, AddToAnyのシェアツール3本のカスタマイズをやってみる事にしました。
という事で本日は1本目、AddThis編です。

やりたい事、理想の仕様など

まず、このブログのシェアツールエリアはこんな感じ(でした。この記事を書いている時点では、一番右のAddToAnyのアイコンは見えなくなっていると思います)。
101021_01
最終的にはこれとあまり変わらない形にしたいと思います。
その上で、やりたい事、理想の仕様などは以下の6つです。

  1. 好きな場所に配置できるか(必須)
    投稿の前、後、あるいはサイドバーウィジェットとして、など自動で配置してくれる機能だけでなく、テンプレートの任意の場所に設置できること。上の画像のような配置にする場合、自動配置では無理なので。
  2. 好きなサービスを配置できるか(必須)
    画像は前振りに書いた通り“自作ツール+AddToAny”で表示しています。Twitter、Facebook、Deliciousが自作、一番右がAddToAnyです。
    このような“任意のサービスいくつか+その他のサービスを表示するアイコン”を、自作ツールではなく一つのシェアツールだけで表示します。きっとできるよ。できるといいな。できるかな…。
これに加えて、3つのツールの中から一番理想に近いものを選ぶ(予定)なので、以下の4項目もチェックします。

  1. twitterでURLを短縮できるか(必須)
  2. twitterで不要な語句やRT(返信)が入らないか
  3. アイコンを好きなものに変更できるか
  4. アクセス解析的なものがあるか

好きな場所に配置できるか(必須)

AddThisをwpプラグインとしてインストールすると、見た目や機能をwpの管理画面からある程度設定する事ができます。
また表示位置や表示するページも選べますし、ウィジェットも追加されているのでサイドバーに簡単に表示させる事もできます。もし任意の場所に表示させたければ、表示させたい場所に
<?php do_action( 'addthis_widget' ); ?>
と書けばその場所に表示されます。

ただしこのテンプレートタグで表示できるのはwpの管理画面から設定できる見た目や機能に限られるので、それ以外の表示方法や機能を希望する場合は、プラグインとしてではなくテンプレートに直接Javascriptを書く事になります(この場合、プラグインは必要ありません)。

「やりたい事」に書いたような内容は管理画面から設定できる見た目や機能では実現できないので、テンプレートに直接Javascriptを書くしかありません。

好きなサービスを配置できるか(必須)

で、そのJavascriptですが…
元々Javascriptなんてほとんどわからない上に当然ながらAddThisのサイトがおーる英語なのでまったくわからんw
それでも何とか気合とフィーリングでw解読しながらやってみた結果が以下です。
きっともっといい方法もあるだろうし、やれる事もあると思うのですが、私の知識と英語力ではこれが限界ですた○| ̄|_

それではまずは好きなサービスを配置してみるところからやってみます。

初めにココで基本となる形を選んでコードをコピーします。
http://www.addthis.com/web-button-select?where=website&type=bm&bm=tb3
「Where do you want to put your button?」は「Website」を選んでください。
このブログの場合、「Select your style」は上から3番目が近いと思います。
また「Enable clickback analytics」はAddThisにユーザー登録しておくとアクセス解析的なものが使える(らしい)ので、使いたい場合はユーザー登録をしてからチェックを入れます。

そして吐き出された結果はこれ。
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xxxxxxxx"></script>
<!-- AddThis Button END -->
classの”addthis_button_preferred_1″はユーザーのサービスの使用頻度によって表示されるサービスが違うらしいです。試しにメインで使っているブラウザとサブで使っているブラウザで見たところ、確かに違っていました。

ユーザーによって違うサービスを表示させたければこのままで(数は変更できるらしい、最高11)、固定サービスにしたければこのclassの部分を変更します。
(※詳しくはhttp://www.addthis.com/help/client-api#rendering-preferred-serviceをどうぞ…英語ですが;;他にも色々なclassがあるようで、このページの「Decoration Class Reference」という所から下に書いてあります。)

で、その固定サービスにするclassですが、このページを参考にしました。
http://www.addthis.com/help/toolbox
「Toolbox Examples」の「Show code for this example」という所をクリックして開いてみると、このようなコードが展開されます。
<div class="addthis_toolbox addthis_default_style">
    <a class="addthis_button_email"></a>
    <a class="addthis_button_print"></a>
    <a class="addthis_button_twitter"></a>
    <a class="addthis_button_facebook"></a>
    <a class="addthis_button_myspace"></a>
    <a class="addthis_button_stumbleupon"></a>
    <a class="addthis_button_digg"></a>
    <span class="addthis_separator">|</span>
    <a class="addthis_button_expanded">More</a>
</div>
どうやら”addthis_button_xxxx”のxxxxの所を好きなサービスに変えればいいみたいですね(※注:上記のコードをそのままコピペしただけでは動きません)。

各サービスのコードはこちら。
http://www.addthis.com/services/list

■そして最初の画像のような並び順に出力するコードを作りました。
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_twitter"></a>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_delicious"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xxxxxxxx"></script>
<!-- AddThis Button END -->
出力結果はこちら

■ちょっと違うのも混ぜたバージョン
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_twitter"></a>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_delicious"></a>
<a class="addthis_button_email"></a>
<span class="addthis_separator">|</span>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_facebook_like"></a>
<span class="addthis_separator">|</span>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xxxxxxxx"></script>
<!-- AddThis Button END -->
出力結果はこちら
||
う~ん、ごめんなさい思ったより長くなったので、2記事に分けます;
続きはまた後日上げますね。中途半端ですみませんm(__)m
シェアツールカスタマイズ3本勝負:AddThis編(2)へ続く