AddThis Smart Layers を入れてみた

久しぶりの AddThis です。
最近 AddThis で Smart Layers という新しいサービスが始まったので、さっそく導入してみました。
手順はこれまで AddThis のモジュールを組み込んだことのある人なら簡単。

AddThis のページに行き、”Get the Code” を選択、さらに “Smart Layers” を選択。



“Follow”、”Share”、”What’s Next” 等のスイッチがあるので、自分の好みで切り替えます。スイッチを切り替えると、それが画面のどこに反映されるかが、右の図に表示されます。
私の場合は、画面左に “Share” のボタンと、画面右上に “Follow” のボタンが欲しいので、上の図のようにセット。
（”What’s Next” と “Recommended Content” は正直日本語対応してないんじゃないかと思うので除外しました。）

“Follow” 等のスイッチ以外の部分をクリックすると、オプションが表示されるので、自分のアカウント等を登録しておきます。



そしたら、”Generate Button” を押下します。



できたコードはこちら↓

<!-- AddThis Smart Layers BEGIN -->
<!-- Go to http://www.addthis.com/get/smart-layers to customize -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-513d8d4d24bb60fa"></script>
<script type="text/javascript">
  addthis.layers({
    'theme' : 'transparent',
    'share' : {
      'position' : 'left',
      'numPreferredServices' : 5
    }, 
    'follow' : {
      'services' : [
        {'service': 'facebook', 'id': 'takuji.ishikawa'},
        {'service': 'twitter', 'id': 'papaya_papaya'},
        {'service': 'google_follow', 'id': '114611852808545913584'},
        {'service': 'youtube', 'id': 't9j8818'},
        {'service': 'flickr', 'id': 'papayapapaya'},
        {'service': 'pinterest', 'id': 'papayapapaya'},
        {'service': 'instagram', 'id': 'papaya_papaya'},
        {'service': 'foursquare', 'id': 'papaya_papaya'},
        {'service': 'tumblr', 'id': 'seedsofpapaya'},
        {'service': 'rss', 'id': 'http://insideofpapaya.com/feed'}
      ]
    }   
  });
</script>
<!-- AddThis Smart Layers END -->

一応これをテーマファイルに貼り付ければ完成なのですが、Share ボタンを少々カスタマイズします。
上のコード生成の画面にもキャプションが書いてありますが、API が用意されているので、そちらのページを参考に弄ります。

Share ボタンに何種類か追加したいサービスがあるので、サービスコードを参照して comma separated でコードを追加します。

    'share' : {
      'position' : 'left',
      'services' : 'hatena,facebook,twitter,google_plusone_share,linkedin,evernote,pocket,delicious,tumblr,wordpress,more',
//      'numPreferredServices' : 5
    }, 

最終的にできたコードはこちら↓

<!-- AddThis Smart Layers BEGIN -->
<!-- Go to http://www.addthis.com/get/smart-layers to customize -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-513d8d4d24bb60fa"></script>
<script type="text/javascript">
  addthis.layers({
    'theme' : 'transparent',
    'share' : {
      'position' : 'left',
      'services' : 'hatena,facebook,twitter,google_plusone_share,linkedin,evernote,pocket,delicious,tumblr,wordpress,more',
//      'numPreferredServices' : 5
    }, 
    'follow' : {
      'services' : [
        {'service': 'facebook', 'id': 'takuji.ishikawa'},
        {'service': 'twitter', 'id': 'papaya_papaya'},
        {'service': 'google_follow', 'id': '114611852808545913584'},
        {'service': 'youtube', 'id': 't9j8818'},
        {'service': 'flickr', 'id': 'papayapapaya'},
        {'service': 'pinterest', 'id': 'papayapapaya'},
        {'service': 'instagram', 'id': 'papaya_papaya'},
        {'service': 'foursquare', 'id': 'papaya_papaya'},
        {'service': 'tumblr', 'id': 'seedsofpapaya'},
        {'service': 'rss', 'id': 'http://insideofpapaya.com/feed'}
      ],
      'visible' : 'always'
    }
  });
</script>
<!-- AddThis Smart Layers END -->

これをテーマファイルに貼り付けるわけですが、自分の場合は single.php に埋め込みました。
すると、今皆さんがご覧になっているように “Follow” と “Share” のボタンが表示されるようになります。

これまで、AddThis でカウンター付きのソーシャルボタンを表示していたのですが、若干雰囲気が変わりました。
ただし、Facebook の『いいね！』が『シェア』に変わったり、Google+ についても『+1』が『シェア』に変わったりしているので、ちょっと意味合いが変わるんですよね。カウンターで視覚化できるのは結構魅力的なので、しばらく今のままで運用してみて、またカウンターが欲しくなったら元に戻すかもしれません。

今回はこんなところです。